質問編集履歴
3
質問の解答
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -26,6 +26,18 @@
|
|
|
26
26
|
つまり、dataにうまく結果が入っておらず、定義されていないor nullとなっているのではないかと思います。
|
|
27
27
|
|
|
28
28
|
|
|
29
|
+
非同期処理の場合のエラーは以下のようになっています。
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
three.min.js:672 Uncaught (in promise) TypeError: Cannot convert undefined or null to object
|
|
33
|
+
at Function.keys (<anonymous>)
|
|
34
|
+
at ac.updateMorphTargets (three.min.js:672)
|
|
35
|
+
at new ac (three.min.js:216)
|
|
36
|
+
at new l.ParticleSystem (three.min.js:980)
|
|
37
|
+
at init (layout.html:87)
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
|
|
29
41
|
### 該当のソースコード
|
|
30
42
|
sample.html
|
|
31
43
|
```sample.html
|
|
@@ -132,7 +144,116 @@
|
|
|
132
144
|
|
|
133
145
|
```
|
|
134
146
|
|
|
147
|
+
非同期処理ver
|
|
148
|
+
```
|
|
149
|
+
<html>
|
|
150
|
+
<head>
|
|
151
|
+
<script type="text/javascript" src="three.js-master/build/three.min.js"></script>
|
|
152
|
+
<script type="text/javascript" src="js/OrbitControls.js"></script>
|
|
153
|
+
</head>
|
|
135
154
|
|
|
155
|
+
<body>
|
|
156
|
+
<div id="WebGL-area"></div>
|
|
157
|
+
|
|
158
|
+
<script type="text/javascript">
|
|
159
|
+
function getCSV() {
|
|
160
|
+
//promiseを使うことで簡潔に記述できる
|
|
161
|
+
return new Promise((resolve, reject) => { //resolveまたはrejectの結果を返す
|
|
162
|
+
var req = new XMLHttpRequest(); // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成、サーバと非同期通信するためのAPI
|
|
163
|
+
req.open("get", "test.csv", true); // アクセスするファイルを指定
|
|
164
|
+
//受信が成功した時に呼び出されるイベント
|
|
165
|
+
req.onload = () => {
|
|
166
|
+
//通信が正常に終了したかを確認する
|
|
167
|
+
if (req.readyState === 4 && req.status === 200) {
|
|
168
|
+
resolve(convertCSVtoArray(req.responseText));
|
|
169
|
+
} else {
|
|
170
|
+
alert(req.status);
|
|
171
|
+
reject(new Error(req.statusText));
|
|
172
|
+
}
|
|
173
|
+
};
|
|
174
|
+
//受信が失敗した時に呼び出されるイベント
|
|
175
|
+
req.onerror = () => {
|
|
176
|
+
reject(new Error(req.statusText));
|
|
177
|
+
};
|
|
178
|
+
req.send(null); // HTTPリクエストの発行
|
|
179
|
+
});
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
// 読み込んだCSVデータを二次元配列に変換する関数convertCSVtoArray()の定義
|
|
184
|
+
function convertCSVtoArray(str){ // 読み込んだCSVデータが文字列として渡される
|
|
185
|
+
var result = []; // 最終的な二次元配列を入れるための配列
|
|
186
|
+
var tmp = str.split("\n"); // 改行を区切り文字として行を要素とした配列を生成
|
|
187
|
+
|
|
188
|
+
// 各行ごとにカンマで区切った文字列を要素とした二次元配列を生成
|
|
189
|
+
for(var i=0;i<tmp.length;++i){
|
|
190
|
+
result[i] = tmp[i].split(',');
|
|
191
|
+
}
|
|
192
|
+
return result;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
async function init() {
|
|
196
|
+
var scene = new THREE.Scene();
|
|
197
|
+
|
|
198
|
+
var renderer = new THREE.WebGLRenderer();
|
|
199
|
+
renderer.setSize(900, 600);
|
|
200
|
+
|
|
201
|
+
document.getElementById("WebGL-area").appendChild(renderer.domElement);
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
var camera = new THREE.PerspectiveCamera(45, 1.5, 0.1, 1000);
|
|
207
|
+
camera.position.set(30, 45, 30);
|
|
208
|
+
camera.lookAt(scene.position);
|
|
209
|
+
|
|
210
|
+
var controls = new THREE.OrbitControls(camera);
|
|
211
|
+
controls.autoRotate = true; //自動周回
|
|
212
|
+
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
|
|
216
|
+
|
|
217
|
+
// 座標軸を表示
|
|
218
|
+
var axes = new THREE.AxisHelper(100);
|
|
219
|
+
scene.add(axes);
|
|
220
|
+
|
|
221
|
+
//形状オブジェクトの宣言と生成
|
|
222
|
+
var geometry= new THREE.Geometry();
|
|
223
|
+
var data=[];
|
|
224
|
+
data = await getCSV();
|
|
225
|
+
|
|
226
|
+
for(var i=0;i<1000;i++){
|
|
227
|
+
geometry.vertices[i]= new THREE.Vector3((data[i][0] * Math.cos( data[i][1] * (Math.PI / 180) ))/2,
|
|
228
|
+
0,
|
|
229
|
+
(data[i][0] * Math.sin( data[i][1] * (Math.PI / 180) ))/2);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
//材質オブジェクトの宣言と生成
|
|
233
|
+
var material=new THREE.ParticleBasicMaterial({color: 0xFF0000, size: 10.0});
|
|
234
|
+
//点オブジェクトの生成
|
|
235
|
+
var particles = new THREE.ParticleSystem(geometry,material);
|
|
236
|
+
//点オブジェクトのシーンへの追加
|
|
237
|
+
scene.add(particles);
|
|
238
|
+
|
|
239
|
+
|
|
240
|
+
|
|
241
|
+
render();
|
|
242
|
+
|
|
243
|
+
function render() {
|
|
244
|
+
controls.update();
|
|
245
|
+
requestAnimationFrame(render);
|
|
246
|
+
renderer.render(scene, camera);
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
window.onload = init
|
|
250
|
+
</script>
|
|
251
|
+
</body>
|
|
252
|
+
</html>
|
|
253
|
+
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
|
|
136
257
|
### 補足情報（FW/ツールのバージョンなど）
|
|
137
258
|
|
|
138
259
|
ブラウザ:chrom
|
2
記載ミス
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
getCSV()でreturnする前のresultの中身をアラートで確認したところ、ちゃんと値が入っていました。
|
|
9
9
|
しかし、この返り値を受け取るdata配列をその直後にalertで確かめてみると中身がありませんでした。
|
|
10
10
|
つまり渡すところでエラーが起きているみたいです。
|
|
11
|
-
多次元配列の渡し方は調べてみてもなかなかヒットしません。
|
|
11
|
+
javascriptの多次元配列の渡し方は調べてみてもなかなかヒットしません。
|
|
12
12
|
お分かりの方いましたら回答お願いいたします。
|
|
13
13
|
|
|
14
14
|
### 発生している問題・エラーメッセージ
|
1
記載ミス
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
3
3
|
しかしながら、以下のようなエラーが発生しており、どのようにすればいいのかわかりません。
|
|
4
4
|
一応、変数resultに値が入っていないのかと思い、alertで確認したのですが、きちんと値は入っていました。
|
|
5
5
|
受け渡しで何かミスがあるのでしょうか。
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
getCSV()でreturnする前のresultの中身をアラートで確認したところ、ちゃんと値が入っていました。
|
|
9
|
+
しかし、この返り値を受け取るdata配列をその直後にalertで確かめてみると中身がありませんでした。
|
|
10
|
+
つまり渡すところでエラーが起きているみたいです。
|
|
11
|
+
多次元配列の渡し方は調べてみてもなかなかヒットしません。
|
|
6
12
|
お分かりの方いましたら回答お願いいたします。
|
|
7
13
|
|
|
8
14
|
### 発生している問題・エラーメッセージ
|