GLTF not casting/receiving shadows

Hello everyone, first post here.

I am having trouble having my gltf imports cast/receive shadows. Not sure what I’m doing wrong - all models (including animated ones) load properly, and I’ve made sure to set .castShadow and .recieveShadow = true on all imported meshes, I have also set directionalLight.castShadow = true, and adjusted the far/near camera planes to make sure they are in range. I have my code posted at the following link (using just a couple of simple models in order to replicate the problem more clearly):

Any help would be greatly appreciated!

-Mezz

Replied in slack but copying here - if you brighten this up (glTF models will look correct with renderer.gammaOutput = true and renderer.gammaFactor = 2.2) i think I’m seeing shadows now:

07%20PM

See textures section here - https://threejs.org/docs/#examples/loaders/GLTFLoader

@donmccurdy so there is definitely a single, deformed shadow being casted there, and upon some testing I’ve figured out that a couple of the objects’ sides are casting, but no other sides are. It’s basically like 2 or 3 sides of the objects casting, one of them being the downed obelisk. I’m not sure what could be causing this issue. I checked the meshes themselves in blender, and the normals are all pointing in the correct direction… it’s the only thing I could think of so far.

I also posted this response in the chatroom.

EDIT: Also just to note, I’m loading no textures into this scene, only materials.

SOLUTION UPDATE:

After going through the docs and getting some suggestions from @donmccurdy, I wanted to post my solution as I am sure it will help someone down the line!

When you create a directional light:

const dirLight = new THREE.DirectionalLight( color, intensity );

the directional light contains an orthographic camera. This camera is what is used to calculate the range for casting shadows, so long as:

dirLight.castShadow = true;

The issue I had is that the actual view frustrum of that automatically created orthographic camera was way too small - by default, it’s frustrum was set to 5 on all sides. The solution: attach a new camera to your directional light, with whatever custom frustum parameters you need for shadow coverage:

dirLight.shadow.camera = new THREE.OrthographicCamera( left, right, top bottom, nearClip, farClip);

Here are the before (with the automatically created camera) and after (with the custom camera) shots, that include a camera helper to get a visual of the situation:

before
after

Hopefully this helps someone down the line!

3 Likes