I've got a 3D object with an unwrapped uvw map, done in 3ds max, and saved as an .fbx. When I load the object into a 3js scene and apply a texture, the mapping is lost. How do I keep the uvw mapping on the object? Many thanks.
I think your problem might be more related to 3DS Max.
Have you applied the UVW modifier ?
Are your Uv on the good channel ? (Threejs use first uv channel for Map, bump, roughness, metalness, etc. And second channel for lightmap and Ao)
When you import your FBX model into 3DSMax or Blender, have you checked the model exported still have UVs ?
Related
I have a problem with three.js GLTFExporter.
I added a model with a transparent map to the scene.
model in three.js render
but if i use GLTFExporter to export this model, when i use GLTFLoader to load this model,
It doesn't look like what I showed you before（The transparency of the glass is lost.
The effect after export from GLTFExporter
What is known so far is that I used transparent maps for this model，when I export the model, the transparency effect disappears.
Could you please provide me with some solutions?
Thank you for your help. The reason for this problem is that after loading the .3ds model at the front end, I exported it as .gltf file. When loading the .gltf file again, part of the attribute values were lost, for example, alphaMap became null and .transparent became false, so the transparency effect failed.
So far I've solved this problem by modifying the .gltf attribute values:
Set the last item in the array below the GLTF file to 0.1, which represents the transparency of the object
materials.pbrMetallicRoughness.baseColorFactor = [1,1,1, 0.1]
I’m having a hard time getting an aoMap working in three.js…
I have a glb asset with an aoMap on the red channel or something. When I bring it into to the babylon viewer, I can see the ao just fine, but it wont show up in the three.js viewer or my project. I think this has something to do with a second set of uvs, but I can't find a resource that involves doing that on top of using the gltf loader… I really don't know what to do here. Any response would be greatly appreciated!
Here is my code (I’m using a html-canvas as the texture)
And I get the model’s geometry and diffuse texture (all white) as desired, but the aomap isnt showing…
code
babylon viewer
three.js viewer
working application with shadows included in diffuse
not working, diffuse is just white, and aoMap is not showing
You're right about needing a second set of UVs. The reason behind this is that diffuse textures often repeat (think of a brick wall, or checkered t-shirt). AO shading, however, is more likely to be unique on each part of the geometry, so it's almost never repetitive. Since this often would need an alternative UV mapping method, the default is to use a second set of UVs.
You could do 2 things:
Re-export your GLTF asset with a duplicate set of UVs.
Duplicate existing UVs in Three.js by creating a new BufferAttribute in your geometry:
// Get existing `uv` data array
const uv1Array = mesh.geometry.getAttribute("uv").array;
// Use this array to create new attribute named `uv2`
mesh.geometry.setAttribute( 'uv2', new THREE.BufferAttribute( uv1Array, 2 ) );
.getAttribute and .setAttribute are methods of BufferGeometry, if you want to read more about them.
When id use FBXLoader to load fbx model, a seam appeared on the map of the model.
Here the image of fbx model on uv seam:
Here the texture of the model:
How to fix this problems?
Thanks.
Try setting that texture's minFilter to THREE.LinearFilter. This should improve it if not eliminating the seam altogether.
The other solution is of course to add padding to your texture.
So my question is, when creating textures inside blender how can i configure those textures so that when I export mesh with Three.js exporter they get assigned as specific textures (map, aoMap).
So far I have one mesh with two textures and one textures is map(diffuse) and other texture is lightMap. ( That's what I figured out from generated .json file)
I want to set one texture to remain to be map, and another one to be aoMap insted of lightMap.
So I figured it out by looking at python scripts for Three.js exporter.
If you want texture to be map (diffuse) you need to set "Blend" property on texture inside Blender to be "Color". If you want texture to be map (light) you need to set texture "Blend" property inside blender to "Multiply".
It appears that exporter does not support map (ambient occlusion). I guess I will have to hack it up so it does.
I want to bake my model lightmap in blender then load them all in three.js.
So in blender i set two uvs for each objects and baked ambient occlusion in second uv. finally i exported whole scene via three.js exporter into js file.
(exporter has problem that the baked texture goes for diffuse-map not light-map which is correctable by editing exported js file).
But the problem is when i load js with SceneLoader, the textures especially for my floor goes wrong, like upside down.
here is my test files: Test Light Map
So is there something wrong with my blender file or ...? Which loader i should use for it?
Thanks.
I just upload some images to see what i mean:
Messed up textures:
After edit js file, it's get better. but still there is problem at the edges:
And specially at floor, the light-map goes wrong:
Ok, i don't know why, but it seems my uvs was messed up in blender. i did some recaculate normals and flip normals in blender and now textures map fine on objects.
But i still need to edit exported scene to change map:texture.png to lightMap:texture.png.
[EDIT]
Actually this is a bug related to three.js scene exporter: Blender Exporter - Scene Exporting
[Final Answer]
The problem was about my model which had a negative scale in blender. i select my model, hit crtl+a then choose scale. now everything's fine.