I create geometry in C4D; export OBJ, then convert using the threejs converter, import into three.js. Then I load in the image file I was using in C4D and it aligns properly; This works as expected.
Occasionally, i get coordinates from the OBJ that are [-1 to 1] instead of [0 to 1]. When this happens, the texture does not display properly (just shows a few pixels scaled up).
QUESTION(s):
is there a way to consistently get the coords exported into [0-1] scale (I know I can write some normalization code, but it seems like this only occasionally happens so I'd rather just fix the problem than create a workaround) - this may be a Cinema 4D question or general 3D question...
In three.js is there a way to get UV coords to display correctly if they're [-1 to 1]? I've read about setting .wrapS and .wrapT to THREE.RepeatWrapping but this doesn't seem to work.
What format are you using to upload ThreeJS?
if you have doubts about compiler, you may want to take a look to ObjLoader Demo
if values are not between 0 and 1, you should set texture's wrapS and wrapT properties as THREE.RepeatWrapping
var texture = new THREE.TextureLoader().load("texture.jpg");
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.needsUpdate = true; // if texture is already initialized.
Related
I'm trying to set a texture to an already existing mesh like this:
const texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
(The source a HTML5 canvas and that part works ok.)
...
mesh.material[0].map = texture;
I can change the material color without any problems, but setting the texture doesn't change anything. I guess this is not how changing the texture should be done..? I'm using MeshPhongMaterial.
So, long story short: I want to be able dynamically change a texture of an mesh.
Edit:
I'm trying to set the texture to one of the materials of a Collada model that is loaded. By using dev tools I can see that the texture is there in the object, but it is just not visible. I can change the color of the same material without any problems. Sometimes I can see the texture appearing with wrong colors after a very long idle time (which is weird).
I first created a figure with the background as a .png image. Then I created a 3D axes on top of the figure so that the 3D axes is placed on top of the .png image. Note that the .png image is not set inside of the 3D axes but is set outside of the axes in the figure itself.
I have a 3D .stl file of an apple set inside of the 3D axes (you can't see the apple by the way). When I move the apple around inside the 3D axes, using the option from the builtin Matlab figure toolbar, it works fine. But the problem here is that when I move the apple outside of the borders of the 3D axes, it disappears.
To tackle this problem, I want to set the size of the 3D axes so that its limits go outside of the figure, so that I can move my apple around anywhere in the figure without being limited to the size of the 3D axes. Note: I didn't make the 3D axes invisible, so that it is easier for people to understand my question. But when this problem is solved I will use axis off to make the 3D axes invisible, while retaining and displaying the apple.
Here is the main code
pearImage = 'pears.png';
appleModel = 'apple.stl';
backgroundImage = imread(pearImage);
[vertices,faces,~] = stlRead(appleModel);
axesHandle = axes('unit','normalized','position',[0 0 1 1]);
imagesc(backgroundImage)
set(axesHandle,'handlevisibility','off','visible','off')
uistack(axesHandle,'bottom')
stlPlot(vertices,faces)
Here is the function for stlPlot()
function stlPlot(vertices,faces)
object.vertices = vertices;
object.faces = faces;
patch(object,'FaceColor',[0.1 1.0 1.0],'EdgeColor','none')
camlight('headlight')
material('dull')
axis('image')
view([-135 35])
axis off % used to make the 3D axes invisible
I got the stlRead() and stlPlot() functions from here: https://kr.mathworks.com/matlabcentral/fileexchange/22409-stl-file-reader?focused=5193625&tab=function. Note that I edited the stlPlot() function to fit my purpose.
I believe you can solve this problem by changing the 'Clipping' property of the patch objects you create:
hPatch = patch(object, 'FaceColor', [0.1 1.0 1.0], 'EdgeColor', 'none', 'Clipping', 'off');
Or, more simply, you could probably just set the 'Clipping' property of the parent axes object itself (which controls clipping behavior for all of its children):
set(get(hPatch, 'Parent'), 'Clipping', 'off');
I am attempting to modify the ThreeJS materials example seen here, and have been fairly successful so far in reverse engineering it in to my own minimalist demo.
The problem comes when I attempt to modify the materials.
I have changed mlib["Orange metal"] to the following:
"Orange metal": new THREE.MeshLambertMaterial( {
map: carTexture,
envMap: skyBox,
combine: THREE.MultiplyOperation
} )
carTexture is a reference to the following:
var carTexture = THREE.ImageUtils.loadTexture('texture/blue.jpg');
carTexture.wrapS = carTexture.wrapT = THREE.RepeatWrapping;
carTexture.repeat.set(3,3 );
carTexture.wrapS = THREE.RepeatWrapping;
carTexture.wrapT = THREE.RepeatWrapping;
And while this has changed my final output, the detail in the texture is missing.
For reference: here is the texture file:
Which clearly has a metalic flake texture.
Meanwhile my final product looks like this:
Completely smooth.
Yet, if I add a taurus with the exact same texture, I can see the details quite clearly:
I have played around with the dimensions of the texture file (up to several thousand percent), and the reflectivity of the MeshLambertMaterial, but not been able to see any change at all.
Your model needs UV coordinates.
On a model like this, it will need to be done in 3d software such as 3ds Max, Maya etc.
If you could get your hands on a version of the model which already has the correct UV coordinates set it would save you all the hassle.
Setting up UV coordinates is not so easy on a model like this if you have never done it before.
An alternative may be generate your paint flake in your shader (without using UV) rather than in a texture (I willl soon be attempting this myself for a personal project).
HERE are some youtube videos on UV unwrapping in 3ds Max
I am trying to build a shoe designer with help of three.js. Shoe model is exported from Blender as json and then trying to apply image loaded textures.
newTexture = THREE.ImageUtils.loadTexture( 'textures/'+filename);
newTexture.magFilter = THREE.NearestFilter;
newTexture.minFilter = THREE.LinearMipMapLinearFilter;
newMaterial = new THREE.MeshPhongMaterial({ map: newTexture});
Textures are applied good on small parts of shoe:
But not good on larger parts:
if you try the sample
http://sandbox.justaddwater.in/ShoeDesigner44/ (it may take some time to load), and try changing the textures using the top buttons, you will see the textures are not uniform over the faces and appear with lines.
I have also tried the repeat function as per responses of other questions here, but it doesn't helped and even textures details get lost while using repeat.
newTexture.wrapS = newTexture.wrapT = THREE.RepeatWrapping;
newTexture.repeat.set(2,2);
Your shoe model is not UV-unwrapped properly.
Open you model in blender and unwrap it there, then export the model once again.
There are many tutorials on YouTube that teach how to unwrap meshes properly in Blender.
We have a model created in Blender by subtracting an extruded SVG from a “flat” base using a boolean difference operator. Or in other words, we carved a picture into it. The model renders just fine in Blender, but loading it into our simple, three.js-based web viewer (using the json exporter for Blender), we get some really odd shadows on the surface, and depending on the scale, shiny vertexes.
Here's my light and camera:
camera = window.camera = new THREE.PerspectiveCamera(45, $('main').width() / $('main').height(), 10, 10000);
loader = new THREE.JSONLoader(true);
var light = new THREE.DirectionalLight(0xffffff, 1.0);
light.position.set(-30, 30, 100);
light.target.position.set(0, 0, 0);
light.shadowCameraNear = 200;
Can anyone spot whether we did something wrong? And is that a Three-specific issue, or WebGL, or Blender, or our model?
Output (screenshot)
Fiddle
Looking at your fiddle, it seems that your vertexNormals are totally smoothed and thus shading is incorrect.
See here:
https://github.com/mrdoob/three.js/issues/1258
Does this help?
I'm not sure if this technically counts as a solution, but — worked around the problem by dropping the JSON blender export, and using P3D instead to load .stl directly.