three.jsで読込モデルをポイントクラウド表示してみた

ポイントクラス(point cloud)とは・・・

点群 = 点だけで表示すること

3Dモデルの表示方法の1つです。

ここではThree.jsでモデル読込し、
それを ポイントクラウド表示する方法 をまとめました。

ポイントクラウド表示で大事な2つのポイント

まずポイントクラウド表示で大事なことから。

次の2つが重要ポイントです。

1.点表示には THREE.Points を使うこと

複数の点をまとめて表示したい場合・・・

Three.jsには THREE.Points が用意されています。

▼ 公式でのTHREE.Pointsの解説

Constructor
Points( geometry : Geometry, material : Material )
geometry ? (optional) an instance of Geometry or BufferGeometry. Default is a new BufferGeometry.
material ? (optional) a Material. Default is a new PointsMaterial.

引用元 : https://threejs.org/docs/#api/en/objects/Points

コンストラクタにGeometry(面情報、頂点情報、色、etc...)のインスタンスと、PointsMaterial を渡すことで作成できます。また PointsMaterial から点の大きさ、色、見え方なども超可能です。

2.負荷軽減のためにMeshを結合(merge)すること

次に大事なポイントはこれ。

Meshの結合(merge)すること

これは負荷軽減のために絶対すべきですね。

たとえば簡単なMesh結合の例、こんな感じです、

▼ 2つのMeshを結合するコード例

このように Geometry.merge  に対して結合したい geometry  と material  を渡していけばOK。ただし結合させる前に mesh1.updateMatrix()  のような呼び出しが必要です。

実際に読込モデルをポイントクラウド表示してみた

では具体的なポイントクラウド表示について。

ここでは次の場合を想定します。

  1. 適当な3Dモデルを読み込みする
  2. モデルの全Meshを結合したGeometry作成
  3. そこからポイントクラウド生成&表示

読込モデルの形式は何でも構いません。

ここではGLTF形式を読込したことにします。

 

実際に書いてみたコードがこちら。

▼ 読込モデルをポイントクラウド表示するコード例

何をしているかはコメントを参照。

全体の大きな流れとして・・・

  1. 適当なモデルを読み込み
    この例ではGLTFLoaderを使ってGLTFモデルを読み込みしている。ただし読込モデルのフォーマットは STL、PLY、OBJ、etc...なんでもOK。
  2. 全Meshを1つのGeometryに結合
    コードの15~25行目までの部分。パフォーマンス向上のために Mesh または SkinnedMesh を1つのGeometryに結合している。
  3. ポイントクラウドを生成
    コードの26~36行目までの部分。THREE.PointsMaterialから点の大きさ・色・減衰の有無などの設定が可能、あとはSceneに追加するだけ

こういう流れですね。

 

ポイントクラウド表示の結果はこうなりました。

▼ ポイントクラウド表示する前

ポイントクラウド表示する前の3Dモデル

▼ ポイントクラウド表示した後

ポイントクラウド表示された3Dモデル

ポイントクラウドの表示切替も簡単です。

 

ただし、このコードは完全ではありません。

特定モデルだと点表示がおかしくなるですよね・・・

未対応のモデル例 : 2CylinderEngine.glb

もし原因が分かる方がいれば、教えてください (;一_一)

Three.js(WebGL)関連でのその他記事

Three.js関連では、こういう記事も書いてます。

よければご覧ください。

以上、three.jsでのモデルのポイントクラウド表示でした。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください