How to add shadow on .glb/.gltf model?

Questions
, , , ,
1

Hey All,
super super newbie question…

I received a static .glb model that I have successfully loaded and lit,etc in my threejs project. However, how should I approach on how to give shadows on the model? (see picture below on where the shadow should be)

Screenshot 2020-03-31 at 15.43.22
Screenshot 2020-03-31 at 15.43.221934×894 201 KB

So, should I:

  1. Use SSAO or lightmap using three?
    or
  2. should the shadow be baked into the glb/gltf itself?

If it’s number 1, is there any example of implementing those using .glb?
Thanks.

2

If you have control over how the 3D model is created, I would bake ambient occlusion into a respective texture. Notice that glTF does not support lightmaps.

I would only advice to use SSAO if you can’t use the above approach. There is an official example that demonstrates this technique. Notice that the quality of SSAOPass mainly depends on your scene’s scale. If you need a large camera frustum, you have to modify SSAOPass at the following place and use e.g. THREE.UnsignedIntType. It’s even better to use WebGL 2 and assign THREE.FloatType.

This will ensure a higher depth precision which will avoid flickering and artifacts when using SSAO. However, it will also make the pass more expensive to use.

2 Likes
4

Why do you include library code twice? I mean you import global scripts via the <script> tag and ES6 module via the ES6 import statement?

5

oops, I didn’t realise that… not sure why I did so :grin: thanks a lot for noticing.

However, I assume that does not change anything, though?

Thanks again, really appreciate it!!