Animation 初印象

动画效果

播放动画需要基本元素

AnimationMixer

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

用于场景中特定对象的动画的播放器。一个对象可能有多个动作，Mixer 是用来管理所有动作的，它可以调度出对象的某个动作进行操控，如

mixer = new THREE.AnimationMixer(obj);

mixer 就能管理 obj 对象的所有动画了。拥有 mixer 后，在 animate 函数中进行更新操作，用于更新该对象目前的状态。 mixer 可以让这个对象同时播放多个动作，因此需要在每帧中执行 update 方法

AnimationClip

一个对象的一个动作

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

AnimationAction

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

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

使用方法

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

mixer = new THREE.AnimationMixer(obj);

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

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

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

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

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} />;
}