ThreeJS-3D教学三：平移缩放+物体沿轨迹运动

我们在项目中会有一些这样的需求，我们可视化一个场景，需要俯视、平移、缩放，方便观察场景中的数据或者模型，之所以把这个案例拿出来
1、这是个很实用的需求，我相信很多人会用到
2、我自己认为在实际案例中我们可以学习相关知识点更易吸收些
为了丰富本篇文章知识点，我还加入了一个物体沿轨迹运动的场景，下面代码会介绍到，回到之前的问题three中可以利用对 OrbitControls 的设置很轻松的实现相关场景，代码如下：

controls = new OrbitControls( camera, renderer.domElement );
  // 移动端控制平移 缩放
  // controls.touches = {
  //   ONE: THREE.TOUCH.PAN,
  //   TWO: THREE.TOUCH.DOLLY_PAN
  // };
  // PC 左平移，右旋转 滚轮放大缩小   默认是右平移
  controls.mouseButtons = {
    LEFT: THREE.MOUSE.PAN,
    MIDDLE: THREE.MOUSE.DOLLY,
    RIGHT: THREE.MOUSE.ROTATE
  };
  // 设置最大最小视距
  controls.minDistance = 20;
  controls.maxDistance = 1000;
  controls.autoRotate = false;
  controls.enableRotate = false;
  controls.enablePan = true;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

需要注意的是移动端和PC是不同的配置，minDistance和maxDistance按实际需求设置即可，到这一步只是对controls的操作，已经有能力实现效果了，但是camera的设置也是不可或缺的，即camera必须是俯视的

先上下整体效果图

看下代码：

  
  
  








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

这里是全部代码，可以看出 three用的是 155版本，大家从官网上下载到本地改下路径即可。图片url你可以换成本地图片，项目就能跑起来了。

中间立方体在做了一个环绕自身y轴旋转，外面的立方体通过获取curve上的坐标点，沿着curve的轨迹运动。

这里有一些新的知识点：

new THREE.TextureLoader().load(‘…/materials/img/view3.jpg’);
TextureLoader是three加载图片的方法，我们还可以这样用
let loader = new THREE.TextureLoader();
loader.load(‘url’, (img) => {
// img 这个img就是加载完成后的图片
});

这时就一个疑问了，同步还是异步，我们来看源码

其实还是异步，拿到图片后我们发现material有一个map参数，可以接收图片作为材质，这样material就可以做的很丰富了，side是指物体的正反两面，THREE.DoubleSide即两面都要渲染，如果我们只看外面，不要设置这里，这样也能节省一些性能

 let material = new THREE.MeshPhongMaterial({
    map: img,
    flatShading: true,
    side: THREE.DoubleSide,
    transparent: 1
  });
1
2
3
4
5
6

最后一个知识点，即物体沿着轨迹运动，我们把这一行代码
curveObject.visible = false; 改为 true 大家就可以看到这个轨迹了。
逻辑代码中已经写的很详细了，大家也可以思考下还有哪些方法可以作为curve使用。
如果感觉有用，点个赞不过分吧！！！