teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問”終了していない文字列型の定数です”、３D年賀状がうまく機能しないです。[JavaScript]

編集履歴

質問編集履歴

1

コードを一部しか載せていなかったので全文載せました

2018/12/28 07:36

投稿

risushi
risushi

スコア12

test CHANGED
File without changes
test CHANGED
@@ -22,7 +22,91 @@
22
22
 
23
23
 
24
24
 
25
- ```jacascript
25
+ ```javascript
26
+
27
+ // forked from cx20's "Three.js + Oimo.js でドミノっぽくドット絵を作るテスト（サンタバージョン）" http://jsdo.it/cx20/5gmA
28
+
29
+ // forked from cx20's "Three.js + Oimo.js でドミノっぽくドット絵を作るテスト" http://jsdo.it/cx20/8ReN
30
+
31
+ // forked from cx20's "Three.js + Oimo.js でドット絵を落下させるテスト" http://jsdo.it/cx20/voHQ
32
+
33
+ // forked from Lo-Th's "oimo basic" http://jsdo.it/Lo-Th/frXo
34
+
35
+
36
+
37
+ var DOT_SIZE = 16;
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
+ var dataSet = [
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
+
26
110
 
27
111
  function getRgbColor( c )
28
112
 
@@ -30,7 +114,7 @@
30
114
 
31
115
  var colorHash = {
32
116
 
33
- "黒":0xFF000000,
117
+ "黒":0x000000,
34
118
 
35
119
  "白":0xffffff,
36
120
 
@@ -56,6 +140,338 @@
56
140
 
57
141
  }
58
142
 
143
+
144
+
145
+ // Three.js 用変数
146
+
147
+ var camera, scene, light, renderer, container, center;
148
+
149
+ var meshs = [];
150
+
151
+ var geoBox;
152
+
153
+
154
+
155
+ // Oimo.js 用変数
156
+
157
+ var world;
158
+
159
+ var bodys = [];
160
+
161
+
162
+
163
+ init();
164
+
165
+ animate();
166
+
167
+
168
+
169
+ function init() {
170
+
171
+ // カメラを作成する
172
+
173
+ camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
174
+
175
+ camera.position.set(0, 150, 300);
176
+
177
+ center = new THREE.Vector3();
178
+
179
+ camera.lookAt(center);
180
+
181
+
182
+
183
+ // シーンを作成する
184
+
185
+ scene = new THREE.Scene();
186
+
187
+
188
+
189
+ // 物理演算の準備
190
+
191
+ world = new OIMO.World();
192
+
193
+
194
+
195
+ // 床を作成する
196
+
197
+ createGround();
198
+
199
+
200
+
201
+ // ドミノを作成する
202
+
203
+ createDomino();
204
+
205
+
206
+
207
+ // ドミノ碑を倒す為の立方体を配置する
208
+
209
+ createCube();
210
+
211
+
212
+
213
+ // ライトを作成する
214
+
215
+ light = new THREE.DirectionalLight(0xffffff, 1.3);
216
+
217
+ light.position.set(0.3, 1, 0.5);
218
+
219
+ scene.add(light);
220
+
221
+
222
+
223
+ // レンダラーを作成する
224
+
225
+ renderer = new THREE.WebGLRenderer();
226
+
227
+ renderer.setClearColor(0x0000000);
228
+
229
+ renderer.setSize(window.innerWidth, window.innerHeight);
230
+
231
+
232
+
233
+ // レンダラーのサイズを指定する
234
+
235
+ renderer.setSize(window.innerWidth, window.innerHeight);
236
+
237
+
238
+
239
+ // HTML との紐づけを行う
240
+
241
+ container = document.getElementById("container");
242
+
243
+ container.appendChild(renderer.domElement);
244
+
245
+ }
246
+
247
+
248
+
249
+ function createGround() {
250
+
251
+ // 床の物理演算の設定
252
+
253
+ var ground = new OIMO.Body({
254
+
255
+ size: [400, 40, 400],
256
+
257
+ pos: [0, -50, 0],
258
+
259
+ world: world
260
+
261
+ });
262
+
263
+
264
+
265
+ // 床表示用の設定
266
+
267
+ var material = new THREE.MeshLambertMaterial({
268
+
269
+ color: 0x202020
270
+
271
+ });
272
+
273
+ var geometry = new THREE.BoxGeometry(400, 40, 400);
274
+
275
+ var mesh = new THREE.Mesh(geometry, material);
276
+
277
+ mesh.position.y = -50;
278
+
279
+ scene.add(mesh);
280
+
281
+ }
282
+
283
+
284
+
285
+ function createDomino() {
286
+
287
+ // ドミノ碑のサイズ
288
+
289
+ var w = DOT_SIZE * 0.2;
290
+
291
+ var h = DOT_SIZE * 1.5;
292
+
293
+ var d = DOT_SIZE;
294
+
295
+
296
+
297
+ // ドミノ碑のベースとなる箱を作成する
298
+
299
+ geoBox = new THREE.BoxGeometry(1, 1, 1);
300
+
301
+
302
+
303
+ var color;
304
+
305
+ var i;
306
+
307
+ // ドミノ碑を16x16個、整列させる
308
+
309
+ for (var x = 0; x < 16; x++) {
310
+
311
+ for (var z = 0; z < 16; z++) {
312
+
313
+ i = x + (z) * 16;
314
+
315
+ y = 0;
316
+
317
+ // 物理演算用のオブジェクトを設定
318
+
319
+ bodys[i] = new OIMO.Body({
320
+
321
+ type: 'box',
322
+
323
+ size: [w, h, d],
324
+
325
+ pos: [-120 + x * DOT_SIZE, y * DOT_SIZE, -120 + z * DOT_SIZE * 1.2],
326
+
327
+ move: true,
328
+
329
+ world: world
330
+
331
+ });
332
+
333
+ // ドミノ碑の色を設定（ドット絵になるよう色を変更）
334
+
335
+ color = getRgbColor(dataSet[i]);
336
+
337
+ var material = new THREE.MeshLambertMaterial({
338
+
339
+ color: color
340
+
341
+ });
342
+
343
+ // 表示用のオブジェクトを設定
344
+
345
+ meshs[i] = new THREE.Mesh(geoBox, material);
346
+
347
+ meshs[i].scale.set(w, h, d);
348
+
349
+ scene.add(meshs[i]);
350
+
351
+ }
352
+
353
+ }
354
+
355
+ }
356
+
357
+
358
+
359
+ function createCube() {
360
+
361
+ // 立方体のサイズ
362
+
363
+ var w = DOT_SIZE;
364
+
365
+ var h = DOT_SIZE;
366
+
367
+ var d = DOT_SIZE;
368
+
369
+ // ドミノ碑を倒す為に、赤色の立方体×16個、配置する。
370
+
371
+ var size = bodys.length;
372
+
373
+ for (var i = 0; i < 16; i++) {
374
+
375
+ var x = 0;
376
+
377
+ var y = 2;
378
+
379
+ var z = i;
380
+
381
+ // 物理演算用のオブジェクトを設定
382
+
383
+ bodys[size + i] = new OIMO.Body({
384
+
385
+ type: 'box',
386
+
387
+ size: [w, h, d],
388
+
389
+ pos: [-125 + x * DOT_SIZE, y * DOT_SIZE, -120 + z * DOT_SIZE * 1.2],
390
+
391
+ move: true,
392
+
393
+ world: world
394
+
395
+ });
396
+
397
+ // 立方体の色を設定（赤色）
398
+
399
+ var material = new THREE.MeshLambertMaterial({
400
+
401
+ color: "#f00"
402
+
403
+ });
404
+
405
+ // 表示用のオブジェクトを設定
406
+
407
+ meshs[size + i] = new THREE.Mesh(geoBox, material);
408
+
409
+ meshs[size + i].scale.set(w, h, d);
410
+
411
+ scene.add(meshs[size + i]);
412
+
413
+ }
414
+
415
+ }
416
+
417
+
418
+
419
+ function animate() {
420
+
421
+ requestAnimationFrame(animate);
422
+
423
+ render();
424
+
425
+ }
426
+
427
+
428
+
429
+ function render() {
430
+
431
+ // 物理演算の世界の時間を進める
432
+
433
+ world.step();
434
+
435
+
436
+
437
+ var p, r, m, x, y, z;
438
+
439
+ var mtx = new THREE.Matrix4();
440
+
441
+ var i = bodys.length;
442
+
443
+ var mesh;
444
+
445
+
446
+
447
+ // ドミノ碑の物理演算を行い位置の算出を行う
448
+
449
+ while (i--) {
450
+
451
+ var body = bodys[i].body;
452
+
453
+ mesh = meshs[i];
454
+
455
+ m = body.getMatrix();
456
+
457
+ mtx.fromArray(m);
458
+
459
+ mesh.position.setFromMatrixPosition(mtx);
460
+
461
+ mesh.rotation.setFromRotationMatrix(mtx);
462
+
463
+ }
464
+
465
+
466
+
467
+ // 表示を更新する
468
+
469
+ renderer.render(scene, camera);
470
+
471
+ }
472
+
473
+
474
+
59
475
  ```
60
476
 
61
477