3D

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

複雑なチューブ状のメッシュを作成する(Blender)

やりたいこと複雑なチューブ状のメッシュを作成環境Blender：3.4.1OS：Windows　11カーブから作成カーブを作成カーブを作成します。カーブはいくつかの作成方法はありますがどの方法でも問題ありません。カーブをチューブ状にする３D上のカーブを選択した状態で、オブジェクトデータのプロパティを選択し、”ジオメトリ”グループ　→　”ベベル”グループ　→　”深度”を変更します。深度を変更することで３D上のカーブがチューブ状に表示されるようになります。深度の値が大きくするとチューブが太くなります。この状態だとパイプのようにう端が埋まっていません。端を埋めるには”深度”下にある”端をフィル”にチ...
2023.03.26
Blender
Blender

複雑なオブジェクトからメッシュを元に選択する（Blender）

やりたいこと複数のメッシュから作成された（オブジェクトの結合や編集モードで追加なので）オブジェクトからメッシュの構造をベースに選択したい。例えば以下のように二つの球が重なるオブジェクトから一つのオブジェクトのみを選択したい。環境Blender：3.4.1OS：Windows　11リンクを利用して選択対象メッシュの一部を選択モードを編集モードにして対象のメッシュであることが明確な場所（頂点、辺、面いずれか）を選択します。二つのメッシュが重ならい箇所を選択するようにします。選択した場所とリンクした頂点の選択選択した場所とリンクした頂点の選択します。二つの方法を紹介ます。結果は同じですメニューから左...
2023.03.24
Blender
Blender

ICO球ベースの半球メッシュを作成する(Blender)

やりたいことICO球ベースで半球のメッシュを作成する。ICO球のオブジェクトを作成して頂点を削除してもきれいな半球が作成できない。（UV球なら可能）環境Blender：3.4.1OS：Windows　11モディファイアーを利用するモディファイアーで球の半分を消す半球にしたいICO球とICO球の半分を覆う立方体を用意します。モードをオブジェクトモードにして、ICO球を選択します。モディファイアープロパティタブから”モディファイアーを追加”を選択します。表示される一覧から”ブーリアン”を選択します。”差分”を選択しオブジェクトに立方体を選択します。開けたい形状のメッシュオブジェクト（立方体）をリス...
2023.03.21
Blender
Blender

穴の開いたメッシュを作成する（Blender）

やりたいこと既存のメッシュに穴をあける。単純な形状なら押し出しでできるが円柱の穴をあけたい。環境Blender：3.4.1OS：Windows　11モディファイアーを利用するモディファイアーで穴をあける穴をあけたいメッシュと開けたい穴の形状のメッシュを用意します。今回の例では立方体のメッシュに円柱の穴をあけます。モードをオブジェクトモードにして、立方体を選択します。モディファイアープロパティタブから”モディファイアーを追加”を選択します。表示される一覧から”ブーリアン”を選択します。”差分”を選択しオブジェクトを開けたい形状のメッシュオブジェクト（円柱）を選択します。開けたい形状のメッシュオブ...
2023.03.21
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)