Sketchfabに投稿した3Dモデルを自社サイトに表示させる方法

2026年1月24日

はじめに

3Dモデルを自社サイトで表示したい場合、Sketchfabを活用するのが手軽です。Sketchfabにモデルをアップロードし、APIを使って自社サイトに埋め込むことで、3Dビューアーの開発コストを大幅に削減できます。

本記事では、Sketchfabに投稿した3Dモデルを自社サイトに表示させる方法をご紹介します。

Sketchfab Viewer APIとは

Sketchfabは、投稿した3DモデルをWebサイトに埋め込むためのViewer APIを提供しています。
3Dビューアーの実装が不要で、マウス操作での回転・ズームが標準搭載されています。

Sketchfab

Viewer API - Introduction Learn more about the Sketchfab viewer API and all of its components, as well as how you could leverage it to improve your application.

実装手順

1. Sketchfabに3Dモデルを投稿

Sketchfabにアカウント登録
3Dモデルをアップロード
公開設定を行う
モデルのUID（一意識別子）を取得

モデルのUIDは、SketchfabのモデルページURLから取得できます。

https://sketchfab.com/3d-models/model-name-abc123def456
                                           └─ この部分がUID

2. Viewer APIスクリプトの読み込み

HTMLの<head>内でSketchfab Viewer APIを読み込む必要があります。

<script
  src="https://static.sketchfab.com/api/sketchfab-viewer-1.12.1.js"
  async
></script>

Reactの場合は、ルートコンポーネントで読み込みます。以下の例はReact Routerを使った例です。

// __root.tsx
export const Route = createRootRoute({
  head: () => ({
    scripts: [
      {
        src: "https://static.sketchfab.com/api/sketchfab-viewer-1.12.1.js",
        async: true,
      },
    ],
  }),
});

3. TypeScript型定義

グローバルにSketchfabオブジェクトの型を定義します。

// types/sketchfab.d.ts
// https://sketchfab.com/developers/viewer/functions
interface SketchfabAPI {
  start: () => void;
}

interface SketchfabClient {
  // https://sketchfab.com/developers/viewer/initialization
  init(
    uid: string,
    options: {
      success: (api: SketchfabAPI) => void;
    }
  ): void;
}

interface SketchfabConstructor {
  new (iframe: HTMLIFrameElement): SketchfabClient;
}

declare global {
  interface Window {
    Sketchfab: SketchfabConstructor;
  }
}

4. ビューアーコンポーネントの実装

import { useEffect, useRef, useState } from "react";

interface SketchfabViewerProps {
  uid: string;      // SketchfabモデルのUID
  title: string;    // アクセシビリティ用タイトル
  className?: string;
}

export function SketchfabViewer({
  uid,
  title,
  className,
}: SketchfabViewerProps) {
  const iframeRef = useRef<HTMLIFrameElement>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // スクリプトの読み込み完了を待機
    const waitForSketchfab = () => {
      return new Promise<void>((resolve) => {
        const check = () => {
          if (window.Sketchfab) {
            resolve();
          } else {
            setTimeout(check, 100);
          }
        };
        check();
      });
    };

    let cancelled = false;

    const initViewer = async () => {
      await waitForSketchfab();

      if (cancelled || !iframeRef.current) return;

      const client = new window.Sketchfab(iframeRef.current);

      client.init(uid, {
        success: (api) => {
          if (!cancelled) {
            api.start();
            setIsLoading(false);
          }
        },
        error: () => {
          console.error("Sketchfab viewer initialization failed");
          setIsLoading(false);
        },
        // オプション設定
        autostart: 1,
        ui_stop: 0,
      });
    };

    initViewer();

    // クリーンアップ
    return () => {
      cancelled = true;
    };
  }, [uid]);

  return (
    <div className={className}>
      {isLoading && (
        <div className="loading-indicator">読み込み中...</div>
      )}
      <iframe
        ref={iframeRef}
        title={title}
        allow="autoplay; fullscreen; xr-spatial-tracking"
        allowFullScreen
      />
    </div>
  );
}

5. 使用例

function ModelDetailPage({ model }) {
  return (
    <div>
      <h1>{model.name}</h1>
      <SketchfabViewer
        uid={model.sketchfabUID}
        title={`${model.name} - 3D Viewer`}
        className="w-full aspect-video"
      />
      <p>{model.description}</p>
    </div>
  );
}

まとめ

Sketchfab Viewer APIを使うことで、3Dビューアーの開発なしに高品質な3D表示が実現できます。CMSと組み合わせれば、非エンジニアでも3Dコンテンツの管理が可能になります。3Dモデルを活用したWebサイトを検討している方は、ぜひ試してみてください。

中小企業でも3D・最新Web技術を“現実的なコスト”で

今回紹介したような Sketchfab × Web 技術 は、
「3Dを使いたいが、専用ビューアーを作るほどの予算はない」
「社内にエンジニアがいない」
といった中小企業・研究機関・教育分野にこそ相性の良い選択肢です。

Root on では、こうした最新技術を “背伸びせずに使える形” に落とし込み、

中小企業向けのDX支援
Webサイト・業務システムの開発
3D／地図／可視化などの技術を活用したWeb実装
Cloudflare・ヘッドレスCMS等を活用した低コスト＆低運用負荷構成

を得意としています。

特に
「3Dを使ったサイトを作りたいが、どう作ればいいかわからない」
「将来的に拡張できる構成で、まずは小さく始めたい」
といったお悩みを抱えていらっしゃる方は、今回のような Sketchfab を活用した構成もご提案可能ですので、ぜひお気軽にお問合せください。

新年のご挨拶