質問編集履歴

4

記載ミス

2019/07/22 09:59

投稿

aiai8976
aiai8976

スコア112

test CHANGED
File without changes
test CHANGED
@@ -30,298 +30,298 @@
30
30
 
31
31
  at init (test.html:121)
32
32
 
33
+ ```a
34
+
35
+
36
+
37
+ ### 該当のソースコード
38
+
39
+
40
+
41
+ ```ここに言語名を入力
42
+
43
+ <html>
44
+
45
+ <head>
46
+
47
+ <script type="text/javascript" src="three.js-master/build/three.min.js"></script>
48
+
49
+ <script type="text/javascript" src="js/OrbitControls.js"></script>
50
+
51
+ </head>
52
+
53
+
54
+
55
+ <body>
56
+
57
+ <div id="WebGL-area"></div>
58
+
59
+
60
+
61
+ <script type="text/javascript">
62
+
63
+ function getCSV() {
64
+
65
+ //promiseを使うことで簡潔に記述できる
66
+
67
+ return new Promise((resolve, reject) => { //resolveまたはrejectの結果を返す
68
+
69
+ var req = new XMLHttpRequest(); // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成、サーバと非同期通信するためのAPI
70
+
71
+ req.open("get", "test_new2.csv", false); // アクセスするファイルを指定、falseは非同期処理
72
+
73
+ //受信が成功した時に呼び出されるイベント
74
+
75
+ req.onload = () => {
76
+
77
+ //通信が正常に終了したかを確認する
78
+
79
+ if (req.readyState === 4 && req.status === 200) {
80
+
81
+ resolve(convertCSVtoArray(req.responseText));
82
+
83
+ } else {
84
+
85
+ alert(req.status);
86
+
87
+ reject(new Error(req.statusText));
88
+
89
+ }
90
+
91
+ };
92
+
93
+ //受信が失敗した時に呼び出されるイベント
94
+
95
+ req.onerror = () => {
96
+
97
+ reject(new Error(req.statusText));
98
+
99
+ };
100
+
101
+ req.send(null); // HTTPリクエストの発行
102
+
103
+ });
104
+
105
+ }
106
+
107
+
108
+
109
+
110
+
111
+ // 読み込んだCSVデータを二次元配列に変換する関数convertCSVtoArray()の定義
112
+
113
+ function convertCSVtoArray(str){ // 読み込んだCSVデータが文字列として渡される
114
+
115
+ var result1 = []; // 最終的な二次元配列を入れるための配列
116
+
117
+ var result2 = [];
118
+
119
+ var dis=[];
120
+
121
+ var rot=[];
122
+
123
+ var tmp = str.split("\n"); // 改行を区切り文字として行を要素とした配列を生成
124
+
125
+
126
+
127
+
128
+
129
+ // 各行ごとにカンマで区切った文字列を要素とした二次元配列を生成
130
+
131
+ for(var i=0;i<tmp.length;++i){
132
+
133
+ var temp=[];
134
+
135
+ temp= tmp[i].split(',');
136
+
137
+ result1[i]=temp[0];
138
+
139
+ result2[i]=temp[1];
140
+
141
+ //dis[i]=result[i][0];
142
+
143
+ //rot[i]=result[i][1];
144
+
145
+ }
146
+
147
+
148
+
149
+ var result=result1.concat(result2);
150
+
151
+ //return dis,rot;
152
+
153
+ return result;
154
+
155
+ }
156
+
157
+
158
+
159
+
160
+
161
+
162
+
163
+
164
+
165
+ async function init() {
166
+
167
+ var scene = new THREE.Scene();
168
+
169
+
170
+
171
+ var renderer = new THREE.WebGLRenderer();
172
+
173
+ renderer.setSize(900, 600);
174
+
175
+
176
+
177
+ document.getElementById("WebGL-area").appendChild(renderer.domElement);
178
+
179
+
180
+
181
+
182
+
183
+
184
+
185
+
186
+
187
+ var camera = new THREE.PerspectiveCamera(45, 1.5, 0.1, 1000);
188
+
189
+ camera.position.set(30, 45, 30);
190
+
191
+ camera.lookAt(scene.position);
192
+
193
+
194
+
195
+ var controls = new THREE.OrbitControls(camera);
196
+
197
+ controls.autoRotate = true; //自動周回
198
+
199
+
200
+
201
+
202
+
203
+
204
+
205
+
206
+
207
+
208
+
209
+ // 座標軸を表示
210
+
211
+ var axes = new THREE.AxisHelper(100);
212
+
213
+ scene.add(axes);
214
+
215
+
216
+
217
+ //形状オブジェクトの宣言と生成
218
+
219
+ var geometry= new THREE.Geometry();
220
+
221
+
222
+
223
+ var a=[];
224
+
225
+ var dis=[];
226
+
227
+ var rot=[];
228
+
229
+ //dis,rot = await getCSV();
230
+
231
+ a = await getCSV();
232
+
233
+ dis=a.slice(0,2000);
234
+
235
+ rot=a.slice(2001,4000);
236
+
237
+ alert(dis[0]);
238
+
239
+ alert(rot[0]);
240
+
241
+ //alert(dis);
242
+
243
+ //alert(rot);
244
+
245
+
246
+
247
+
248
+
249
+ // for(var i=0;i<1000;i++){
250
+
251
+ // geometry.vertices[i]= new THREE.Vector3((data[i][0] * Math.cos( data[i][1] * (Math.PI / 180) ))/2,
252
+
253
+ // 0,
254
+
255
+ // (data[i][0] * Math.sin( data[i][1] * (Math.PI / 180) ))/2);
256
+
257
+ // }
258
+
259
+
260
+
261
+ for(var i=0;i<2000;i++){
262
+
263
+ var x=(dis[i] * Math.cos( rot[i] * (Math.PI / 180) ))/2;
264
+
265
+ var y=(dis[i] * Math.sin( rot[i] * (Math.PI / 180) ))/2;
266
+
267
+ //alert(x);
268
+
269
+ //alert(y);
270
+
271
+ geometry.vertices[i]= new THREE.Vector3(x,0,y);
272
+
273
+ }
274
+
275
+
276
+
277
+ //材質オブジェクトの宣言と生成
278
+
279
+ var material=new THREE.ParticleBasicMaterial({color: 0xFF0000, size: 10.0});
280
+
281
+ //点オブジェクトの生成
282
+
283
+ var particles = new THREE.ParticleSystem(geometry,material);
284
+
285
+ //点オブジェクトのシーンへの追加
286
+
287
+ scene.add(particles);
288
+
289
+
290
+
291
+
292
+
293
+
294
+
295
+ render();
296
+
297
+
298
+
299
+ function render() {
300
+
301
+ controls.update();
302
+
303
+ requestAnimationFrame(render);
304
+
305
+ renderer.render(scene, camera);
306
+
307
+ }
308
+
309
+ }
310
+
311
+ window.onload = init
312
+
313
+ </script>
314
+
315
+ </body>
316
+
317
+ </html>
318
+
319
+
320
+
33
321
  ```
34
322
 
35
323
 
36
324
 
37
- ### 該当のソースコード
38
-
39
-
40
-
41
- ```ここに言語名を入力
42
-
43
- <html>
44
-
45
- <head>
46
-
47
- <script type="text/javascript" src="three.js-master/build/three.min.js"></script>
48
-
49
- <script type="text/javascript" src="js/OrbitControls.js"></script>
50
-
51
- </head>
52
-
53
-
54
-
55
- <body>
56
-
57
- <div id="WebGL-area"></div>
58
-
59
-
60
-
61
- <script type="text/javascript">
62
-
63
- function getCSV() {
64
-
65
- //promiseを使うことで簡潔に記述できる
66
-
67
- return new Promise((resolve, reject) => { //resolveまたはrejectの結果を返す
68
-
69
- var req = new XMLHttpRequest(); // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成、サーバと非同期通信するためのAPI
70
-
71
- req.open("get", "test_new2.csv", false); // アクセスするファイルを指定、falseは非同期処理
72
-
73
- //受信が成功した時に呼び出されるイベント
74
-
75
- req.onload = () => {
76
-
77
- //通信が正常に終了したかを確認する
78
-
79
- if (req.readyState === 4 && req.status === 200) {
80
-
81
- resolve(convertCSVtoArray(req.responseText));
82
-
83
- } else {
84
-
85
- alert(req.status);
86
-
87
- reject(new Error(req.statusText));
88
-
89
- }
90
-
91
- };
92
-
93
- //受信が失敗した時に呼び出されるイベント
94
-
95
- req.onerror = () => {
96
-
97
- reject(new Error(req.statusText));
98
-
99
- };
100
-
101
- req.send(null); // HTTPリクエストの発行
102
-
103
- });
104
-
105
- }
106
-
107
-
108
-
109
-
110
-
111
- // 読み込んだCSVデータを二次元配列に変換する関数convertCSVtoArray()の定義
112
-
113
- function convertCSVtoArray(str){ // 読み込んだCSVデータが文字列として渡される
114
-
115
- var result1 = []; // 最終的な二次元配列を入れるための配列
116
-
117
- var result2 = [];
118
-
119
- var dis=[];
120
-
121
- var rot=[];
122
-
123
- var tmp = str.split("\n"); // 改行を区切り文字として行を要素とした配列を生成
124
-
125
-
126
-
127
-
128
-
129
- // 各行ごとにカンマで区切った文字列を要素とした二次元配列を生成
130
-
131
- for(var i=0;i<tmp.length;++i){
132
-
133
- var temp=[];
134
-
135
- temp= tmp[i].split(',');
136
-
137
- result1[i]=temp[0];
138
-
139
- result2[i]=temp[1];
140
-
141
- //dis[i]=result[i][0];
142
-
143
- //rot[i]=result[i][1];
144
-
145
- }
146
-
147
-
148
-
149
- var result=result1.concat(result2);
150
-
151
- //return dis,rot;
152
-
153
- return result;
154
-
155
- }
156
-
157
-
158
-
159
-
160
-
161
-
162
-
163
-
164
-
165
- async function init() {
166
-
167
- var scene = new THREE.Scene();
168
-
169
-
170
-
171
- var renderer = new THREE.WebGLRenderer();
172
-
173
- renderer.setSize(900, 600);
174
-
175
-
176
-
177
- document.getElementById("WebGL-area").appendChild(renderer.domElement);
178
-
179
-
180
-
181
-
182
-
183
-
184
-
185
-
186
-
187
- var camera = new THREE.PerspectiveCamera(45, 1.5, 0.1, 1000);
188
-
189
- camera.position.set(30, 45, 30);
190
-
191
- camera.lookAt(scene.position);
192
-
193
-
194
-
195
- var controls = new THREE.OrbitControls(camera);
196
-
197
- controls.autoRotate = true; //自動周回
198
-
199
-
200
-
201
-
202
-
203
-
204
-
205
-
206
-
207
-
208
-
209
- // 座標軸を表示
210
-
211
- var axes = new THREE.AxisHelper(100);
212
-
213
- scene.add(axes);
214
-
215
-
216
-
217
- //形状オブジェクトの宣言と生成
218
-
219
- var geometry= new THREE.Geometry();
220
-
221
-
222
-
223
- var a=[];
224
-
225
- var dis=[];
226
-
227
- var rot=[];
228
-
229
- //dis,rot = await getCSV();
230
-
231
- a = await getCSV();
232
-
233
- dis=a.slice(0,2000);
234
-
235
- rot=a.slice(2001,4000);
236
-
237
- alert(dis[0]);
238
-
239
- alert(rot[0]);
240
-
241
- //alert(dis);
242
-
243
- //alert(rot);
244
-
245
-
246
-
247
-
248
-
249
- // for(var i=0;i<1000;i++){
250
-
251
- // geometry.vertices[i]= new THREE.Vector3((data[i][0] * Math.cos( data[i][1] * (Math.PI / 180) ))/2,
252
-
253
- // 0,
254
-
255
- // (data[i][0] * Math.sin( data[i][1] * (Math.PI / 180) ))/2);
256
-
257
- // }
258
-
259
-
260
-
261
- for(var i=0;i<2000;i++){
262
-
263
- var x=(dis[i] * Math.cos( rot[i] * (Math.PI / 180) ))/2;
264
-
265
- var y=(dis[i] * Math.sin( rot[i] * (Math.PI / 180) ))/2;
266
-
267
- //alert(x);
268
-
269
- //alert(y);
270
-
271
- geometry.vertices[i]= new THREE.Vector3(x,0,y);
272
-
273
- }
274
-
275
-
276
-
277
- //材質オブジェクトの宣言と生成
278
-
279
- var material=new THREE.ParticleBasicMaterial({color: 0xFF0000, size: 10.0});
280
-
281
- //点オブジェクトの生成
282
-
283
- var particles = new THREE.ParticleSystem(geometry,material);
284
-
285
- //点オブジェクトのシーンへの追加
286
-
287
- scene.add(particles);
288
-
289
-
290
-
291
-
292
-
293
-
294
-
295
- render();
296
-
297
-
298
-
299
- function render() {
300
-
301
- controls.update();
302
-
303
- requestAnimationFrame(render);
304
-
305
- renderer.render(scene, camera);
306
-
307
- }
308
-
309
- }
310
-
311
- window.onload = init
312
-
313
- </script>
314
-
315
- </body>
316
-
317
- </html>
318
-
319
-
320
-
321
- ```
322
-
323
-
324
-
325
325
 
326
326
 
327
327
 

3

記載ミス

2019/07/22 09:59

投稿

aiai8976
aiai8976

スコア112

test CHANGED
@@ -1 +1 @@
1
- Uncaught (in promise) ReferenceError: m is not defined at init
1
+ Uncaught (in promise) TypeError: Cannot convert undefined or null to object at Function.keys (<a
test CHANGED
@@ -18,9 +18,17 @@
18
18
 
19
19
  ```
