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)
Blender

覚えておきたいマウス操作、ショートカット(Blender)

やりたいこと覚えておくと便利なBlenderのマウス操作、ショートカットをまとめます。随時更新です。環境Blender：3.4.1マウス操作視点操作それぞれ視点の操作です。オブジェクト操作ではありません。操作機能備考ホイール操作拡大/縮小上：拡大　下：縮小Ctrl + ホイールドラッグ拡大/縮小上：拡大　下：縮小ホイールドラッグ回転Shift +ホイールドラッグ 移動その他操作機能備考Shift + 右ドラッグ３Dカーソルの移動ショートカットキー視点変更操作機能備考テンキー0カメラからの視点再度押すことで元のアングルに戻すテンキー1正面からの視点テンキー3右からの視点テンキー7 上からの視点テ...
2023.04.10
Blender
Blender

点を削除してできた穴を埋める（Blender）

やりたいこと点を削除したことでできた穴を埋める。今回はわかりやすいトーラスの半分を削除した例で説明します。トーラスの半分を選択して点を削除したものです。円形の穴が開いていることがわかります。このページでは二つの方法で埋める方法を紹介します。環境Blender：3.4.1OS：Windows　11Fillを使用して埋める対象の選択削除した断面に当たる点をすべて選択します。Fill画面上部の”頂点”メニューから”頂点から新規辺/面作成”を選択します。（もしくはFキー）結果以下のように穴が埋まりました。マージを使用して埋める対象の選択削除した断面に当たる点をすべて選択します。マージ画面を右クリック　...
2023.04.09
Blender
Threejs(Java script)

モジュールを用いたThreejsを使用する(Threejs)

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

Word PressでScript（Adsenseなど）をウィジェットに追加できない（ConoHa）

やりたいことWord PressでScript（Adsenseなど）をウィジェット（カスタムHTML、広告など）に追加上の適用ボタンがローディング（グルグル）になって表示されない。または適用ボタンをクリックした後にローディング（グルグル）が表示され完了しない。サイトセキュリティの変更（ConoHa）設定変更以下の手順でサイトセキュリティの変更します。ConoHaのコントロールパネルページを表示します。”サイト管理”　→　”サイトセキュリティ”　→ ”WAF”タブ　を表示します。表示されるブロックされた攻撃一覧から、Scriptをウィジェットに追加しようとした際に記録されたログを探します。攻撃内...
2023.04.01
Word Press
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
次のページ