携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

普通镜头切换

设置相机位置和观察方向即可，镜头转换很突兀没有过度。

参考文档：

blog.csdn.net/unirrrrr/ar…

关键代码：

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)
复制代码

慢镜头效果切换

使用tween.js控制，动态设置相机位置和观察方向，实现慢镜头转换效果。

官方文档：

www.createjs.cc/tweenjs/doc…

（什么跟什么啊，我是不是看错了官方文档，还是自己摸索自己来，求告知官方文档搁哪……）

TWEEN.JS实现慢镜头切换步骤

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的更新方法，达到动态设置相机位置和观察方向，从而实现慢镜头转换效果。

animate () {
	TWEEN.update()
	……
}
复制代码