CODEWITHSUNDEEP
three.js
Eärendil Baggins
Eärendil Baggins

Reputation: 572

Ambient occlusion not showing in three.js

I'm using the MeshStandardMaterial in three.js and when I create and apply the material, all maps work fine except for the aoMap, which has no effect on the model. I suspect this is because I don't have a 2nd set of UVs (my UV unwrapping is done through Blender and I don't manually apply any UV at all in three.js), as the documentation says:

The red channel of this texture is used as the ambient occlusion map. Default is null. The aoMap requires a second set of UVs, and consequently will ignore the repeat and offset Texture properties.

I've tried using the below code to solve this: 

var geometry = mesh.geometry;
geometry.addAttribute( 'uv2', new THREE.BufferAttribute( geometry.attributes.uv.array, 2 ) );

but had no luck. How do I copy my UV map to the uv2 property, or wherever it is needed to make ambient occlusion work?

Upvotes: 3

Views: 3083

Answers (2)

WestLangley
WestLangley

Reputation: 104833

An aoMap is an ambient occlusion map, and like its name says, it occludes ambient light. That is all it occludes.

There are currently three sources of ambient (or indirect) light in three.js: AmbientLight, HemiSphereLight, and LightMap.

So the aoMap occludes those three sources. It does not occlude direct light sources. Direct light sources include DirectionalLight, SpotLight, PointLight, and AreaLight.

three.js r.95

Upvotes: 7

M -
M -

Reputation: 28502

What kind of lighting are you using? I recreated your situation, and it works as expected. The things to look out for is that aoMap shows up with THREE.AmbientLight, but not with THREE.Spotlight. It also works if you use an envMap on your MeshStandardMaterial

enter image description here

Upvotes: 3

Related Questions