WordPressで3Dモデルを安全に表示する：プラグインからSketchfab埋め込みへの移行
これまでWordPress上で3Dモデルを表示するために、「3D Viewer – Display Interactive 3D Models」というプラグインを使用していました。しかし、利用を続ける中でPro版へのアップグレードを促す通知が頻繁に表示されるようになり、サイト管理上の煩わしさが増加していました。
さらに技術的な問題として、一般的な3D表示プラグインは、サーバにアップロードした生データ（GLBファイルなど）のパスをフロントエンドに出力しているだけです。そのため、ブラウザのデベロッパーツールでネットワーク通信を監視されると、簡単に元の3Dモデルデータをダウンロードされてしまうというセキュリティ上の脆さがありました。
追加費用0円と直接ダウンロードの防止
表示システムの移行にあたり、以下の2点を達成基準として設定しました。
- 追加の運用コストを0円に抑えることです。高額な有料プラグインのサブスクリプション契約は選択肢から除外します。
- 一般的なブラウザ操作（デベロッパーツールのネットワークタブなど）からの単純な生データ抽出を完全に防止することです。
自前システム構築に伴う保守コストの増大
データのダウンロードを防ぐ手段として、サーバ側で3Dモデルを独自に暗号化し、ブラウザ上のJavaScriptで復号して描画するビューアを構築することも検討しました。しかし、個人のブログ運営において、暗号化・復号の仕組みを継続的に保守することは時間的コストが高すぎます。また、自サーバから容量の大きい3Dモデルを直接配信することは、トラフィックの増加やサーバ負荷の上昇にも繋がります。
Sketchfabのストリーミング配信と埋め込みコードの取得手順
自前でのシステム構築を避け、外部の3Dプラットフォームである「Sketchfab」を活用する手法へ切り替えました。Sketchfabは世界標準の3Dモデル共有サービスであり、独自のストリーミング技術によって生データの抽出を強固に防ぐ仕様となっています。
WordPressへの実装は非常にシンプルです。プラグインは不要で、以下の手順で埋め込みコードを取得して貼り付けます。
- Sketchfabへ対象の3Dモデルをアップロードする。
- 該当モデルの個別ページを開き、「Share」ボタンをクリックする。
- 表示されたメニューから「</> GET EMBED CODE」を選択する。
- 画面内の設定を操作し、「COPY TO CLIP BOARD」を選択してコードをコピーする。
なお、ブログに貼り付ける際のビューアの表示サイズをあらかじめ決めておきたい場合は、コードをコピーする前に設定画面内の「Fixed Size」などの項目を調整しておくことで、任意の寸法に変更可能です。コピーしたコードは、WordPressの投稿画面にて「カスタムHTML」ブロックを追加し、そのまま貼り付けるだけで正常に動作します。
自サーバの負荷削減と安全な3Dカタログの完成
この手法を導入した結果、プラグインによる過度な課金誘導から完全に解放されました。また、3Dモデルのレンダリングやデータ配信に関する処理をすべてSketchfab側へオフロードできたため、ブログをホストしている自サーバの負荷はゼロになりました。
実際の動作例については、以下の自作Bluetoothロボットの記事にて確認できます。
スマートフォンやPCからでもスムーズに3Dモデルを回転・拡大縮小することが可能であり、懸念していた安易なデータのダウンロードも防ぐことができています。
https://amzn.to/4q4wXvUまとめ
3D表示プラグインの過度な課金誘導と生データ流出という課題に対し、独自の暗号化システムを自作するのではなく、Sketchfabのiframe埋め込みを活用することで解決しました。結果として、追加費用0円で強固なデータ保護を実現しつつ、自サーバのトラフィック負荷を完全に排除した快適な3Dプレビュー環境を構築することができました。