1
$\begingroup$

I want to use blender camera in three.js with its own animation that I did in blender. After exporting my model in GLTF, I couldn't see any animation in browser console. I tried to bake the animation and then exported in GLTF, it didn't work either.

enter image description here

The animation is working perfect in blender. Can someone help/guide me how I can export camera animation and use it in three.js?

Thank you.

Update:


I have my animation running in gltf viewer. How do I run this animation in three.js? enter image description here

$\endgroup$
2
  • $\begingroup$ I figured out the issue. I've listed here what I did to make it work: discourse.threejs.org/t/… $\endgroup$
    – Whackter
    Aug 20 at 16:06
  • $\begingroup$ Hi Whackter, you can gain additional rep on this site by posting the linked code as an answer here. You may then accept your own answer. If you do, I'll upvote it for you. If you don't after some time, I'll post the linked answer for you. $\endgroup$ Sep 6 at 5:01
1
$\begingroup$

I managed to find the solution… Listing down for the people like me This is what I did:

In GLTF Loader function:

let model = null
let camera = null
let mixer = null
gltfLoader.load(
    'FILE_PATH',
    (gltf) => {
        //Basic Code...
        model = gltf.scene
        camera = gltf.cameras[0]

        //Animation Code
        clip = THREE.AnimationClip.findByName( gltf.animations, 'Camera01' )  //get the animation name by console.log(gltf.animations)

        mixer = new THREE.AnimationMixer(camera)
        const action = mixer.clipAction(clip)

        action.play()
        }
}

In tick function:

const clock = new THREE.Clock()
let previousTime = 0
//Animations
const tick = () =>{
    const elapsedTime = clock.getElapsedTime()
    const deltaTime = elapsedTime - previousTime

    if(mixer !== null){
        mixer.update(deltaTime)
    }

    //Don't forget to render with the blender camera
    if(model !== null){
        renderer.render(scene, camera)
        camera.updateProjectionMatrix()
    }
}

Good Luck.

$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.