更新于 

如何使用gsap控制相机运动

原项目视频https://www.youtube.com/watch?v=O2ouLOL6C4c

GSAP

https://gsap.com/https://gsap.com/

动画就是物体随着时间的变化运动轨迹的变化，
相当于一系列点位，
GSAP就是能计算出运动点位的动画库，
使用GSAP对THREE的基本元素进行动画控制非常简单，
只需要指定需要变化的属性、属性目标值、持续时间等等基本参数即可,
gsap中的timeline类型链式添加动画更加方便

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const tl = gsap.timeline()
const duration = 6
const ease = 'ease'
    tl.to(camera.position,{
        x:0,
        y:0,
        z:19.5,
        duration,
        ease,
        onUpdate:function(){
            camera.lookAt(0,0,0)
        }
    }).to(camera.position,{
        x:-15,
        y:24,
        z:0,
        duration,
        ease,
        onUpdate:function(){
            camera.lookAt(0,0,0)
        }
    }).to(camera.position,{
        x:6,
        y:-10,
        z:0,
        duration,
        ease,
        onUpdate:function(){
            camera.lookAt(0,0,0)
        }
    },'>-2')

FirstPersonControls 第一人称相机控制器

gsap可以控制相机做各种视角运动（运镜），
但是要想得到不错的效果，需要抓住相机拍摄的关键角度和坐标，
这些关键点的参数如何获取？
可以使用FirstPersonControls，第一人称相机控制器，
模拟相机运动，相当于踩点，
记录下几个关键的点位。

1
2
3
4
5
6
7
8
9
10
11
12
13
import {FirstPersonControls} from "three/examples/jsm/controls/FirstPersonControls.js";
const controls = new FirstPersonControls(camera, renderer.domElement)
controls.movementSpeed = 8
controls.lookSpeed = 0.08
window.onmouseup = e =>{
    // 参数打印
    console.log(camera.position, camera.rotation)
}
const clock = new THREE.Clock()
function animate() {
    controls.update(clock.getDelta())
    renderer.render(scene, camera);
}

然后使用gsap在这些点位之间做连贯运动：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

let progress = 0
window.onmousedown = e=>{
    switch (progress%9){
        case 0:
            cameraMovement({x:1.64, y :0.79, z:-0.16})
            cameraRotation({x:0.83, y :-1.17, z:0.79})
            break;
        case 1:
            cameraMovement({x:1.35, y :0.83, z:-5.6})
            cameraRotation({x:0.43, y :0.13, z:-0.06})
            break;
        case 2:
            cameraMovement({x:3.04, y :-0.17, z:-6.33})
            cameraRotation({x:3, y :-0.9, z:3.03})
            break;
        case 4:
            cameraMovement({x:2.13, y :0.89, z:2.04})
            cameraRotation({x:2.85, y :-0.99, z:2.89})
            break;
        case 5:
            cameraMovement({x:-0.42, y :-0.13, z:2.11})
            cameraRotation({x:2.88, y :-0.09, z:3.11})
            break;
        case 6:
            cameraMovement({x:-1.04, y :0.36, z:0.18})
            cameraRotation({x:2.41, y :1.4, z:-2.42})
            break;
        case 7:
            cameraMovement({x:-0.84, y :0.58, z:-4.4})
            cameraRotation({x:0.11, y :0.83, z:-0.08})
            break;
        case 8:
            cameraMovement({x:-0.38, y :0.03, z:-1.57})
            cameraRotation({x:1.57, y :0.08, z:-1.62})
            break;
    }
    progress++
}