I’ve been trying to understand this issue for some days now.
I’m exporting a gltf of an animated plane from Cinema4D, when I import the file into glTF viewer from donmccurdy it looks great and exactly how I want it to look. I also imported it into BabylonJs Sandbox and it worked perfectly.
When I load it in my project, the animation plays without a problem but the Normals are set in one state of the mesh and they don’t change. To illustrate what I mean:
This is the initial state of the mesh, which is a flat surface. As you can see from the
VertexNormalsHelper and from the normal material that there’s something wrong.
I have to mention that the normals correspond to the frame the mesh was exported at from C4D
my code is this:
const loader = new GLTFLoader();
loader.load(
model,
(gltf) => {
model = gltf.scene
const animationClip = gltf.animations[0]
mixer.value = new THREE.AnimationMixer(model)
console.log(mixer.value)
action.value = mixer.value.clipAction(animationClip)
action.value.time = 0
model.traverse((o) => {
if(o.isMesh) {
mesh.value = o
o.morphTargetInfluences[4] = 1
o.geometry.computeVertexNormals();
console.log(o.isSkinnedMesh)
const helper = new VertexNormalsHelper( o, 1, 0xff0000 );
scene.add(helper)
o.material = material
o.material.morphTargets = true;
}
})
action.value.play()
scene.add(model)
},
(xhr) => {
console.log(`${(xhr.loaded / xhr.total) * 100}% loaded`)
},
(error) => {
console.error('Error loading glTF model:', error)
},
)
The animation function is this
const clock = new THREE.Clock()
let prevTime = performance.now();
const tick = () => {
const currentTime = performance.now();
const delta = (currentTime - prevTime) / 1000; // Convert to seconds
prevTime = currentTime;
if (mixer.value) {
mixer.value.update(delta)
}
controls.update()
renderer.render(scene, camera)
window.requestAnimationFrame(tick)
}
I feel that the issue can be solved with one line but I’m not so well-versed in ThreeJs. I tried many different things suggested online but nothing worked in my case.
I should also mention that the .value in my code is related to vueJs. In case you’re wondering.
any help explaining what’s happening would be much appreciated, thanks!