Studioで3Dモデルを表示する方法
最近、ノーコードツールの Studio を使ったプロジェクトで、「3DモデルをWebサイト上に表示したい」というニーズがありました。
ただし、Studio単体では3Dモデルの描画機能がないため、Three.jsベースの外部ビューアーを作成し、それをStudioに埋め込む方法で対応しました。
本記事では、その仕組みと工夫した点を紹介します。
STUDIOで3Dモデルを表示する方法
STUDIOで制作したWebサイトに3Dビューアーを搭載しました！
なぜiframeを使う必要があるのか？
Studioはデザインやレイアウトの自由度が高い反面、JavaScriptによる複雑な処理やWebGLの直接使用はできません。
そのため、外部で3Dモデルのビューアーを作成 → Studio内にiframeで読み込むというアプローチを取りました。
外部3Dビューアーの構築
ビューアーはThree.jsを使って構築し、HTML側（埋め込み先）から、以下のようなカスタムパラメータを渡す設計になっています。
<canvas
id="three-canvas"
data-model="model_name01.glb"
data-position="0,-0.75,0"
data-zoom-pc="1.8"
data-zoom-sp="1.9">
</canvas>
- data-model：読み込むモデルファイル名
- data-position：初期配置座標（x, y, z）
- data-zoom-pc / data-zoom-sp：表示倍率（デバイス別）
JavaScript側ではこれらの属性を取得して、3Dモデルのロード・表示に反映しています。
3Dモデルの読み込みと表示ロジック
const modelFileName = canvas.dataset.model || 'model01.glb';
const positionAttr = canvas.dataset.position || '0,0,0';
const [x, y, z] = positionAttr.split(',').map(Number);
読み込んだモデルは自動でカメラ位置を調整し、適切なサイズ感で表示されるようになっています。
ユーザー操作がしばらくないときは、モデルがゆっくり自動回転する演出も実装しています
if (loadedModel && isAutoRotating) {
loadedModel.rotation.y += 0.003;
}
Studioへの埋め込み方法
作成したビューアーは、外部ホスティングされたHTMLページとして公開し、Studioのiframeブロックで簡単に読み込みが可能です。
<iframe src="https://example.com/3d-viewer/index.html" width="100%" height="600px" style="border: none;"></iframe>注意点：
- iframeに表示される背景を透過にしたい場合は、ビューアーのcanvas背景をnullに設定
- レスポンシブ対応のため、ビューアー側で画面サイズを検出して表示を調整する必要あり
- ページによっては、DOM読み込み完了後にスクリプトが実行されるよう調整が必要なケースもあります
Studio側の背景と組み合わせる工夫
ビューアーは透明背景で表示できるようになっているため、Studio側で背景画像や装飾を調整し、3Dモデルの見栄えを強化することも可能です。
例えば、製品の背景に企業ロゴを配置したり、ブランドカラーに合わせて背景をカスタムすることで、統一感のあるデザインが可能になります。
まとめ
Studio単体では難しい3Dモデルの表示も、外部ビューアー＋iframeという構成をとることで、実現可能な表現の幅はぐっと広がります。
今回の事例をもとに、ノーコードとコードの“いいとこ取り”な開発スタイルを試してみてはいかがでしょうか？