three.jsで3Dモデル(3dsファイル)の頂点座標を取得したい

前提・実現したいこと

three.jsで、以下のコードにて読み込んだ3Dモデル(3dsファイル)の頂点座標を取得したいです。
どのようにしたら良いのでしょうか？

該当のソースコード

const loader = new THREE.TDSLoader();      
loader.setPath('imgs/');      
loader.load('js/3ds.3ds',  (object) => {        
　scene.add(object);
});

行動規範の内容に同意します

回答2件

ベストアンサー

load が終わった直後の状態であれば、

loader.load('js/3ds.3ds',  (object) => {     

  object.children[0].geometry.vertices

  scene.add(object);
});

このvertices の中で、配列として取得することができます。

投稿2018/09/02 11:11

adrs2002

総合スコア203

Qooooooo

2018/09/02 11:58

回答ありがとうございます。 object.children[0].geometryにverticesプロパティがなかったので object.children[0].geometry.attributes.position.arrayで座標を取得することができたのですが、 0: -1.3196492195129395 1: 0.1254320740699768 2: -1.974513053894043 3: -0.21614427864551544 4: 0.01967964693903923 5: 2.7419137954711914 6: -1.885996699333191 7: 0.1825285255908966 8: 0.14147980511188507 9: -0.7087119817733765 10: 0.06499069184064865 11: -2.407533884048462 のような座標でした。理想はnew THREE.SphereGeometry等でジオメトリを作成した後、sphere.verticesで得られるようなx、y、zプロパティで一つの座標を表す形なのですが、どのようにしたらx、y、z座標を取得できるのでしょうか？ご教示いただけると幸いです。

adrs2002

2018/09/02 12:28 編集

失礼しました、新しめのThree.jsだと、上記の方法では取れませんでした。 attributes.position.array　までたどり着けたのであれば、配列で先頭から x, y, z の順番の繰り返しで入っているだけですので、 ``` const poses = []; for(let i =0; i < object.children[0].geometry.attributes.position.array.length;i+=3){ poses.push(new THREE.Vector3(object.children[0].geometry.attributes.position.array[i + 0], object.children[0].geometry.attributes.position.array[i + 1], object.children[0].geometry.attributes.position.array[i + 2])); } // posesにVector3の形で入っているはず ``` こんな感じでループさせると、目的のものが取得できると思います（面倒ですが…

Qooooooo

2018/09/03 06:26

ありがとうございます！一応座標格納はできたのですが、元々のモデルの頂点座標とは違ってしまっているような気がします。無数のパーティクルを3Dモデルの頂点座標に一つずつ置いていくというのをやりたかったのですが、中心辺りにギュッと固められたようになってしまうのです（形もモデルとは全然違いました）。質問の趣旨とは離れてしまうので、改めて質問し直すことにします。よろしければまたお願いします。

Qooooooo

2018/09/03 07:02

すみません、OrbitControlsを入れて拡大したらモデル通りの形になっていました。お騒がせしました。

行動規範の内容に同意します

バイナリ―形式だと扱いづらいのでJSONに変換します。
コンバーターは検索すれば出てくるので、用途に合うものを使ってください。
Online 3D Converter
convert-to-threejs

投稿2018/08/30 16:10

shozi3

総合スコア691

Qooooooo

2018/09/02 11:29

返事が遅くなってしまいすみません。調べたところ、blenderのエキスポート機能で作成したjsonファイルでないといけないらしいので、その方法で作成したのですが、うまく読み込まれません。紹介していただいたコンバーターでも無理でした。 //////////////////////////////////////////////////////////////////////////////////////////////// <html> <head> <meta charset="utf-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script> <script src="js/OrbitControls.js"></script> <script src="js/TDSLoader.js"></script> <script> // ページの読み込みを待つ window.addEventListener('load', init); function init() { // サイズを指定 const width = 960; const height = 540; // レンダラーを作成 const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#myCanvas'), }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height); // シーンを作成 const scene = new THREE.Scene(); // カメラを作成 const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000); // カメラの初期座標を設定 camera.position.set(0, 0, 5); // カメラコントローラーを作成 const controls = new THREE.OrbitControls(camera); // 平行光源を作成 const directionalLight = new THREE.DirectionalLight(0xFFFFFF); directionalLight.position.set(1, 1, 1); scene.add(directionalLight); // 環境光を追加 const ambientLight = new THREE.AmbientLight(0xFFFFFF); scene.add(ambientLight); var loader = new THREE.JSONLoader(); var json = 'js/egg.json'; // jsonパスの指定 loader.load(json, function(geometry, materials) { var faceMaterial = new THREE.MeshFaceMaterial(materials); var materialColor = 0xff8700; // マテリアルの色 faceMaterial.materials[0].color = new THREE.Color(materialColor); // マテリアルの色の設定 faceMaterial.materials[0].wireframe = true; // ワイヤーフレーム表示にする mesh = new THREE.Mesh(geometry, faceMaterial); mesh.position.set(0, 0, 0); // 位置の設定 mesh.scale.set(10, 10, 10); // スケールの設定 scene.add(mesh); // シーンへメッシュの追加 }); tick(); // 毎フレーム時に実行されるループイベントです function tick() { // レンダリング renderer.render(scene, camera); requestAnimationFrame(tick); } } </script> </head> <body> <canvas id="myCanvas"></canvas> </body> </html> /////////////////////////////////////////////////////////////////////////////////////// 後、jsonに変換して見つけた頂点座標が、three.jsのgeometry.verticesで得られる頂点座標のようにx、y、zプロパティでアクセスできる形ではなかったのですが、一つの頂点座標のx、y、z座標を取得するにはどのようにしたらよいのでしょうか？何度も質問すみません。ご教示いただけると幸いです。

shozi3

2018/09/02 20:55

質問に「(3dsファイル)の～」とあったので、このような回答をしました。 load後に取得したいということであれば、adrs2002 さんの回答にある方法で良いんじゃないでしょうか。

Qooooooo

2018/09/03 06:20

ありがとうございます！

行動規範の内容に同意します

あなたの回答