← Blog
3DGSを自社サイトに埋め込む方法：貼るだけ(iframe)から本格実装まで
2026-07-29
3DGSを納品したあと、実際に自社サイトへ載せる方法を2通り紹介します。技術に詳しくない場合は、**方法A(貼るだけ)**で十分です。
方法A：iframeで貼るだけ(おすすめ・ノーコード)
納品時にお渡しする埋め込みコードを、表示したい場所に貼るだけです。WordPress・STUDIO・Wix・ペライチなど、HTMLが貼れるサービスならどこでも動きます。
<iframe
src="https://viewer.example.com/embed?model=あなたの3DGSのURL"
style="width:100%;aspect-ratio:16/9;border:0;border-radius:12px"
allowfullscreen
loading="lazy"
></iframe>
aspect-ratioで高さが自動調整され、スマホでも崩れませんloading="lazy"でページの初期表示を軽くできます- 古い環境で
aspect-ratioが効かない場合は、上下パディング56.25%(16:9)のラッパーで対応します:
<div style="position:relative;padding-top:56.25%">
<iframe
src="https://viewer.example.com/embed?model=..."
style="position:absolute;inset:0;width:100%;height:100%;border:0"
allowfullscreen
></iframe>
</div>
方法B：自分のコードに直接組み込む(開発者向け)
自社ですでに Three.js を使っているなら、Spark(@sparkjsdev/spark) で直接読み込めます。
npm install three @sparkjsdev/spark
import * as THREE from "three";
import { SparkRenderer, SplatMesh } from "@sparkjsdev/spark";
const scene = new THREE.Scene();
// renderer / camera は通常の Three.js と同じ
const spark = new SparkRenderer({ renderer });
scene.add(spark);
const splat = new SplatMesh({ url: "あなたの3DGSのURL(.compressed.ply)" });
scene.add(splat);
// あとは OrbitControls などで回転・ズームを付ければ完成
読み込むファイルの作り方(SPZ v4 → 圧縮PLY への変換や軽量化)は、前回の技術記事にまとめています。
つまずきやすいポイント
- 3DGSファイルは CORSが有効なURL に置く(でないとブラウザが読み込めません)
- ファイルは軽く(スマホ表示の生命線。30〜40MB を目安に)
- iframe埋め込み(方法A)なら、これらは納品側で対応済みなので気にしなくてOKです