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, 2021 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, 2021 at 5:01

1 Answer 1

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$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .