Blenderで作成した3DオブジェクトをThreejsで読込、表示するまとめ

やりたいこと

Blenderで作成した3DオブジェクトをThreejsで読込、表示します。

関係する複数の記事が書きましたのでまとめます。（随時更新）

保存　→　読込/表示（基本）

Threejsで読込、表示するにはglTFでエクスポートします。

Blenderで保存

単一ファイル(.glb)でエクスポートする方法

glTF(.glb)ファイルを無料で作成する

やりたいことMicrosoftやThreejsなどが推奨しているglTF(.glb)ファイルを作成したい。Threejsでのロード方法は↓環境Blender：3.4.1ペイント ３Dで出...

blog.marunokan.com

2023.03.21

分割ファイル(.gltf)でエクスポートする方法(.bin、テクスチャファイルが別で保存されます)

glTFファイル保存時にテクスチャを外部ファイルとして保存する(Blender)

やりたいことBlenderでglTF 2.0でエクスポートする際に単一ファイルでなく、テクスチャを外部ファイルとして保存する。環境Blender：3.4.1フォーマットの変更左上の”ファイル”　→　...

blog.marunokan.com

2023.05.13

Threejsで読込/表示

glTF(.glb)ファイルをLoadして表示(Threejs)

やりたいことThreejsやMicrosoftが推奨されているglTF(.glb)ファイルをThreejsを簡単に読み込みたい。環境Threejs：　r150Chrome：　111.0.5563.65...

blog.marunokan.com

2023.03.21

glTF(.gltf)ファイルをLoadして表示(Threejs)

やりたいことThreejsやMicrosoftが推奨されているglTF(.gltf)ファイル、.binファイル、テクスチャファイルで分割された３DファイルをThreejsを簡単に読み込みたい。Blenderでの保存方法は以...

blog.marunokan.com

2023.05.15

圧縮したglTFの扱い

Blenderで圧縮glTFでエクスポートすることができますが、Threejs側の対応も必要です。

.gltfファイルも同様の対応で読み込み可能です。

圧縮ファイルの保存

保存するglTF(.glb)ファイルのファイルサイズを小さくする(Blender)

やりたいこと下の記事で紹介した通り、BlenderでglTF(.glb)ファイルを保存することができますが、形状が複雑になればファイルサイズは大きくなりWEＢで読み込む際などにロード時間が遅くなります。ここでは保存されるg...

blog.marunokan.com

2023.04.06

圧縮ファイルの読込/表示

圧縮されたglTF(.glb)ファイルをLoadして表示(Threejs)

やりたいこと圧縮されたglTF(.glb)ファイルをThreejsを読み込む。圧縮方法は↓環境Threejs：　r150Chrome：　111.0.5563.65準備...

blog.marunokan.com

2023.04.06

Webにアップロードすると動作しないときの対応

DRACOLoaderをWebにUploadすると動作しない（DRACOLoaderでwasmを使用しない方法）(Threejs)

やりたいこと以下の実装を行ったときにローカルでは動作するが、WEBにUplodaすると動作しない際の修正方法ローカルで動作するJavascriptをConohaにUploadすると以下のようなエラーが表示され読...

blog.marunokan.com

2023.04.08