Three.js开发指南-阅读记录（第九章）

创建动画和移动摄像机

动画基础

1、简单动画

• 核心方法：requestAnimationFrame()

2、选择对象

function onDocumentMouseDown(event) {
    var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
    vector = vector.unproject(camera);

    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
    var intersects = raycaster.intersectObjects([sphere, cylinder, cube]);

    if (intersects.length > 0) {
        console.log(intersects[0]);
        intersects[0].object.material.transparent = true;
        intersects[0].object.material.opacity = 0.1;
    }
}
复制代码

3、使用 Tween.js 实现动画

• 使用案例：

 let PosSrc = {pos:1}
 let tween = new TWEEN.Tween(posSrc).to({pos: 0}, 5000);
 tween.easing(TWEEN.Easing.Sinusoidal.InOut);
 
 let tweenBack = new TWEEN.Tween(posSrc).to({pos: 1}, 5000);
 tweenBack.easing(TWEEN.Easing.Sinusoidal.InOut);
 
 
 tween.chain(tweenBack);
 tweenBack.chain(tween);
 
 
 let onUpdate = function(){
     let count = 0;
     let pos = this.pos;
     
     loadedGeometry.vertices.forEach(function(e){
         let newY = ((e.y + 3.22544) * pos) - 3.22544;
         particleCloud.geometry.vertices[count++].set(e.x,newY,e.z);
     });
     
     particleCloud.sortParticles = true;
 };
 
 tween.onUpdate(onUpdate);
 tweenBack.onUpdate(onUpdate);
 
 
 
 //补间动画需要在模型加载完成后启动
 let loader = new THREE.PLYLoader();
 loader.load('xxx.ply',function(){
     ...
     tween.start();
     ...
 });
 
 
 //补间动画启动后，需要告知tween.js什么时候刷新所需要的补间，为此调用 TWEEN.update() 方法
 function render(){
     TWEEN.update();
     webGLRenderer.render(scene, camera);
     requestAnimationFrame(render);
 };
 
复制代码

4、使用摄像机

• Tween.js提供的摄像机控制器

除了上面列出来的控制器，还可以使用position来移动摄像机，通过lookAt()方法来改变摄像机的朝向

4.1 轨迹球控制器

• 使用方式：

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

let trackballControls = new THREE.TranckballControls(camera);
trackballControls.rotateSpeed = 1.0;
trackballControls.zoomSpeed = 1.0;
trackballControls.panSpeed= 1.0;


let clock = new THREE.Clock();
function render(){
    let delta= clock.getDelta();
    trackballControls.update(delta);
    requestAnimationFram(render);
    webGLRenderer.render(scene,camera);
}
复制代码

4.2 飞行控制器

• 使用方式：

// 引入外部js文件
<script type="text/javascript" src="../libs/FlyControls.js"></script>


let flyControls = new THREE.FlyControls(camera);
flyControls.movementSpeed = 25;
flyControls.domElement = document.querySelector("#WebGL-output"); //<div id="WebGL-output"></div>
flyControls.rollSpeed = Math.PI/24;
flyControls.autoForward = true;
flyControls.drowToLook = false;

复制代码

• 翻滚控制器、第一视角控制器、轨道控制器等等使用方式都差不多，具体细节可以参考对象的 控制器js文件

。。。。。未完待续