How to animate blender camera in three.js

Questions
, , ,
1

Hello,

I have animated my camera in blender and I can see my camera animating in GLTF Viewer. Now I want to have that animation using three.js on my website. I have loaded the blender camera as my main camera but I don’t know how to trigger blender animation on that…

Blender Animation (is working)

image
image1614×929 108 KB

GLTF Viewer (is working)

image
image1920×938 23.8 KB

Please help me with this.
Thank you.

2

here’s an example with code: https://twitter.com/0xca0a/status/1387854084879921154 in the post underneath you see the camera movement in blender.

blender exports the camera as a group. just dump your camera in there, give it the right setting and start the animation. that tool im using for the demo, gltfjsx, above extracts that automatically. you’ll have to do that by hand, i guess searching for that group by name and then adding your camera.

3

Thank you for the reply.

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.

4

I tried your solution but there is something lacking, can you drop the whole js source please !!