質問編集履歴

質問の解答

2019/07/12 07:19

投稿

aiai8976

スコア112

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -54,6 +54,30 @@
+非同期処理の場合のエラーは以下のようになっています。
+```
+three.min.js:672 Uncaught (in promise) TypeError: Cannot convert undefined or null to object
+    at Function.keys (<anonymous>)
+    at ac.updateMorphTargets (three.min.js:672)
+    at new ac (three.min.js:216)
+    at new l.ParticleSystem (three.min.js:980)
+    at init (layout.html:87)
+```
 ### 該当のソースコード
 sample.html
@@ -266,6 +290,224 @@
+非同期処理ver
+```
+<html>
+<head>
+    <script type="text/javascript" src="three.js-master/build/three.min.js"></script>
+    <script type="text/javascript" src="js/OrbitControls.js"></script>
+</head>
+<body>
+    <div id="WebGL-area"></div>
+    <script type="text/javascript">
+    function getCSV() {
+      //promiseを使うことで簡潔に記述できる
+      return new Promise((resolve, reject) => { //resolveまたはrejectの結果を返す
+        var req = new XMLHttpRequest(); // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成、サーバと非同期通信するためのAPI
+        req.open("get", "test.csv", true); // アクセスするファイルを指定
+        //受信が成功した時に呼び出されるイベント
+        req.onload = () => {
+          //通信が正常に終了したかを確認する
+          if (req.readyState === 4 && req.status === 200) {
+            resolve(convertCSVtoArray(req.responseText));
+          } else {
+            alert(req.status);
+            reject(new Error(req.statusText));
+          }
+        };
+        //受信が失敗した時に呼び出されるイベント
+        req.onerror = () => {
+          reject(new Error(req.statusText));
+        };
+        req.send(null); // HTTPリクエストの発行
+      });
+    }
+    // 読み込んだCSVデータを二次元配列に変換する関数convertCSVtoArray()の定義
+    function convertCSVtoArray(str){ // 読み込んだCSVデータが文字列として渡される
+      var result = []; // 最終的な二次元配列を入れるための配列
+      var tmp = str.split("\n"); // 改行を区切り文字として行を要素とした配列を生成
+      // 各行ごとにカンマで区切った文字列を要素とした二次元配列を生成
+      for(var i=0;i<tmp.length;++i){
+          result[i] = tmp[i].split(',');
+      }
+      return result;
+    }
+    async function init() {
+        var scene = new THREE.Scene();
+        var renderer = new THREE.WebGLRenderer();
+        renderer.setSize(900, 600);
+        document.getElementById("WebGL-area").appendChild(renderer.domElement);
+        var camera = new THREE.PerspectiveCamera(45, 1.5, 0.1, 1000);
+        camera.position.set(30, 45, 30);
+        camera.lookAt(scene.position);
+        var controls = new THREE.OrbitControls(camera);
+        controls.autoRotate = true; //自動周回
+        // 座標軸を表示
+        var axes = new THREE.AxisHelper(100);
+        scene.add(axes);
+        //形状オブジェクトの宣言と生成
+        var geometry= new THREE.Geometry();
+        var data=[];
+        data = await getCSV();
+        for(var i=0;i<1000;i++){
+          geometry.vertices[i]= new THREE.Vector3((data[i][0] * Math.cos( data[i][1] * (Math.PI / 180) ))/2,
+                                                    0,
+                                                    (data[i][0] * Math.sin( data[i][1] * (Math.PI / 180) ))/2);
+        }
+        //材質オブジェクトの宣言と生成
+        var material=new THREE.ParticleBasicMaterial({color: 0xFF0000, size: 10.0});
+        //点オブジェクトの生成
+        var particles = new THREE.ParticleSystem(geometry,material);
+        //点オブジェクトのシーンへの追加
+        scene.add(particles);
+        render();
+        function render() {
+            controls.update();
+            requestAnimationFrame(render);
+            renderer.render(scene, camera);
+        }
+    }
+      window.onload = init
+    </script>
+</body>
+</html>
+```
 ### 補足情報（FW/ツールのバージョンなど）

記載ミス

2019/07/12 07:18

投稿

aiai8976

スコア112

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -18,7 +18,7 @@
 つまり渡すところでエラーが起きているみたいです。
-多次元配列の渡し方は調べてみてもなかなかヒットしません。
+javascriptの多次元配列の渡し方は調べてみてもなかなかヒットしません。
 お分かりの方いましたら回答お願いいたします。

記載ミス

2019/07/12 06:37

投稿

aiai8976

スコア112

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -8,6 +8,18 @@
 受け渡しで何かミスがあるのでしょうか。
+getCSV()でreturnする前のresultの中身をアラートで確認したところ、ちゃんと値が入っていました。
+しかし、この返り値を受け取るdata配列をその直後にalertで確かめてみると中身がありませんでした。
+つまり渡すところでエラーが起きているみたいです。
+多次元配列の渡し方は調べてみてもなかなかヒットしません。
 お分かりの方いましたら回答お願いいたします。