【three.js学习笔记】03 物体的运动

在上一章中，我们已经完成场景，物体的创建并且添加光影，在这一章中我们尝试让物体运动起来
众所周知动画是一帧帧的静态图像构成的，因此在浏览器中的3d绘制也是类似的，每一帧中物体位置、大小等情况发生变化，并且串联在一起就变成了动画。
现代浏览器中提供了高效的重新渲染场景的解决方案，就是requestAnimationFrame()这个方法，用这个方法可以定义所有的绘制操作，浏览器会进行高效平滑地绘制。
在原来的代码基础上再新加一个函数（直接放在init函数中就行）：

function animate(){
    requestAnimationFrame(animate);
    renderer.render(scene,camera);
}
//注释调之前的renderer.render();并且用animate()来进行渲染更新

animate();

这相当于是一个递归函数，每次重绘完成会重新调用一次重绘函数，并且渲染器也会更新场景中物体的变化
当然到目前为止，还是没有动-。-

辅助库 帧数统计

three.js作者开发的帧数统计库可以检测动画运行时的帧数，用于测试动画是否如丝般顺滑，帧数太低的话可能就需要更新你的显卡或者更改你的代码了，
引入帧数统计
远程调用 https://threejs.org/examples/js/libs/stats.min.js
在html中增加：

<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>

创建帧数统计对象：

    //帧数统计
    var stats = new Stats();
    document.body.appendChild(stats.dom);//简单的直接添加的方法
    ……
    function animate(){
        requestAnimationFrame(animate);
        renderer.render(scene,camera);
        stats.update();//更新animate函数 ，添加统计更新
    }

再运行一下，除了之前看到的之，可以看到左上角多了个统计信息的东西：

在默认的时候会看到fps信息，越高越好，点击一下会出现每一帧绘制所用的时间（绿色），再点击一下可以看到浏览器占用的内存（紫品色）。

添加动画

但是到目前为止 还是没有动画。，。马上开始添加

自身旋转

function rotate(obj,xspeed,yspeed,zspeed){//物体，x方向速度，y方向速度，z方向速度
    obj.rotation.x += xspeed;
    obj.rotation.y += yspeed;
    obj.rotation.z += zspeed;
}

之后再在animate函数中添加让立方体旋转的函数

    ……
    function animate(){
        requestAnimationFrame(animate);
        rotate(cube,0.02,0.01,0.01);
        renderer.render(scene,camera);
        stats.update();
    }
    ……

运行一下，这个时候立方体以奇怪的方式旋转起来了嗯。。鉴于是动态的，稍后放一个完成版的可以看的链接好了。，。

绕轨道转动

除了自身旋转之外，还有一种绕轴转动的动画，这是改变位置的动画代表，改变的是物体的位置

var speed = 0;//在全域内作用的一个数字，代表的其实是在一个三角函数线上的x值 
function goesRound(obj,speed){
    step += speed;
    obj.position.x = 20 + ( 10 * (Math.cos(step)));
    obj.position.z = 0 +( 10 * (Math.))
}
……
function animate(){
    requestAnimationFrame(animate);
    rotate(cube,0.02,0.01,0.01);
    goesRound(sphere,0.02);//让球体绕轴旋转
    renderer.render(scene,camera);
    stats.update();
}

再运行一下，我们就能发现球体的确是绕轴旋转了，就像是地球绕着太阳那样-。-（这个说法没错啊）

类活塞运动

emm我有点想歪了但是这个动画是有点像是活塞的运动方式
方法：

var step2 = 0;
function upAndDown(obj,speed){
    step2 += speed;
    obj.position.y = 10 + ( 5 * (Math.cos(step2)));
}
……
function animate(){
    requestAnimationFrame(animate);
    rotate(cube,0.02,0.01,0.01);
    goesRound(sphere,0.02);
    upAndDown(cylinder,0.04);//将柱体添加进这个运动
    renderer.render(scene,camera);
    stats.update();
}

再次运行，我们发现这个五棱柱开始上上下下地运动了emm↑↓大概是这样的哈哈

球状观察组件

我想要从不同地角度看我的这个场景？这个时候就应该加入这个组件了
它能够让相机按照球体轨道旋转，或者平移
远程：https://threejs.org/examples/js/controls/TrackballControls.js
使用方式 在html中调用之后，在init函数中添加：

var controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.minDistance = 20.0;//最近距离
controls.maxDistance = 400.0;//最远距离
controls.dymnamicDampingFactor = 0.1;//这个我暂时找不到是干嘛用的-，-

并且加入到animate函数中更新

function animate(){
    requestAnimationFrame(animate);
    rotate(cube,0.02,0.01,0.01);
    goesRound(sphere,0.02);
    upAndDown(cylinder,0.04);
    renderer.render(scene,camera);
    controls.update();//更新摄像机球形轨道控制器
    stats.update();
}

pc
鼠标左键按住拖动 旋转，
右键按住拖动平移
滚轮改变相机与场景的距离（放大缩小）

手机
滑动 旋转
双指同时滑动 平移
双指拉进拉远 放大缩小

这样就可以从不同的角度看完成的东西啦 _(:зゝ∠)_
完成之后的效果：

完成效果链接：
three.js简单动画