切换慢镜头tween.js的使用

普通镜头切换

设置相机位置和观察方向即可：

camera.position.set(aim.x, aim.y + 2, aim.z + 4)
// camera.lookAt设置与OrbitControls冲突需要设置controls.target
// camera.lookAt(new THREE.Vector3(aim.x, 0, 0))
controls.target = new THREE.Vector3(aim.x, 0, 0)

参考文档：
https://blog.csdn.net/unirrrrr/article/details/80692267

慢镜头效果切换

使用tween.js控制慢镜头
官方文档：
http://www.createjs.cc/tweenjs/docs/modules/TweenJS.html
（什么跟什么啊，我是不是看错了官方文档）

1、安装和导入

安装命令：npm install tween.js --save
导入方式：import * as TWEEN from ‘tween’

2、慢镜头控制函数

animateCamera (position, target) {
	let tween = new TWEEN.Tween({
		px: camera.position.x, // 起始相机位置x
		py: camera.position.y, // 起始相机位置y
		pz: camera.position.z, // 起始相机位置z
		tx: controls.target.x, // 控制点的中心点x 起始目标位置x
		ty: controls.target.y, // 控制点的中心点y 起始目标位置y
		tz: controls.target.z // 控制点的中心点z 起始目标位置z
	})
	tween.to({
		px: position.x,
		py: position.y,
		pz: position.z,
		tx: target.x,
		ty: target.y,
		tz: target.z
	}, 1000)
	tween.onUpdate(function () {
		camera.position.x = this.px
		camera.position.y = this.py
		camera.position.z = this.pz
		controls.target.x = this.tx
		controls.target.y = this.ty
		controls.target.z = this.tz
		// controls.update()
	})
	tween.easing(TWEEN.Easing.Cubic.InOut)
	tween.start()
}

此处需要注意，很多地方的tween.onUpdate这么写的：

tween.onUpdate(function (param) {
	camera.position.x = param.px
	camera.position.y = param.py
	camera.position.z = param.pz
	controls.target.x = param.tx
	controls.target.y = param.ty
	controls.target.z = param.tz
})

传了个参数param，结果根本毫无反应，打印param发现明显不对。

3、函数的调用

// 切换镜头近景 慢镜头效果 （新的相机点，新的目标点）
this.animateCamera({x: aim.x, y: aim.y + 3, z: aim.z + 4}, {x: aim.x, y: 0, z: 0})

4、场景动画中更新TWEEN

animate () {
	TWEEN.update()
	……
}