Three.js+Tween.js 实现点击交互，相机旋转视角跟随

目录

Tween.js介绍

一、Tween.js使用方法

二、Tween.js核心方法

.to()

.start(time)

.stop()

.repeat()

.delay()

.pause()

.resume()

.yoyo()

.update()

.chain()

.getAll()

.removeAll()

.add()

.remove()

三、Tween.js 缓动函数

缓动类型

常见缓动动画

四、函数封装

代码：

---

Tween.js介绍

Tween.js是一个可以产生平滑动画效果的js库，其官方地址为：GitHub - tweenjs/tween.js: JavaScript/TypeScript animation engine，在这里只将使用 npm 下载

安装指令：npm install @tweenjs/tween.js

---

一、Tween.js使用方法

使用起来非常简单，只需要三步就可以了：

1. new 一个 Tween 的实例并将要修改的变量作为参数传递进去
2. 使用 Tween().to() 方法将最终值和动画花费多少时间传入进去
3. 使用 Tween().to() 方法，启动动画tween引擎就可以计算从开始动画点到结束动画点之间值，来产生平滑的动画效果

但是要特别注意的是，在 Three.js 中使用的时候一定要在 requestAnimationFrame 中加入TWEEN.update()

---

二、Tween.js核心方法

• .to()

控制补间的运动形式及方向 .to() , 当tween启动时，Tween.js将读取当前属性值并 应用相对值来找出新的最终值

• .start(time)

补间动画启动的方法， .start 方法接受一个参数 time , 如果加入这个参数,那么补间不会立即开始直到特定时刻才会开始

• .stop()

关闭补间动画 .stop() , 关闭这个正在执行的补间动画

• .repeat()

使用该方法可以使动画重复执行，它接受一个参数 , 描述需要重复多少次

• .delay()

延迟执行动画的方法 .delay() , 接受一个参数用于控制延迟的具体时间，表示延迟多少时间后才开始执行动画

• .pause()

暂停动画.pause() ， 暂停当前补间运动，与resume方法配合使用

• .resume()

恢复动画 .resume() ， 恢复这个已经被暂停的补间运动

• .yoyo()

控制补间重复的模式 .yoyo() , 这个功能只有在使用 repeat 时才有效果 ,该动画像悠悠球一样来回运动 , 而不是重新开始

• .update()

更新补间动画 TWEEN.update() , 动态更新补间运动一般配合 window.requestAnimationFrame 使用

• .chain()

链式补间动画，当我们顺序排列不同的补间动画时，比如我们在上一个补间结束的时候立即启动另外一个补间动画，使用 .chain() 方法来做。

tween1.chain(tween2)        //tween2在tween1后执行

• .getAll()

获取所有的补间组 TWEEN.getAll()

• .removeAll()

删除所有的补间组 TWEEN.removeAll()

• .add()

新增补间 TWEEN.add(tween) ，添加一个特定的补间 var tween=new TWEEN.Tween()

• .remove()

删除补间 TWEEN.remove(tween)，删除一个特定的补间

var tween=new TWEEN.Tween()

---

三、Tween.js 缓动函数

Tween.js 中游封装好了的常用缓动动画，如线性，二次，三次，四次，五次，正弦，指数，圆形，弹性，下落和弹跳等缓动函数。

• 缓动类型

        In (先慢后快) ；Out (先快后慢) 和 InOut (前半段加速，后半段减速)

• 常见缓动动画

Linear：线性匀速运动效果；
Quadratic：二次方的缓动（t^2）；
Cubic：三次方的缓动（t^3）；
Quartic：四次方的缓动（t^4）；
Quintic：五次方的缓动（t^5）；
Sinusoidal：正弦曲线的缓动（sin(t)）；
Exponential：指数曲线的缓动（2^t）；
Circular：圆形曲线的缓动（sqrt(1-t^2)）；
Elastic：指数衰减的正弦曲线缓动；
Back：超过范围的三次方缓动（(s+1)t^3 – st^2）；
Bounce：指数衰减的反弹缓动。
以上每个效果都分三个缓动类型，分别是：
easeIn：从0开始加速的缓动，也就是先慢后快；
easeOut：减速到0的缓动，也就是先快后慢；
easeInOut：前半段从0开始加速，后半段减速到0的缓动。

---

四、函数封装

代码：

const tweenFunc = (event) => {
    const tween = new TWEEN.Tween(camera.position);
    tween.to({ x: event.x, y: event.y, z: event.z }, 2000)
    tween.easing(TWEEN.Easing.Cubic.InOut);
    tween.onUpdate(function () {
        camera.lookAt(0, 0, 0)
        console.log("我执行了",event)
    })
    tween.start();// 当在start里面加入了延迟执行的number的时候，就意味着只执行一次动画效果
}

const onDocumentMouseDown = (event) => {
    // 点击屏幕创建一个向量
    var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window
        .innerHeight) * 2 + 1, 0.5);
    vector = vector.unproject(camera); // 将屏幕的坐标转换成三维场景中的坐标
    // var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
    var raycaster = new THREE.Raycaster()
    const mouse: THREE.Vector2 = new THREE.Vector2(
        (event.clientX / window.innerWidth) * 2 - 1,
        -(event.clientY / window.innerHeight) * 2 + 1
    );
    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(scene.children, true);
    if (intersects.length <= 0) return void 0;
    console.log(intersects[0].point, intersects[0].object)
    tweenFunc(intersects[0].object.position)
    return intersects[0].object;
}

window.addEventListener('click', onDocumentMouseDown)

 当然我也是才开始接触Tween.js，所以也不大熟悉，有什么写的不大对的地方还请见谅～欢迎各位小伙伴踊跃交流沟通和提出我的不足之处～