ThreeJS-3D教学六-物体位移旋转

之前文章其实也有涉及到这方面的内容，比如在ThreeJS-3D教学三：平移缩放+物体沿轨迹运动这篇中，通过获取轨迹点物体动起来，其它几篇文章也有旋转的效果，本篇我们来详细看下，另外加了tween.js知识点，tween可以很好的协助 three 做动画，与之相似的还有 gsap.js方法类似。

1、物体位移两种方式

mesh.position.set(x, y, z);
mesh.position.x = 10;
mesh.position.y = 10;
mesh.position.z = 10;
1
2
3
4

2、物体旋转两种方式

// 绕局部空间的轴旋转这个物体
mesh.rotateX = 0.1; // 以弧度为单位旋转的角度
mesh.rotateY = 0.1;
mesh.rotateZ = 0.1;
// 物体的局部旋转，以弧度来表示
mesh.rotation.x = MathUtils.degToRad(90)
// 在局部空间中绕着该物体的轴来旋转一个物体
mesh.rotateOnAxis(new Vector3(1,0,0), 3.14);

1
2
3
4
5
6
7
8
9

注意，这里设置的数值是弧度，需要和角度区分开
角度 转 弧度 THREE.MathUtils.degToRad(deg)
弧度 转 角度 THREE.MathUtils.radToDeg (rad)
弧度 = 角度 / 180 * Math.PI
角度 = 弧度 * 180 / Math.PI
π（弧度） = 180°（角度）

3、tween.js

Tween.js 是一个 过渡计算工具包 ，理论上来说只是一个工具包，可以用到各种需要有过渡效果的场景，一般情况下，需要通过环境里面提供的辅助时间工具来实现。比如在网页上就是使用 window 下的 requestAnimationFrame 方法，低端浏览器只能使用 setInterval 方法来配合了。

1）简单使用
例如：把一个元素的 x 坐标在 1秒内由100 增加到 200， 通过以下代码可以实现：

// 1. 定义元素
const position = { x: 100, y: 0 };
// 2. new 一个 Tween对象，构造参数传入需要变化的元素
const tween = new TWEEN.Tween(position);
// 3. 设置目标
tween.to({ x: 200 }, 1000);
// 4. 启动，通常情况下，2，3，4步一般习惯性写在一起，定义命名也省了
//    例如 new TWEEN.Tween(position).to({ x: 200 }, 1000).start();
tween.start();
// 5. （可选：）如果在变化过程中想自定义事件，则可以通过以下事件按需使用
tween1.onStart(() => {
  console.log('onStart');
});
tween1.onStop(() => {
  console.log('onStop');
});
tween1.onComplete(() => {
 console.log('onComplete');
});
tween.onUpdate(function(pos) {
 console.log(pos.x);
});
// 6. 设置 requestAnimationFrame，在方法里面调用全局的 `TWEEN.update()`
//    在这个方法里面也可以加入其它的代码：d3, threejs 里面经常会用到。
//	  比如THREEJS里面用到的变化，如 `renderer.render(scene, camera);` 等
function animate() {
    requestAnimationFrame(animate);
    TWEEN.update();
}
// 6. 启动全局的 animate
animate();
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

2、连续型变化
一般情况下，设置起点和终点时两个数时，认为是连续型的，里面有无数的可能变化到的值（算上小数）。
连续型变化使用 easing 做为时间变化函数，默认使用的是 Liner 纯性过渡函数，easing过渡 的种类很多，每种还区分 IN, OUT, INOUT 算法。引用时 使用 TWEEN.Easing前缀，例如 ：

tween.easing(TWEEN.Easing.Quadratic.Out)
1

目前内置的过渡函数下图：

3、主动控制

start([time]) ， stop()
开始，结束，start 方法还接受一个时间参数，如果传了的话，就直接从传入的时间开始

update([time])
更新，会触发更新事件，如果有监听，则可以执行监听相关代码。
更新方法接受一个时间参数，如果传了的话，就更新到指定的时间

chain(tweenObject,[tweenObject])
如果是多个 Tween 对像 如果 tweenA 需要等到 tweenB 结束后，才能 start, 那么可以使用

tweenA.chain(tweenB);
//另外，chain方法也可以接收多个参数，如果 A对象 需要等待多个对像时，依次传入
tweenA.chain(tweenB, tweenC, tweenD);
1
2
3

repeat(number)
循环的次数，默认是 1 所以不定义的话，只过渡一次就没了，可以使用上面刚说的无限循环的方法，便只是一个对象无限循环时，就使用 ：

tween.repeat(Infinity); //无限循环
tween.repeat(5); //循环5次
1
2

delay(time)
delay 是指延时多久才开始。比如以下代码：

tween.delay(1000);
tween.start();
1
2

虽然已经调用 start 了，但过渡动作要等 1秒 后才开始执行！

大致讲这些算是给大家一个初步的认知，感兴趣的可以自行查询文档，下面回到咱们本次的案例中，先看效果图：

代码如下：

  
  
  
  








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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317

这里有几个小知识点：
1、改变物体旋转的中心点，我们通过将物体放入new THREE.Group 组中，通过位移实现；
2、我们通过new THREE.Box3().setFromObject(mesh2)可以获取物体的最大最小 区间；
3、tween.yoyo(true) 方法在一些旧的版本中会报错，新的版本已经修复，请大家使用最新版本
4、最重要的一点 不要忘记加 TWEEN.update()