1、TWEEN.js实现相机移动时的补间动画原理
补间(动画)是一个概念，允许你以平滑的方式更改对象的属性。你只需告诉它哪些属性要更改，当补间结束运行时它们应该具有哪些最终值，以及这需要多长时间，补间引擎将负责计算从起始点到结束点的值。
例如，position对象拥有x和y两个坐标:
var position = { x: 100, y: 0 }
如果你想将x坐标的值从100变成200，你应该这么做：
// 首先为位置创建一个补间(tween)
var tween = new TWEEN.Tween(position);
// 然后告诉 tween 我们想要在1000毫秒内以动画的形式移动 x 的位置
tween.to({ x: 200 }, 1000);
//激活启动补间动画
tween.start();
// 在主函数animate中调用TWEEN.update
TWEEN.update();
// 这样在更新每帧的时候都会运行补间动画；经过 1秒后 (1000 毫秒) position.x将会变成 200。
另外tween.js 可以链式调用！ 每个tween函数都会返回tween实例
var tween = new TWEEN.Tween(position);
tween.to({ x: 200 }, 1000);
tween.start();
可以改写成
var tween = new TWEEN.Tween(position)
.to({ x: 200 }, 1000)
.start();
2、在本个代码里使用TWEEN.js来进行补间的是相机的（初始位置，目标位置）,目标位置主要是修改Z轴的值，以此达到一种前进的效果，所以传入的参数之一是目标位置。
另外还需要传入一个补间动画结束后运行的函数init()来进入到另一个盒子,此为另一个参数。
具体实现是：
//TWEEN.JS调整相机视角的补间动画
//传入的参数是：相机移动的终点 与 需要调用的函数（此处调用的函数是重新初始化场景init）
function set_cameraPosition(p, callback) {
let position =new THREE.Vector3(p.x, p.y, p.z);
//将（camera.position）使用补间动画，在（500）毫秒内以动画的形式移动相机的位置到（position）.
//让一个补间可以链接到自己，但更好的方法是使用 repeat 方法。 它接受一个参数，描述第一个补间完成后需要多少次重复
//.start()将创建好的tween激活启动。再在animate里激活使用，TWEEN.update()
//此处链式调用，能为每个tween函数都会返回tween实例
new TWEEN.Tween(camera.position).to(position, 500).repeat(0).start();
//当补间正常完成（即不停止）时执行callback函数，即再次初始化场景init函数。补间对象作为第一个参数传入。
//前进并放大功能，还是不设置了
new TWEEN.Tween(camera.scale).to(new THREE.Vector3(1, 1, 2), 500).start().onComplete(callback);
}
https://www.cnblogs.com/empist/p/9192942.html
