普通镜头切换

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

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, // 起始相机位置xpy: camera.position.y, // 起始相机位置ypz: camera.position.z, // 起始相机位置ztx: controls.target.x, // 控制点的中心点x 起始目标位置xty: controls.target.y, // 控制点的中心点y 起始目标位置ytz: 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.pxcamera.position.y = this.pycamera.position.z = this.pzcontrols.target.x = this.txcontrols.target.y = this.tycontrols.target.z = this.tz// controls.update()})tween.easing(TWEEN.Easing.Cubic.InOut)tween.start()
}

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

tween.onUpdate(function (param) {camera.position.x = param.pxcamera.position.y = param.pycamera.position.z = param.pzcontrols.target.x = param.txcontrols.target.y = param.tycontrols.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()……
}

切换慢镜头tween.js的使用相关推荐

手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览源码下载实现的代码. html代码: <div ...
tween.js 用户指南 - 与 Three.js 配合使用的补间动画库
tween.js 用户指南 - 与 Three.js 配合使用的补间动画库太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途- ...
我决定切换到 Vue.js，不再使用 React！
点击上方的终端研发部,右上角选择"设为星标" 作者:Gwenael P,前端工程师,Vue.js的狂热者译者:弯月现在,Vue.js 在 Github 上得到的星星数已经超过了 ...
使用css3和tween.js二种方式实现照片翻转
照片翻转的二种方式最近在学习使用动画效果,经常去鑫空间翻看大神写得博客,最近看到最新3月份出炉的博客–小tips: 在canvas上实现元素图片镜像翻转动画效果,我就想到自己也有需要展示照片的时候, ...
tween.js一个平滑动效果的js动画库
tween.js一个平滑动效果的js动画库 tween.js是什么? tween.js是一款可生成平滑动效果的js动画库,允许以平滑的方式修改元素的属性值. tween.js达到什么效果? 它可以通过 ...
Threejs进阶之十二：Threejs与Tween.js结合创建动画
tween.js介绍 Tween.js是一个可以产生平滑动画效果的js库,其官方地址为:https://github.com/tweenjs/tween.js/,可以将源码下载后,可以在tween.j ...
easyUI datebox 日期只显示年月及年月日切换的实现 js样式重新渲染加载
记录一下,最近的做的一个功能,需要在easyUI的日期框datebox 中,只显示年月格式,同时,还需要切换到年月日的格式第一步:如何显示年月日,默认当前一天如下代码是:报表日期及时间选择框报表 ...
linux输入数字切换浏览器tab,js监听浏览器tab窗口切换
js监听浏览器tab窗口切换 --IT唐伯虎摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) { document.addEventList ...
详解TWEEN.JS 补间动画
tweenJS是一个简单的javascript补间动画库,支持数字,对象属性,CSS样式等的动态效果过渡,允许平滑的修改元素的属性值.告诉它需要改变的元素的开始值和结束值,并设置好过渡时间,补间动画将 ...

切换慢镜头tween.js的使用