glTF

Threejs(Java script)

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

やりたいことThreejsやMicrosoftが推奨されているglTF(.gltf)ファイル、.binファイル、テクスチャファイルで分割された３DファイルをThreejsを簡単に読み込みたい。Blenderでの保存方法は以下のページ環境Threejs：　r150Chrome：　111.0.5563.65読み込みと表示読み込みと表示は.glbと同じコードで読み込めます。loadObjects(scene,"./dice.glb");上記で指定している読み込みファイルを指定の.gltfに変更します。.gltfファイルを保存する際に同時に作成される.binファイルとテクスチャファイルはソースコードの...
2023.05.15
Threejs(Java script)
3D

glTFファイルを直接編集する。(Blender)

やりたいことi以下のページで作成したgltTF Separateの.glTFファイルを直接編集します。テキスト(JSON)として編集gltTF Separateの.glTFファイルはJSONフォーマットのためテキストファイルとして編集ができます。Blenderで日本語を使用すると（オブジェクト名、マテリアル名など）、.glTFファイル内ではデコードされます。編集はできますが、対象の設定を探すのを楽にしたい場合は英語を使用しておいたほうが便利です。テクスチャの変更テクスチャは以下のように宣言されます。"images" : [ { "mimeType" : "image/png", "name" ...
2023.05.13
3D
Blender

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

やりたいことBlenderでglTF 2.0でエクスポートする際に単一ファイルでなく、テクスチャを外部ファイルとして保存する。環境Blender：3.4.1フォーマットの変更左上の”ファイル”　→　”エクスポート”　→　glTF 2.0(.glb/.gltf)　からエクスポートダイアログを表示します。表示されるダイアログの右側のフォーマットをクリックします。glTF Separate(.gltf + .bin + テクスチャ)を選択して保存します。結果選択したフォルダに、指定したファイル名.gltf、指定したファイル名.bin、テクスチャファイル（画像ファイル）が保存されます。例）3D.glt...
2023.05.13
Blender
Blender

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

やりたいことBlenderで作成した3DオブジェクトをThreejsで読込、表示します。関係する複数の記事が書きましたのでまとめます。（随時更新）保存　→　読込/表示（基本）Threejsで読込、表示するにはglTFでエクスポートします。Blenderで保存単一ファイル(.glb)でエクスポートする方法分割ファイル(.gltf)でエクスポートする方法(.bin、テクスチャファイルが別で保存されます)Threejsで読込/表示圧縮したglTFの扱いBlenderで圧縮glTFでエクスポートすることができますが、Threejs側の対応も必要です。.gltfファイルも同様の対応で読み込み可能です。圧...
2023.04.15
BlenderThreejs(Java script)
Threejs(Java script)

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

やりたいこと以下の実装を行ったときにローカルでは動作するが、WEBにUplodaすると動作しない際の修正方法ローカルで動作するJavascriptをConohaにUploadすると以下のようなエラーが表示され読み込まれませんでした。4f251973-f58e-42c3-b428-9252c0610ca9:39 failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected 97 bytes, fell off end @+1874f251973-f58e-42c3-b428-925...
2023.04.08
Threejs(Java script)
Threejs(Java script)

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

やりたいこと圧縮されたglTF(.glb)ファイルをThreejsを読み込む。圧縮方法は↓環境Threejs：　r150Chrome：　111.0.5563.65準備圧縮なしのソースおよび環境の準備は↓の記事を参考にしてください。DRACOLoaderを用いた読み込みフォルダ構成フォルダ構成は以下の通りです。dice‐c.glbが読み込み対象の圧縮されたglTFファイルです。DRACOLoader.jsファイル、dracoフォルダを追加しています。ともにThreejsに含まれるファイルです。ROOT| dice-c.glb| index.html|\---js +---libs | | 3d....
2023.04.06
Threejs(Java script)
Blender

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

やりたいこと下の記事で紹介した通り、BlenderでglTF(.glb)ファイルを保存することができますが、形状が複雑になればファイルサイズは大きくなりWEＢで読み込む際などにロード時間が遅くなります。ここでは保存されるglTF(.glb)ファイルのサイズを小さくする方法を紹介します。環境Blender：3.4.1メッシュのエクスポート設定の変更左上の”ファイル”　→　”エクスポート”　→　glTF 2.0(.glb/.gltf)　からエクスポートダイアログを表示します。保存ダイアログの”メッシュ”グループ内の”ノーマル”のチェックを外して保存します。以上の設定変更で保存サイズを小さくすること...
2023.04.06
Blender
Blender

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

やりたいことMicrosoftやThreejsなどが推奨しているglTF(.glb)ファイルを作成したい。Threejsでのロード方法は↓環境Blender：3.4.1ペイント ３Dで出力Window10ではいつの間にか入っていた、Windows11では標準では非搭載になったペイント ３Dではglbファイルで出力できます。保存方法左上の”メニュー”　→　”名前を付けて保存”　→　”３D　モデル”　からglbファイルが保存できます。フォーマットはglbと3MFから選択できます。ちなみにペイント 3Dには豊富なライブラリが含まれているのですが、ライセンス（著作権）が明確でなく限られた状況で以外では...
2023.03.21
BlenderWindows
Threejs(Java script)

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

やりたいことThreejsやMicrosoftが推奨されているglTF(.glb)ファイルをThreejsを簡単に読み込みたい。環境Threejs：　r150Chrome：　111.0.5563.65準備モジュールを読み込めるようにするTypeがモジュールのJavaScriptを使用します。ローカルで使用する場合はChromeを特別な起動方法で起動する必要があります。通常のChromeはTypeがモジュールのJavaScriptを読み込むことができません。Chromeを起動時に以下の引数を追加します。 --allow-file-access-from-filesChromeのショートカットを作...
2023.03.21
Threejs(Java script)