I'd like to export a simple model with a boneless animation.

I want to know in which format to export because I'm unable to export this kind of animation in .json.

I'd also appreciate some guidance about the code needed to use such animations in Three.js


  • $\begingroup$ Did you try to export as FBX? $\endgroup$
    – Ryo
    Commented Sep 25, 2018 at 3:45
  • $\begingroup$ will FBX work in Three.js? $\endgroup$ Commented Sep 25, 2018 at 4:44
  • $\begingroup$ hi Ryo I tried with FBX still animation is not loading $\endgroup$ Commented Sep 25, 2018 at 6:13

1 Answer 1


See threejs docs: https://threejs.org/docs/#manual/en/introduction/Loading-3D-models. I'd recommend trying the Blender glTF exporter suggested there, glTF-Blender-Exporter. It does support keyframed animation.

Once you've exported something, usage is:

var loader = new THREE.GLTFLoader();
loader.load('my-model.glb', function (gltf) {
  var model = gltf.scene;
  var mixer = new THREE.AnimationMixer(model);
  var clip1 = gltf.animations[0];
  var action1 = mixer.clipAction(clip1);

// ... in render loop
var dt = clock.getDelta()

You can also test your model in three.js without writing code, with http://gltf-viewer.donmccurdy.com/.

  • $\begingroup$ Thanks a lot @Don it works. But Is it possible to interact with gltf model? $\endgroup$ Commented Oct 9, 2018 at 6:25
  • $\begingroup$ Once you've loaded the model it's just a collection of threejs objects regardless of the format used to import it. The main docs then apply: threejs.org/docs/#api/en/core/Object3D. If you can't figure out how to do a particular type of interaction I'd suggest Stack Overflow on discourse.threejs.org. $\endgroup$ Commented Oct 9, 2018 at 14:27
  • $\begingroup$ Thanks @Don. Your GUI of this( gltf-viewer.donmccurdy.com) page is awesome. $\endgroup$ Commented Oct 11, 2018 at 3:38
  • $\begingroup$ I can only create a GUI for complete animation model to stop and play, but unable to play animation of each part as you did in gltf-viewer.donmccurdy.com. so can you show me how to do that? $\endgroup$ Commented Oct 11, 2018 at 8:32
  • $\begingroup$ Try the answer posted here and if that doesn't help, you can post in the threejs forum or Stack Overflow for threejs questions. :) $\endgroup$ Commented Oct 11, 2018 at 15:23

You must log in to answer this question.

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