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

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

こんにちは!

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

 

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

取り方の記録です。


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

読み砕くのに時間がかかります( ^ω^)・・・

 

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

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

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

 

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.

 

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

 

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

 

log結果

 

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


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

mergeVertices を使います。

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

 

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

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

 

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

難しい・・・( ゚Д゚)

 

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

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

難しいけど楽しい!!

 

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

 

 

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

<あわせて読みたい>