I can't get the aoMap showing in three.js using a glb/gltf asset

问题

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

回答1:

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.

来源：https://stackoverflow.com/questions/61163765/i-cant-get-the-aomap-showing-in-three-js-using-a-glb-gltf-asset

标签

three.js

gltf