【3D】 threejs 抽取模型中的动画并显示动画效果
发布于 1 个月前 作者 qjzd 244 次浏览 来自 码农

blender导出动画

以glb为例,blender导出glb是默认带有动画的

核心代码

从模型中抽取动画,以glb的动画为例

解析模型中的动画

	const dracoLoader = new DRACOLoader()
        dracoLoader.setDecoderPath('three/examples/js/libs/draco/gltf/')

        loader = new GLTFLoader()
        loader.setDRACOLoader(dracoLoader)

        loader.load(
          url,
          result => {
            const scene = result.scene
            editor.addAnimation(scene, result.animations) // result中存着动画信息
            editor.addObject(scene)
          },
          undefined,
          err => {
            console.log('err', err)
          }
        )
addAnimation: function(object, animations) {
    if (animations.length > 0) {
      this.animations[object.uuid] = animations
    }
  },

执行动画

		for (let [uuid, animations] of Object.entries(editor.animations)) {
            const obj = editor.objectByUuid(uuid)
            for (let animation of animations) {
              mixer.clipAction(animation, obj).play() // 执行动画
            }
          }

每一帧更新动画

	function animate() {
      if (mixer && mixer.stats.actions.inUse > 0) {
        mixer.update(clock.getDelta())
      }
    }

动画效果

5efee20d5efff_5efee20d6a6e3.gif

回到顶部