[name]

3Dモデルはたくさんのファイル形式で利用可能で、それぞれに目的があり、複雑さも様々です。 three.jsは様々なloaderを提供していますが、適切な形式とワークフローを選択することで、パフォーマンスを改善することができます。うまく動作させるのが難しいフォーマットや、リアルタイムでの体験に適さないフォーマットもあり、中にはまったくサポートされていないフォーマットもあります。

このガイドでは、ほとんどのユーザにおすすめのワークフローと、予期しないことが発生したときに何を試してみればよいかを紹介します。

始める前に

もしthree.jsをローカルサーバで動かすのが初めてなら、 [link:#manual/introduction/How-to-run-things-locally how to run things locally]を見てみてください。 3Dモデルを表示する際の多くの一般的なエラーはファイルを正しく配置することで防ぐことができます。

Loading

ごく一部のローダ(例えば、[page:ObjectLoader])はデフォルトでthree.jsに入っています。ほかのものは、ユーザがそれぞれ自分のアプリに加える必要があります。


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

ローダをimportした時点で、シーンにモデルを追加できるようになります。文法はローダによって異なります。異なるフォーマットを使う場合は、そのローダのドキュメントやサンプルを確認してください。glTFの場合、グローバルスクリプトでは以下のように使用します。


		const loader = new GLTFLoader();

		loader.load( 'path/to/model.glb', function ( gltf ) {

			scene.add( gltf.scene );

		}, undefined, function ( error ) {

			console.error( error );

		} );

より詳細な機能について知りたい場合は[page:GLTFLoader GLTFLoader documentation]を見てください。

Troubleshooting

何時間もかけて傑作をモデリングしたのに、webpageに読み込むと、なんと！😭 歪んでいたり、色がおかしかったり、表示されなかったりすることがあります。そういったときにはトラブルシューティングを始めましょう。

JavaScriptコンソールでエラーが発生していないか確認し、.load() を呼び出す際にonErrorコールバックを使用して結果をログに記録していることを確認してください
モデルを別のアプリケーションで見てみてください。 glTFではthree.js と babylon.jsでドラックアンドドロップでviewerが利用できます。一つ以上のアプリケーションでモデルが正しく表示された場合、three.jsにバグを報告してください。モデルがどのアプリケーションでも表示できない場合、モデルを作成する際に使ったアプリにバグを報告することを強くお勧めします。
モデルを1000倍にスケールアップしたり、スケールダウンしたりしてみてください。多くのモデルはスケールが異なります。大きなモデルだと、カメラがモデルの中に入ってしまって見えなくなっていることがあります。
光源を追加して配置してみてください。暗闇の中にモデルが隠れている可能性があります。
ネットワークタブで失敗しているテクスチャのリクエスト(例えば、C:\\Path\To\Model\texture.jpg)を探してみてください。見つかったら代わりに images/texture.jpg のようなモデルへの相対パスを使ってください。これはテキストエディタでモデルファイルを編集する必要があるかもしれません。

助けを求める(Asking for help)

上記のトラブルシューティングのプロセスを一通りやってもまだ動かない場合、正しいやり方で助けを求めることが早期の解決につながります。three.js forumに質問を投稿して、可能であれば自分のモデル(もしくは同じ問題を持つよりシンプルなモデル)を利用可能な形式で添付してください。他の人が問題を迅速に再現できるように、十分な情報を含めてください。