31three.js AnimationMixer变形动画

图片.png

1. AnimationMixer 动画混合器

AnimationMixer是场景中特定对象的动画播放器。当场景中的多个对象独立动画时，可以为每个对象使用一个AnimationMixer。

AnimationMixer( rootObject : Object3D )

var mixer = new THREE.AnimationMixer(mesh);

方法：clipAction

action = mixer.clipAction( mesh.geometry.animations[ 0 ] );

mixer .clipAction (clip : AnimationClip, optionalRoot : Object3D) : AnimationAction
Returns an AnimationAction for the passed clip, optionally using a root object different from the mixer's default root. The first parameter can be either an AnimationClip object or the name of an AnimationClip.

If an action fitting these parameters doesn't yet exist, it will be created by this method.

Note: Calling this method several times with the same parameters returns always the same clip instance.

参考：https://threejs.org/docs/index.html#api/animation/AnimationMixer

2 . AnimationClip

AnimationClip(动画剪辑)是一组可重用的表示动画的关键帧轨迹。

3. 使用AnimationMixer实现变形动画

hrose.gif

代码如下，加载了一个马的变形动画。

var camera;
var scene;
var renderer;
var mesh,mixer,action;
var width = window.innerWidth;
var height = window.innerHeight;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
camera.position.set(-60, 40, 0);
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0x222222);
renderer.shadowMap.enabled = true;

var plane = new THREE.Mesh( new THREE.PlaneBufferGeometry( 400, 400 ), new THREE.MeshPhongMaterial( { color: 0xCCCCCC, depthWrite: false } ) );
plane.rotation.x = - Math.PI / 2;
plane.receiveShadow = true;
scene.add( plane );

var grid = new THREE.GridHelper( 400,100, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add( grid );

var amblight = new THREE.AmbientLight(0x666666);
scene.add(amblight);
var spotlight = new THREE.SpotLight(0x888888);
spotlight.position.set(0, 50, 0);
spotlight.castShadow = true;
spotlight.shadowMapWidth = 1024;
spotlight.shadowMapHeight = 1024;
scene.add(spotlight);
var axes = new THREE.AxesHelper(1);
scene.add(axes);

var loader = new THREE.JSONLoader();
loader.load("models/horse.js", function (geometry) {
    mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
        vertexColors: THREE.FaceColors,
        morphTargets: true
    }));
    mesh.scale.set(0.05,0.05, 0.05);
    mesh.castShadow = true;
    scene.add(mesh);
    console.log(mesh);
    mixer = new THREE.AnimationMixer(mesh);
    action = mixer.clipAction( mesh.geometry.animations[ 0 ] );
    action.play();
});

document.getElementById('webgl-output').appendChild(renderer.domElement);
renderer.render(scene, camera);

var clock = new THREE.Clock();
function render() {

    requestAnimationFrame(render);
    renderer.render(scene, camera);

    var time = clock.getDelta();
    if (mixer) {
        mixer.update(time);
        mesh.position.z += 0.25;
        if(mesh.position.z >=100){
            mesh.position.z = -100
        }
    }
}

render();