ThreeJS-3D教学六-物体位移旋转
之前文章其实也有涉及到这方面的内容，比如在ThreeJS-3D教学三：平移缩放+物体沿轨迹运动这篇中，通过获取轨迹点物体动起来，其它几篇文章也有旋转的效果，本篇我们来详细看下，另外加了tween.js知识点，tween可以很好的协助 three 做动画，与之相似的还有 gsap.js方法类似。
1、物体位移两种方式
mesh.position.set(x, y, z);
mesh.position.x = 10;
mesh.position.y = 10;
mesh.position.z = 10;
2、物体旋转两种方式
// 绕局部空间的轴旋转这个物体
mesh.rotateX = 0.1; // 以弧度为单位旋转的角度
mesh.rotateY = 0.1;
mesh.rotateZ = 0.1;
// 物体的局部旋转，以弧度来表示
mesh.rotation.x = MathUtils.degToRad(90)
// 在局部空间中绕着该物体的轴来旋转一个物体
mesh.rotateOnAxis(new Vector3(1,0,0), 3.14);
注意，这里设置的数值是弧度，需要和角度区分开
角度 转 弧度 THREE.MathUtils.degToRad(deg)
弧度 转 角度 THREE.MathUtils.radToDeg (rad)
弧度 = 角度 / 180 * Math.PI
角度 = 弧度 * 180 / Math.PI
π（弧度） = 180°（角度）
3、tween.js
Tween.js 是一个 过渡计算工具包 ，理论上来说只是一个工具包，可以用到各种需要有过渡效果的场景，一般情况下，需要通过环境里面提供的辅助时间工具来实现。比如在网页上就是使用 window 下的 requestAnimationFrame 方法，低端浏览器只能使用 setInterval 方法来配合了。
1）简单使用
例如：把一个元素的 x 坐标在 1秒内由100 增加到 200， 通过以下代码可以实现：
// 1. 定义元素
const position = { x: 100, y: 0 };
// 2. new 一个 Tween对象，构造参数传入需要变化的元素
const tween = new TWEEN.Tween(position);
// 3. 设置目标
tween.to({ x: 200 }, 1000);
// 4. 启动，通常情况下，2，3，4步一般习惯性写在一起，定义命名也省了
// 例如 new TWEEN.Tween(position).to({ x: 200 }, 1000).start();
tween.start();
// 5. （可选：）如果在变化过程中想自定义事件，则可以通过以下事件按需使用
tween1.onStart(() => {
console.log('onStart');
});
tween1.onStop(() => {
console.log('onStop');
});
tween1.onComplete(() => {
console.log('onComplete');
});
tween.onUpdate(function(pos) {
console.log(pos.x);
});
// 6. 设置 requestAnimationFrame，在方法里面调用全局的 `TWEEN.update()`
// 在这个方法里面也可以加入其它的代码：d3, threejs 里面经常会用到。
// 比如THREEJS里面用到的变化，如 `renderer.render(scene, camera);` 等
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
}
// 6. 启动全局的 animate
animate();
2、连续型变化
一般情况下，设置起点和终点时两个数时，认为是连续型的，里面有无数的可能变化到的值（算上小数）。
连续型变化使用 easing 做为时间变化函数，默认使用的是 Liner 纯性过渡函数，easing过渡 的种类很多，每种还区分 IN, OUT, INOUT 算法。引用时 使用 TWEEN.Easing前缀，例如 ：
tween.easing(TWEEN.Easing.Quadratic.Out)
目前内置的过渡函数下图：
3、主动控制
start([time]) ， stop()
开始，结束，start 方法还接受一个时间参数，如果传了的话，就直接从传入的时间开始
update([time])
更新，会触发更新事件，如果有监听，则可以执行监听相关代码。
更新方法接受一个时间参数，如果传了的话，就更新到指定的时间
chain(tweenObject,[tweenObject])
如果是多个 Tween 对像 如果 tweenA 需要等到 tweenB 结束后，才能 start, 那么可以使用
tweenA.chain(tweenB);
//另外，chain方法也可以接收多个参数，如果 A对象 需要等待多个对像时，依次传入
tweenA.chain(tweenB, tweenC, tweenD);
repeat(number)
循环的次数，默认是 1 所以不定义的话，只过渡一次就没了，可以使用上面刚说的无限循环的方法，便只是一个对象无限循环时，就使用 ：
tween.repeat(Infinity); //无限循环
tween.repeat(5); //循环5次
delay(time)
delay 是指延时多久才开始。比如以下代码：
tween.delay(1000);
tween.start();
虽然已经调用 start 了，但过渡动作要等 1秒 后才开始执行！
大致讲这些算是给大家一个初步的认知，感兴趣的可以自行查询文档，下面回到咱们本次的案例中，先看效果图：
代码如下：
Title
这里有几个小知识点：
1、改变物体旋转的中心点，我们通过将物体放入new THREE.Group 组中，通过位移实现；
2、我们通过new THREE.Box3().setFromObject(mesh2)可以获取物体的最大最小 区间；
3、tween.yoyo(true) 方法在一些旧的版本中会报错，新的版本已经修复，请大家使用最新版本
4、最重要的一点 不要忘记加 TWEEN.update()