three.js gsap
处理动画
使用three.js
gsap
处理动画
示例
示例代码
js
// 使 position 对象的 x 值过渡到 5
const animate = gsap.to(cube.position, {
y: 5,
duration: 5,
ease: "elastic.out(1, 0.3)",
repeat: -1, // 重复次数,无限次循环是 -1
yoyo: true, // 往返运动
delay: 1, // 延迟 1 秒后运动
onComplete() {
console.log("动画完成")
},
})
// 旋转过渡
gsap.to(cube.rotation, { x: 2 * Math.PI, duration: 5 })
console.log(canvas.value)
canvas.value.addEventListener("click", () => {
// 是否在运动
if (animate.isActive()) {
// 当点击时停止动画
animate.pause()
} else {
// 恢复
animate.play()
}
})
const render = () => {
renderer.render(scene, camera)
// 浏览器自带方法,请求下一帧调用 render 方法,渲染
requestAnimationFrame(render)
}
vue
<template>
<canvas ref="canvas" />
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue"
import {
Scene,
PerspectiveCamera,
BoxGeometry,
MeshBasicMaterial,
Mesh,
WebGLRenderer,
AxesHelper,
} from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import gsap from "gsap"
const canvas = ref()
onMounted(() => {
// 创建一个场景
const scene = new Scene()
// 创建一个相机(透视相机)
// 角度,宽高比, 进端, 远端
const camera = new PerspectiveCamera(
75,
parseInt(getComputedStyle(canvas.value).width) / window.innerHeight,
0.1,
1000
)
// 设置相机位置
camera.position.set(0, 0, 10)
// 添加到场景中
scene.add(camera)
// 创建几何体
const cubeGeometry = new BoxGeometry(1, 1, 1)
// 创建材质
const cubeMaterial = new MeshBasicMaterial({ color: 0xffc0cb })
// 根据几何体和材质创建物体
const cube = new Mesh(cubeGeometry, cubeMaterial)
// 将几何体添加到场景中
scene.add(cube)
// 初始化渲染器
const renderer = new WebGLRenderer({
// 将webGL渲染的canvas添加到dom上
canvas: canvas.value,
// 允许透明
alpha: true,
})
// 设置背景色
renderer.setClearColor(0x10b981, 0.1)
// 设置画布的宽高
renderer.setSize(
parseInt(getComputedStyle(canvas.value).width),
window.innerHeight
)
// 创建轨道控制器
// 要控制的相机,canvas元素
const controls = new OrbitControls(camera, renderer.domElement)
// 添加坐标轴辅助器
const axesHelper = new AxesHelper(5)
// 在场景中添加辅助器
scene.add(axesHelper)
// #region snippet
// 使 position 对象的 x 值过渡到 5
const animate = gsap.to(cube.position, {
y: 5,
duration: 5,
ease: "elastic.out(1, 0.3)",
repeat: -1, // 重复次数,无限次循环是 -1
yoyo: true, // 往返运动
delay: 1, // 延迟 1 秒后运动
onComplete() {
console.log("动画完成")
},
})
// 旋转过渡
gsap.to(cube.rotation, { x: 2 * Math.PI, duration: 5 })
console.log(canvas.value)
canvas.value.addEventListener("click", () => {
// 是否在运动
if (animate.isActive()) {
// 当点击时停止动画
animate.pause()
} else {
// 恢复
animate.play()
}
})
const render = () => {
renderer.render(scene, camera)
// 浏览器自带方法,请求下一帧调用 render 方法,渲染
requestAnimationFrame(render)
}
// #endregion snippet
// 开始时调用一次渲染,鼠标左键可以拖动查看立方体
render()
})
</script>
<style lang="scss" scoped>
canvas {
width: 100%;
}
</style>
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120