20
20
 
21
- Uncaught (in promise) ReferenceError: m is not defined
21
+ Uncaught (in promise) TypeError: Cannot convert undefined or null to object
22
+
22
-
23
+ at Function.keys (<anonymous>)
24
+
25
+ at ac.updateMorphTargets (three.min.js:672)
26
+
27
+ at new ac (three.min.js:216)
28
+
29
+ at new l.ParticleSystem (three.min.js:980)
30
+
23
- at init
31
+ at init (test.html:121)
24
32
 
25
33
  ```
26
34
 

2

記載ミス

2019/07/21 06:04

投稿

aiai8976
aiai8976

スコア112

test CHANGED
@@ -1 +1 @@
1
- Uncaught (in promise) TypeError: Cannot convert undefined or null to object at Function.keys (<a
1
+ Uncaught (in promise) ReferenceError: m is not defined at init
test CHANGED
@@ -18,17 +18,9 @@
18
18
 
19
19
  ```
20
20
 
21
- Uncaught (in promise) TypeError: Cannot convert undefined or null to object
21
+ Uncaught (in promise) ReferenceError: m is not defined
22
-
23
- at Function.keys (<anonymous>)
22
+
24
-
25
- at ac.updateMorphTargets (three.min.js:672)
26
-
27
- at new ac (three.min.js:216)
28
-
29
- at new l.ParticleSystem (three.min.js:980)
30
-
31
- at init (test.html:121)
23
+ at init
32
24
 
33
25
  ```
34
26
 

1

記載ミス

2019/07/21 06:03

投稿

aiai8976
aiai8976

スコア112

test CHANGED
File without changes
test CHANGED
@@ -322,11 +322,7 @@
322
322
 
323
323
 
324
324
 
325
- ### 試したこと
325
+
326
-
327
-
328
-
329
- ここに問題に対して試したことを記載してください。
330
326
 
331
327
 
332
328
 
@@ -334,4 +330,4 @@
334
330
 
335
331
 
336
332
 
337
- ここにより詳細な情報を記載してください。
333
+ ブラウザ:chrome