見出し画像

three.js 入門 (7) - 3Dモデルの読み込み

npaka

以下の記事が面白かったので、ざっくり翻訳しました。

・Loading 3D models – three.js docs

前回

1. 3Dモデルの読み込み

「three.js」は多くの3Dモデルのローダーを提供しますが、適切なフォーマットとワークフローを選択することで、後の時間とフラストレーションを節約できます。一部の形式は、操作が困難か、リアルタイムには非効率的であるか、現時点では完全にサポートされていません。

2. 推奨されるワークフロー

可能な場合は、「glTF」(GL Transmission Format)を使用することをお勧めします。 この形式の「.GLB」と「.GLTF」の両方が十分にサポートされています。 「glTF」はランタイムアセットの配信に重点を置いているため、送信がコンパクトで読み込みが高速です。 機能には、メッシュ、マテリアル、テクスチャ、スキン、スケルトン、モーフターゲット、アニメーション、ライト、カメラが含まれます。

パブリックドメインの「glTF」は「Sketchfab」などのサイトで入手できます。または、様々なツールにglTFエクスポートが含まれています。

・Blender (the Blender Foundation)
・Substance Painter (Allegorithmic)
・Modo (Foundry)
・Toolbag (Marmoset)
・Houdini (SideFX)
・Cinema 4D (MAXON)
・COLLADA2GLTF (Khronos Group)
・FBX2GLTF (Facebook)
・OBJ2GLTF (Analytical Graphics Inc)
・…and many more

使用するツールがglTFをサポートしていない場合は、作成者にglTFエクスポートを要求するか、glTFロードマップスレッドに投稿することを検討してください。

glTFがオプションでない場合は、FBX、OBJ、COLLADAなどの一般的な形式も利用でき、定期的に保守されます。

3. 3Dモデルの読み込み

「three.js」には、デフォルトで少数のローダー（ObjectLoaderなど）のみが含まれています。その他のローダーは、個別に追加する必要があります。

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

ローダーをインポートすると、シーンにモデルを追加する準備が整います。 構文はローダーによって異なります。別の形式を使用する場合は、そのローダーの例とドキュメントを確認してください。glTFの場合、グローバルスクリプトでの使用法は次のようになります。

const loader = new GLTFLoader();

loader.load('path/to/model.glb', function (gltf) {
  scene.add(gltf.scene);
}, undefined, function(error) {
  console.error(error);
} );

詳しくは、GLTFLoaderのドキュメントを参照してください。

4. トラブルシューティング

(1) JavaScriptコンソールでエラーをチェックし、.load()を呼び出して結果をログに記録するときにonErrorコールバックを使用したことを確認します。

(2) 別のアプリでモデルを表示します。glTFの場合、ドラッグアンドドロップビューアはthree.jsとbabylon.jsで使用できます。モデルが1つ以上のアプリで正しく表示される場合は、「three.js」に対してバグを報告してください。どのアプリでもモデルを表示できない場合は、モデルの作成に使用したアプリにバグを報告することを強くお勧めします。

(3) モデルを1000倍に拡大または縮小してみてください。多くのモデルは異なる方法で拡大縮小されており、カメラがモデル内にある場合、大きなモデルが表示されない場合があります。

(4) 光源を追加して配置してみてください。 モデルは暗闇に隠されている可能性があります。

(5) C:\\Path\To\Model\texture.jpgのように、ネットワークタブで失敗したテクスチャリクエストを探します。代わりに、images/texture.jpgなど、モデルに関連するパスを使用してください。これには、テキストエディタでモデルファイルを編集する必要がある場合があります。

次回


いいなと思ったら応援しよう！