切换慢镜头tween.js的使用

Beam007

已于 2022-06-16 15:26:26 修改

阅读量1.1k

点赞数 1

分类专栏： threejs 文章标签： javascript 开发语言 ecmascript

于 2019-08-30 17:14:17 首次发布

本文链接：https://blog.csdn.net/Beam007/article/details/100162327

版权

这篇博客介绍了如何使用tween.js库在JavaScript中创建慢镜头效果。首先，讲述了普通镜头切换的方法，然后详细讨论了tween.js的安装、导入和慢镜头控制函数的编写，特别是针对tween.onUpdate函数的注意事项。最后，讲解了在场景动画中如何更新TWEEN以实现慢镜头切换效果。

摘要由CSDN通过智能技术生成

普通镜头切换

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

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