Update shadow for vertex in buffergeometry

Hi all,

I have a model .gltf loaded in ThreeJS with a keyframe animation that change the shape of the object ( it’s a vertex animation ). It’s working fine, but the shadow doesn’t change!

This is a jsfiddle I made with an example of the shadow quality I want to achieve on vertex change https://jsfiddle.net/fw5y309n/1/ . This is what happen https://jsfiddle.net/f8qo1Lnc/ removing geometry.computeVertexNormals();

Now in local I have another model that I can’t upload online: I played around with geometry.computeVertexNormals() on the update function, but when I apply that, my model turns total black.

Can someone help me with this one? The only difference I see between the fiddle and my model is the geometry: the working one is a SphereGeometry, while my model has a BufferGeometry.

Thanks, Simone

I’ve rewritten the code so you are using SphereBufferGeometry. This is more performant since three.js has to internally convert the (legacy) Geometry format to BufferGeometry.


In any event, you are not using shadow maps in your scene so it is a bit irritating to talk about shadows (from a pure technical point of view^^). You just have lit and unlit surfaces areas on your mesh.

When perform vertex displacement, you also have to recompute normals so they correctly represents the new surface. Sometimes the automatic recomputation via computeVertexNormals() does not produce the intended result when e.g. indices are missing.

Can you please share the glTF model and your code that shows how you recompute vertex normals?

BTW: MeshLambertMaterial does not support flat shading.

Hi @Mugen87, thanks for the reply!

Sorry, you’re absolutely right, those are not shadows, but I didn’t know how to define them :sweat_smile:
and also the fiddle it’s been copied, I just wanted to get the idea by adding some lights.

Anyway here you can find my model and as I said the vertex recomputing it’s just a keyframe animation I did in Cinema4D, I play it as follow

const animation = new THREE.AnimationMixer(env.scene);
const action = animation.clipAction(env.animations[0]);

Hi @Mugen87, have you noticed something with my model?


No, not really. I’ve imported it in the editor, added an ambient and directional light. When playing the animation (which is based on morph targets), the shading looks correct.

Hi @Mugen87, thanks for sharing the editor link: I tried as well and I noticed that the shading looks better using flatshading=true for the material, here a screenshot ( I removed the melaRotten object layer ).

I just have to figure out why it’s not so defined ( maybe it’s a model issue?), but I think I’m close to the solution!