首页 > 其他分享> 文章详细

Three 之 Animation 初印象

2021-10-10 13:33:26 阅读：188 来源： 互联网

标签：canvas const Three mixer THREE 印象 obj new Animation

Animation 初印象

动画效果

animation1

播放动画需要基本元素

AnimationMixer

一个对象所有动作的管理者

用于场景中特定对象的动画的播放器。一个对象可能有多个动作，Mixer 是用来管理所有动作的，它可以调度出对象的某个动作进行操控，如 mixer = new THREE.AnimationMixer(obj); mixer 就能管理 obj 对象的所有动画了。拥有 mixer 后，在 animate 函数中进行更新操作，用于更新该对象目前的状态。 mixer 可以让这个对象同时播放多个动作，因此需要在每帧中执行 update 方法

AnimationClip

一个对象的一个动作

动画剪辑（AnimationClip）是一个可重用的关键帧轨道集，它代表动画。

AnimationAction

用来管理单个动作，让这个动作开始暂停等等

AnimationActions 用来调度存储在 AnimationClips 中的动画。说明: AnimationAction的大多数方法都可以链式调用

使用方法

加载一个对象，加载这个对象对应的 mixer 用于管理所有动作

mixer = new THREE.AnimationMixer(obj);

加载出一个 action，用于处理单个（clip）动画集，并进行播放

mixer.clipAction(obj.animations[0]).play();

上文提到过 action 是可以链式操作了，clipAction 方法返回一个 action 对象

在每一帧中更新对象的状态

mixer.update(delta);

实际代码

export function AnimationCommin() {
  const content = useRef();

  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xbfe3dd);
  const pointLight = new THREE.PointLight(0xffffff, 0.6);
  pointLight.position.set(150, 150, 150);
  scene.add(pointLight);
  scene.add(new THREE.AmbientLight(0xffffff, 2));
  const clock = new THREE.Clock();

  let mixer;

  useEffect(() => {
    const canvas = content.current;
    const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(canvas.clientWidth, canvas.clientHeight);

    const stats = new Stats();
    canvas.appendChild(stats.dom);

    const camera = new THREE.PerspectiveCamera(
      40,
      canvas.clientWidth / canvas.clientHeight,
      1,
      1000
    );
    camera.position.set(200, 200, 200);

    const controls = new OrbitControls(camera, canvas);
    controls.update();

    const loader = new FBXLoader();
    loader.load("/RumbaDancing.fbx", (obj) => {
      scene.add(obj);

      mixer = new THREE.AnimationMixer(obj);
      mixer.clipAction(obj.animations[0]).play();
    });

    animate();

    function animate() {
      requestAnimationFrame(animate);

      const delta = clock.getDelta();

      if (mixer) mixer.update(delta);

      controls.update();

      stats.update();

      renderer.render(scene, camera);
    }
  });
  return <canvas ref={content} />;
}

标签：canvas,const,Three,mixer,THREE,印象,obj,new,Animation
来源： https://www.cnblogs.com/xiaxiangx/p/15389260.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9