Threejs开发笔记之九移动相机和动画

动画

重复渲染

function render(){
    requestAnimationFrame(render)
}

通过鼠标选择对象

var projector = new THREE.Projector();//Projector
var tube;

function onDocumentMouseDown(event) {

event.clientY

vector = vector.unproject(camera);

var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());//Raycaster

var intersects = raycaster.intersectObjects([sphere, cylinder, cube]);

}

补间动画

变形动画
（每个顶点前后变化的效果）

骨骼动画
（把顶点绑定在骨头上，骨头变化就会带动顶点变化）

MorphAnimMesh变形动画实战

//加载模型，并根据模型创建MorphAnimMesh动画
 var loader = new THREE.JSONLoader();
        loader.load('../assets/models/horse.js', function (geometry, mat) {

            var mat = new THREE.MeshLambertMaterial(
                    {
                        morphTargets: true,
                        vertexColors: THREE.FaceColors
                    });


            var mat2 = new THREE.MeshLambertMaterial(
                    {color: 0xffffff, vertexColors: THREE.FaceColors});

            mesh = new THREE.Mesh(geometry, mat);
            mesh.position.x = -100;
            frames.push(mesh);
            currentMesh = mesh;
            morphColorsToFaceColors(geometry);

            mesh.geometry.morphTargets.forEach(function (e) {
                var geom = new THREE.Geometry();
                geom.vertices = e.vertices;
                geom.faces = geometry.faces;


                var morpMesh = new THREE.Mesh(geom, mat2);
                frames.push(morpMesh);
                morpMesh.position.x = -100;

            });

            geometry.computeVertexNormals();
            geometry.computeFaceNormals();
            geometry.computeMorphNormals();

            meshAnim = new THREE.MorphAnimMesh(geometry, mat);
            meshAnim.duration = 1000;
            meshAnim.position.x = 200;
            meshAnim.position.z = 0;

            scene.add(meshAnim);

            showFrame(0);

        }, '../assets/models');

骨骼与蒙皮动画
外部创建并导入动画

移动相机

three中提供了几个相机控件来控制场景中的相机
另外相机还有常用的函数

camera.position //位置
camera.lookAt//看向

轨迹球控件

<script type="text/javascript" src="../libs/TrackballControls.js"></script>//引入

//创建控件并绑定在相机上
var trackballControls = new THREE.TrackballControls(camera);

trackballControls.rotateSpeed = 1.0;
trackballControls.zoomSpeed = 1.0;
trackballControls.panSpeed = 1.0;
trackballControls.noZoom=false;
trackballControls.noPan=false;
trackballControls.staticMoving = true;


 var clock = new THREE.Clock();

 function render() {
            stats.update();
            var delta = clock.getDelta();

            trackballControls.update(delta);//需要传入上次update函数调用以来经过的时间
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera)
        }

飞行控件

<script type="text/javascript" src="../libs/FlyControls.js"></script>

 var flyControls = new THREE.FlyControls(camera);

flyControls.movementSpeed = 25;
flyControls.domElement = document.querySelector("#WebGL-output");
flyControls.rollSpeed = Math.PI / 24;
flyControls.autoForward = true;
flyControls.dragToLook = false;

function render() {
            stats.update();
            var delta = clock.getDelta();

            flyControls.update(delta);
            webGLRenderer.clear();
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera)
        }

翻滚控件

第一人称控件

轨道控件

路径控件

让相机沿一定方向移动

变形和蒙皮

加载外部动画