Three.jsのジオメトリの頂点を取得する

こんにちは！

プログラム学習中のdynaです。

この記事は、「Three.jsのジオメトリの頂点の取り方って、どうやるの？」と思ったので、

取り方の記録です。

公式サイトさんにもあるのですが、自分の読解力が低いからか、

読み砕くのに時間がかかります（　＾ω＾）・・・

ということで、記録メモです。

※Three.jsのバージョンはr126を使用しています。

旧バージョンだとジオメトリの頂点データへのアクセスの方法が異なっているみたいです。

1. geometry.attributes.positionを使う

geometry.attributes.positionを使う

まずはこの辺を参考にさせていただきました。

https://qiita.com/sakusan393/items/1fbbf89a4a06eb9f504c

https://threejs.org/docs/#manual/en/introduction/How-to-update-things

今回はボックスのジオメトリで頂点の取り方を試してみます。

See the Pen three.js Get vertices practice　2 by dyna (@sakudyna) on CodePen.

コードの関係ある部分だけを抜粋します。


//Geometryを生成
const geometry = new THREE.BoxGeometry(10,10,10);
const material = new THREE.MeshNormalMaterial({wireframe: true});
const box = new THREE.Mesh(geometry,material);
scene.add(box);


// ジオメトリの頂点座標の配列
const attribute = geometry.attributes.position;

for (let i = 0; i < attribute.count; i++) {
    // 立方体の頂点座標を取得
    const x = attribute.getX(i);
    const y = attribute.getY(i);
    const z = attribute.getZ(i);
    console.log(x,y,z);//出力結果の確認（5 5 5・・・）
}

//Geometryを生成

const geometry = new THREE.BoxGeometry(10,10,10);

const material = new THREE.MeshNormalMaterial({wireframe: true});

const box = new THREE.Mesh(geometry,material);

scene.add(box);

// ジオメトリの頂点座標の配列

const attribute = geometry.attributes.position;

for (let i = 0; i < attribute.count; i++) {

// 立方体の頂点座標を取得

const x = attribute.getX(i);

const y = attribute.getY(i);

const z = attribute.getZ(i);

console.log(x,y,z);//出力結果の確認（5 5 5・・・）

}

こんな感じにすると、console.logで以下のように取れます。

とりあえず頂点取れました。

重複した点を削除したいときは、

mergeVertices　を使います。

先ほどの参考サイトを元に記載してみます。

BufferGeometryUtilsをモジュールで読み込みします。

モジュールを読み込んだら、引数はジオメトリを渡せば表示になるようです。


 const merge = BufferGeometryUtils.mergeVertices(geometry);

const merge = BufferGeometryUtils.mergeVertices(geometry);

が・・・・いまだ使いこなせないです。

難しい・・・( ﾟДﾟ)

直近の目標は、↑を使いこなして頂点座標を動かして遊んでみたいと思います。

あとはfbx読み込んだオブジェクトの頂点をとってみたいと思います。

難しいけど楽しい！！

※他、「こんなのも面白いよ」とか「こうするといいよ」というのがあれば、お問い合わせからお待ちしています～～～

ここまで読んで下さりありがとうございます。

<あわせて読みたい>

Three.jsでfbxファイルを読み込み、3Dアニメーションをする

three.jsで3Dのアニメーションを読み込んでみました。

Three.jsでジオメトリを頂点で表示してみる(three.pointsを作成）

Three.jsでThree.Pointsを使ってジオメトリを頂点で表してみました。奥行きのある形でできました。

<参考にしている本>

リンク