glTF support camera animations?

I have added camera animations in blender and the animation works perfect when run in blender. When I export the animation through glTF exporter, camera animation is exported but not animating.

While exporting I have checked ‘export camera’ option too.

Please help @donmccurdy

(Forgive me for not sharing the model here as I do not have permissions for that !!)

1 Like

Have you tried viewing the glTF model in https://gltf-viewer.donmccurdy.com/, and could you confirm the following?

  1. The UI in the upper right shows a “Cameras” dropdown with your camera.
  2. The UI in the upper right shows an “Animations” list with at least 1 animation.
1 Like

Yes https://gltf-viewer.donmccurdy.com/ I am using this more often to check the models.

I do see ‘Animations’ option on upper right corner but not ‘Cameras’

Hm ok. If you’re checking “export camera” but not seeing cameras in that list, it sounds like something is going wrong during export and it’s not a three.js issue. If you can’t share your model, are you able to make a simpler example .blend with no private data that reproduces the problem?

2 Likes

Sure I will try to to make a simple model and give it a try.

I have attached a sample model where I have added a very basic camera animation.
Animation looks fine in blender but when I export it as glTF binary I don’t see any camera movement in https://gltf-viewer.donmccurdy.com/ . I do see ‘Cameras’ in upper right corner.

I guess I might be doing something wrong in belnder. Please have a look and let me know the issue.

cam-anim-1.blend (458.8 KB)
cam-anim-1.glb (2.4 KB)

@donmccurdy Did you get a chance to look at above sample models? If you need a detailed sample model than I can ask my design team to provide a better one.

My requirement is, the way camera animation is happening in blender same should happen when exported as .glb file.

It looks like you’ll need to bake keyframes from the NURBs curve before exporting, see https://blender.stackexchange.com/questions/23713/bake-path-animation. Object -> Animation -> Bake Action.

4 Likes

@donmccurdy sorry for delayed response, yes baking of keyframes worked for me. Thanks!

Excuse me, have you solved this problem?
If so, could you please share the successful model file ? I want to study, thank you very much.

Is anyone has published any example using glTF camera animation with Three.js?

What do you mean by “glTF camera animation”? Do you need for the camera to be embedded in the file? Or you want to control the camera using three.js, and view a glTF model? You may want to start a new thread and describe your question in more detail.

1 Like

Hi Don, I have a .glb model with a baked camera animation from Cinema4D. I’m able to verify that the .glb file shows a “BakedCamera” in your .gltf viewer (it’s amazing!) and the camera animates perfectly.

I’m trying to take the baked camera animation and link it to a user’s scroll position on the browser (using Greensock). But first, I’d like the default three.js camera to switch to the embedded camera in .glb, how would I go about doing it? Thank you so much!

The default camera is whatever you pass into the render( scene, camera ) function. If you find a reference to the camera (get object by name, by traverse, etc.) you can use it there.

let camera;

gltf.scene.traverse((object) => {
  if (object.isCamera) {
    camera = object;
  }
});
2 Likes

Awesome!! Thank you so much Don. I’m able to get the page scroll to link to the camera animation correctly!!

1 Like