2
$\begingroup$

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

Problem

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

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);
  action1.play();
});

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

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

$\endgroup$
5
  • $\begingroup$ Thanks a lot @Don it works. But Is it possible to interact with gltf model? $\endgroup$ Oct 9 '18 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$ Oct 9 '18 at 14:27
  • $\begingroup$ Thanks @Don. Your GUI of this( gltf-viewer.donmccurdy.com) page is awesome. $\endgroup$ Oct 11 '18 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$ Oct 11 '18 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$ Oct 11 '18 at 15:23

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.