3Dプリント品を販売しているWebショップで、アイテムの形状などを確認できるように3Dモデルをブラウザ上でグリグリ動かしたりズームしたりできる仕掛けを実装したいと思いました。stl形式のデータをアップして、WordPressのプラグインを使って表示すれば実現は可能なのですが、そのstlファイルを抜かれると3Dプリンターを持ってる人なら簡単に複製できてしまうので、売り物でやるのは躊躇われていました。
なにか暗号化してファイルを取得されても再利用はできないような仕組みがあればなと思って調べてみたんですが、やはりブラウザ上でレンダリングするにはWebGLとかに変換された時点で完全には盗用は防げないっぽい。より高等なプラグインを使う外部サービスとかはあるみたいですが、個人でそこまで大がかりなことはしたくないし、外部サービス依存も避けたい。
ということで、方針として、
・メッシュデータを簡略化して、「形状確認でグリグリするするには足りるけど、プリントするにはガタ付いていて実用にならない」くらいの精度に落としたものを使う
ということを目指すことにしました。Bambu Studioにある簡略化という機能に着想を得たんですが、CADソフトのFusion側でもサクっとできることが判明。覚え書きにしておきます。
STL形式よりもglTF 2.0形式
同時にブラウザ上で3Dモデルを表示するにはSTLよりもglTF形式というフォーマットの方が優れていることがわかりました。
- STLより軽量でスマホも含めて快適にレンダリングできる
- 3MFのようにカラー情報も保持できる（STLは純粋な形状データだけ）
- スライサーに直接読み込めなかったり、内部データも軽量化されていて盗用されにくい
といった特徴があります。もちろんWordPress/WooCommerceでも簡単にプラグインで表示できます。
ただFusionでは標準で書き出し機能が備わっておらず有料アドオンが必要。そこで一度obj形式などでエクスポートして、無償のBlenderでコンバートするという手順を採りますので、それも合わせて解説します。
WordPress用プラグイン bPlugins 3D Viewerを選択
フル機能を使うには有償（サブスク）ですが、無償の基本機能でもやりたいことは実装できました。
実際の適用例はこちら（リンク先をご覧ください）。
こちらで注文できます
Tzパ－プルセーバー＆消棒レスキュー ドアポケットホルダー（新型クラウン用）
参考価格: ¥1,200（別途消費税、送料がかかります）
在庫: なし
単純にページ内にインラインでビューワーを表示もしていますが、加えてWooComemrcが標準でもっている画像表示機能の中に統合もできます。１枚目の画像の右下にアイコンが出るので、それをクリック／タップするとグリグリできるモデルが表示される形です。メッシュ削減してあるので拡大してみると円筒部分がガタガタになっているのがわかります。
ざっくり手順メモ
Fusionで精度を落としたメッシュを作る
Fusion上で変換したいボディを複製します（メッシュに置き換わってしまうため）。
「メッシュ」タブ->作成->テッセレーション。全く聞いたことがない言葉ですが、ソリッドボディがメッシュボディに変換されます（白い円柱アイコンから黄色い六角柱アイコンへ）。パラメーターは特にいじりませんでしたが、寸法が重要なCAD系モデルの場合、盗用防止の意味でサイズや縦横比をわずかに狂わせておくのがトラップとして有効かもしれません(笑)。
続いて「修正」->「削減」で文字通りローポリ化します。タイプを「比率」の場合、比率を10とかにすると10%つまり、1/10まで削減するよということみたいです。プレビューをオンにしておき、許容できるギリギリまで減らします。綺麗さを追求すると盗用もしやすくなるので、形状確認が目的なら多少カクカクが見えるくらいにした方が良い気がします。
で、2026年6月現在、Fusionからは直接glTF（.glb）は書き出せないので、一旦.objでエクスポートします。
Blenderで色設定とファイル変換
Blender使うの何年かぶりで全て忘れてるので、無駄な手順とかあってもご勘弁ください。是非コメントでフォローいただけると嬉しいです。
Blenderでも直接.objを開けないので、一旦新規ファイルを開き、デフォルトで入っている立方体を消し、「ファイル」->インポート->Wabefront (.obj)から読み込みます。
座標系の違いから、へんな場所に浮かんでたり倒立してたりするので、周りを見回してオブジェクトを見つけ、右サイドバーの「トランスフォーム」で位置や回転パラメーターをいじって希望する初期位置／向きに直します。原点に寄せておく必要はないかも知れませんが念のため。
次にその横に小さなアイコンがたくさん縦に並んでいる中の一番下の「マテリアル」を選択。
Fusionで割り付けてあったテクスチャーがついてる場合は一度削除して新規作成した方がなんか上手く行く印象です。「ベースカラー」で色を変更。「メタリック」は上げると金属っぽい光沢になります。「荒さ」を半分くらいまで上げるとプラスチックっぽい質感になるとのことですがあんまりわからず。この辺り、使いこなせばもっとリアルさを追求できると思いますが、ウチは3Dプリント品なのでそこまで凝ったことはしてません。
「エクスポート」からglTF 2.0（.glb/gltf）を選んで書き出します。
WordPress/WooCommerceで活用
上でエクスポートしたglTFファイルをメディアにアップロードし、投稿者「bPlugins」の「3D Viewer」というプラグインを導入しておきます。
a. 投稿／ページ内にインラインで挿入するショートコードを作る場合
左サイドバーの「3D Viewe」から「Add New」で新規作成画面に行きます。
サイドバーにModel、Settings、Styleの垂直タブがあります。ここでは最低限の手順だけ触れます。
Modelタブの3D SourceでメディアにアップロードしておいたglTFファイルを選択。3D Poster Imageは最初に表示される。グリグリしてる時の背景にもなります。
Settingsタブで各操作要素を有効／無効化できます。
Styleタブでは、デフォルトでWidthが100%（横幅一杯）、高さが狭めなのでお好みで広げておきます。Background Color（背景色）を変更してモデル色が埋もれない色にしておくといいでしょう。
これで「公開（更新）」をクリックして、青色の「3d_viewer id=’xxxx’」というショートコードをクリックしてコピーし、挿入したい場所に貼り付ければOKです。
b. WooCommerceの商品画像に追加する場合
商品編集画面で、下の方にスクロールすると本プラグインの設定ゾーンが出現しています。
特有なのは「3D Viewer Position」です。選択肢を簡単に訳すと、
- None: 表示しない
- Top of the product image: 商品画像の上
- Bottom of the product image: 商品画像の下
- Replace Product Image with 3D: 商品画像を3Dで置き換える
- Show 3D on First Image of WooCommerce Gallaery: WooCommerceギャラリーの先頭画像として3Dを表示
とでもなるでしょうか。個人的には最後のが使いやすいと思います。Top/BottomはWooCommerceテーマによってはおかしな配置になってしまいました。「Show 3D on First Image～」にして、3D Posterに元々先頭にあった画像ファイルを指定しておけば、デフォルトで従来と同じ画像が表示されつつ、右下に3Dグリグリボタンが出る、という感じで、元のレイアウトを崩さずにスマートに3Dモデル表示ができます（さりげなさ過ぎて気付かれないかもですが）。Backgroundで透明度（α値）を指定しておくと、グリグリ中にも後ろにポスター画像を透けさせることができて気に入っています。
まとめ
簡単ですが、盗用されにくい最低限の細工をしつつ（完全ではない）3Dプリントモデル表示をWordPress/WooCommerce上に貼り付ける手順です。
ちょっと工数が多いですが、様々な角度の写真を複数枚貼るよりもスッキリして、なおかつモダンな印象の販売ページになるかなと思います。Fusionから直接glTFを書き出せればなぁと思いますが、有料プラグインは結構お高いので、当面はBlenderを使います。
別に盗られても問題ないモデルであれば、.stlのままアップロードして、別の無償プラグインを使うこともできます。
