How to add material to gltf object and keep Ambient Occlusion Map

Questions
, , ,
1

Hi :slight_smile:
Im working on a hobby project in which id like to share my 3d car designs. id like to allow people to change the color of the cars just like in this example, but id like to also include ambient occlusion to my models for better effects. In other words, im exporting the models from blender as embedded gltfs (single file) without any materials and only an ambient occlusion map. If i load the gltf models without applying any materials, the ambient occlusion is visible and works perfectly, but when i apply a MeshPhysicalMaterial to the object, the ambient occlusion disappears.
Is there anyway that the MeshPhysicalMaterial is added to the object while keeping the ambient occlusion visible?
I appreciate any help, thank you!

2

You can store the ao map for re-use…

let aoMap

loader.load(model, (gltf) => {

  gltf.scene.traverse(c=>{
    if(c.material && c.material.aoMap){
      aoMap = c.material.aoMap
   } 
 })
})

The aoMap can then be applied to the AO channel of your material at any point using the aoMap reference

3 Likes
3

That worked :slight_smile: thanks for the help @Lawrence3DPK !

1 Like
4

I noticed that this method does not work if im using transparent materials. To clarify, one of the parts im importing into three js is a flat plane under the car which has the floor shadows baked onto it. Id like to make this plane invisible but keep the shadow part visible and im curious if there is anything i can do in three js to achieve this. I have tried to modify the baking settings in blender but i still didnt manage to get the results im looking for ( ao map where only the shadows are visible and everything else is transparent). So I thought id check with you if you have any suggestions on how i can achieve this in threejs. I appreciate any help :slight_smile:

5

You should be able to use the aoMap (inverted) on the alphaMap channel of the material. Afaia alpha values are from 0(black) to 1(white) so I’m thinking you’d need to invert your aoMap to achieve this, if your inverted aoMap is transparent (where now black) you can use the alphaTest property of the material and set the material color to black, or use shadowMaterial

1 Like