質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
CSV

CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

Q&A

1回答

1317閲覧

Uncaught (in promise) TypeError: Cannot convert undefined or null to object at Function.keys (<a

aiai8976

総合スコア112

CSV

CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

0グッド

0クリップ

投稿2019/07/21 05:05

編集2019/07/22 09:59

前提・実現したいこと

csvファイルから距離と角度を非同期で読み取り、それらの値から座標を求めてthree.js上に点を打ちたいと考えています。
しかし、以下のようなエラーが発生して黒い画面上に何も表示されません。
alert()を使って配列disとrotに正確な値が入っていること自体は確認できているので、余計わからない状態です。
解決策があればご指導お願いいたします。

発生している問題・エラーメッセージ

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 (test.html:121) ```a ### 該当のソースコード ```ここに言語名を入力 <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_new2.csv", false); // アクセスするファイルを指定、falseは非同期処理 //受信が成功した時に呼び出されるイベント 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 result1 = []; // 最終的な二次元配列を入れるための配列 var result2 = []; var dis=[]; var rot=[]; var tmp = str.split("\n"); // 改行を区切り文字として行を要素とした配列を生成 // 各行ごとにカンマで区切った文字列を要素とした二次元配列を生成 for(var i=0;i<tmp.length;++i){ var temp=[]; temp= tmp[i].split(','); result1[i]=temp[0]; result2[i]=temp[1]; //dis[i]=result[i][0]; //rot[i]=result[i][1]; } var result=result1.concat(result2); //return dis,rot; 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 a=[]; var dis=[]; var rot=[]; //dis,rot = await getCSV(); a = await getCSV(); dis=a.slice(0,2000); rot=a.slice(2001,4000); alert(dis[0]); alert(rot[0]); //alert(dis); //alert(rot); // 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); // } for(var i=0;i<2000;i++){ var x=(dis[i] * Math.cos( rot[i] * (Math.PI / 180) ))/2; var y=(dis[i] * Math.sin( rot[i] * (Math.PI / 180) ))/2; //alert(x); //alert(y); geometry.vertices[i]= new THREE.Vector3(x,0,y); } //材質オブジェクトの宣言と生成 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/ツールのバージョンなど)

ブラウザ:chrome

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

Three.jsのr105特有のバグらしいです。

バージョンを下げるか上げるかすると解消するかと思われます。

投稿2019/10/19 05:47

Sora513

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問