three.js-外部载入模型动画实现

  • 时间:
  • 浏览:
  • 来源:互联网

载入模型动画实现
模型本身自带动画(三维软件制作),如何在模型导入到网页后使动画生效

声明mixers数组用于保存动画
声明clock

data() {
  return {
    mixers:[],
    clock:new THREE.Clock(),
  }
},
Methods: {
  init(){
    let loader = new FBXLoader();
    loader.load('resources/demo-models/model/view2.fbx', fbx => {
	  that.scene.add(fbx);
	  let mixer = new THREE.AnimationMixer(fbx.children[3]);
      mixer.clipAction(fbx.animations[0]).setDuration(1).play();
      that.mixers.push(mixer);
    })
  },
  animate(){
    this.renderer.render(this.scene, this.camera);
    this.pageAnimation = requestAnimationFrame(this.animate);
    let delta = this.clock.getDelta();
    for(let i=0;i<this.mixers.length;i++){
      this.mixers[i].update(delta);
    }
  }
}

上面fbx.animations[0]找的是载入的fbx模型上的动画
fbx.children[3]找的是fbx是带动画的模型元素,这里简写成fbx.children[3]。

本文链接http://www.dzjqx.cn/news/show-617155.html