threejs

読み込んだMMD向けファイル（PMD）をテクスチャ付きでThreejsで読み込めるglbで出力する(Blender)

やりたいことBlenderにてインポートしたMMD向けファイルのモデルをテクスチャ付きThreejsで表示可能なglbで出力します。下の記事の通りglbを出力すると多くのマテリアルはうまくいきます。しかし下の目のようにテクスチャの情報を引き継がないと正しく表示できないものがあります。そのためテクスチャ付きのマテリアルをエクスポートする必要があります。あにまさ氏の初音ミクのモデルを例に進めさせていただきます。マテリアルの修正対象のマテリアルの特定マテリアルを一つ一つ設定を変更して対象のマテリアルを特定します。（例えば色を変え目の色が変わるマテリアルを探します。）今回の例では”材質6”が対象の目の...

2023.08.18

Threejs(Java script)

読み込んだMMD向けファイル（PMD）をThreejsで読み込めるglbで出力する(Blender)

やりたいことBlenderにてインポートしたMMD向けファイルのモデルをThreejsで表示可能なglbで出力します。あにまさ氏の初音ミクのモデルを例に進めさせていただきます。読み込み方法は下を参照。マテリアルの変更PMDファイルをインポートした際にマテリアルにはMMDSharderDevというものが使用されていますがが、これはglbに出力したときに正しくThreejsで表示できません。そのためマテリアルの設定を変更する必要があります。”初音ミク_mesh”を選択します。マテリアルのプロパティを選択します。リストから材質を一つ選択し、”ノードを使用”をクリックし非選択状態にし、ブレンドモードを...

2023.08.18

Blender

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)

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を使用する(Threejs)

やりたいこと当サイトではモジュールを用いたThreejsをベースに紹介していましたが、いまさらながら非モジュールのScriptとモジュールのScriptの差を確認します。ThreejsのExmple/jsフォルダが削除され（著者の勘違いでなければ）、LoaderやExtentionがモジュールでないと使用できなりました。今後モジュール化することが必須に近いと思います。環境Threejs：　r150モジュールで動作させる準備モジュールを読み込めるようにするTypeがモジュールのJavaScriptを使用します。ローカルで使用する場合はChromeを特別な起動方法で起動する必要があります。通常のC...

2023.04.08

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)

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)