3d-web-experience

3D Web エクスペリエンス

Web 向けの3Dエクスペリエンス構築を専門としています。Three.js、React Three Fiber、 Spline、WebGL、インタラクティブな3Dシーンを扱います。製品コンフィギュレーター、3D ポートフォリオ、没入型ウェブサイト、Webエクスペリエンスに奥行きをもたらす手法を網羅しています。

役割: 3D Web エクスペリエンスアーキテクト

Webに3つ目の次元をもたらします。3Dが効果を発揮する場面と、単なる見せびらかしになる場面を見極めます。視覚的なインパクトと パフォーマンスのバランスを取ります。3Dアプリに触れたことのないユーザーにも使いやすい3Dを実現します。使いやすさを損なわずに、 驚きのある体験を生み出します。

専門分野

• Three.js
• React Three Fiber
• Spline
• WebGL
• GLSL シェーダー
• 3D の最適化
• モデルの準備

機能

• Three.js の実装
• React Three Fiber
• WebGL の最適化
• 3D モデルの統合
• Spline のワークフロー
• 3D 製品コンフィギュレーター
• インタラクティブな3Dシーン
• 3D パフォーマンスの最適化

パターン

3D スタックの選定

適切な3Dアプローチの選択

使用する場面: 3D Web プロジェクトを始めるとき

3D スタックの選定

選択肢の比較

ツール	最適な用途	学習曲線	制御性
Spline	すばやいプロトタイプ、デザイナー	低	中
React Three Fiber	React アプリ、複雑なシーン	中	高
Three.js vanilla	最大限の制御、React 非使用	高	最大
Babylon.js	ゲーム、高負荷の3D	高	最大

判断ツリー

Need quick 3D element?
└── Yes → Spline
└── No → Continue

Using React?
└── Yes → React Three Fiber
└── No → Continue

Need max performance/control?
└── Yes → Three.js vanilla
└── No → Spline or R3F

Spline（最速の導入）

import Spline from '@splinetool/react-spline';

export default function Scene() {
  return (
    <Spline scene="https://prod.spline.design/xxx/scene.splinecode" />
  );
}

React Three Fiber

import { Canvas } from '@react-three/fiber';
import { OrbitControls, useGLTF } from '@react-three/drei';
import { Suspense } from 'react';

function Model() {
  const { scene } = useGLTF('/model.glb');
  return <primitive object={scene} />;
}

export default function Scene() {
  return (
    <Canvas>
      <ambientLight />
      <Suspense fallback={null}>
        <Model />
      </Suspense>
      <OrbitControls enableZoom={false} />
    </Canvas>
  );
}

3D モデルのパイプライン

Web 対応モデルの準備

使用する場面: 3D アセットを準備するとき

3D モデルのパイプライン

フォーマットの選択

フォーマット	用途	サイズ
GLB/GLTF	標準的な Web 3D	ジオメトリ／テクスチャ／圧縮に依存
FBX	3D ソフトウェアからの出力	大
OBJ	シンプルなメッシュ	中
USDZ	Apple AR	中

最適化パイプライン

1. Model in Blender/etc
2. Establish a triangle/draw-call budget on representative target devices
3. Bake textures (combine materials)
4. Export as GLB
5. Compress with gltf-transform
6. Measure transfer size, decode time, memory and frame time against the project budget

GLTF の圧縮

# Use the reviewed version already pinned in the project lockfile.
# If absent, review and add a specific version locally before these commands.

# Compress model
./node_modules/.bin/gltf-transform optimize input.glb output.glb \
  --compress draco \
  --texture-compress webp

R3F での読み込み

このコンポーネントには、プロジェクトでインストールされた React／R3F／drei のバージョンと、 実際の /model.glb アセットが必要です。アセットの読み込みに失敗した場合に備えて、アプリケーションのエラーバウンダリーを追加してください。

import { useGLTF, useProgress, Html } from '@react-three/drei';
import { Suspense } from 'react';
import { Canvas } from '@react-three/fiber';

function Model() {
  const { scene } = useGLTF('/model.glb');
  return <primitive object={scene} />;
}

function Loader() {
  const { progress } = useProgress();
  return <Html center>{progress.toFixed(0)}%</Html>;
}

export default function Scene() {
  return (
    <Canvas>
      <ambientLight />
      <Suspense fallback={<Loader />}>
        <Model />
      </Suspense>
    </Canvas>
  );
}

スクロール駆動の3D

スクロールに反応する3D

使用する場面: 3D とスクロールを連携させるとき

スクロール駆動の3D

R3F + Scroll Controls

import { ScrollControls, useScroll } from '@react-three/drei';
import { Canvas, useFrame } from '@react-three/fiber';
import { useRef } from 'react';

function RotatingModel() {
  const scroll = useScroll();
  const ref = useRef();

  useFrame(() => {
    // Rotate based on scroll position
    if (ref.current) ref.current.rotation.y = scroll.offset * Math.PI * 2;
  });

  return (
    <mesh ref={ref}>
      <boxGeometry args={[1, 1, 1]} />
      <meshNormalMaterial />
    </mesh>
  );
}

export default function Scene() {
  return (
    <Canvas>
      <ScrollControls pages={3}>
        <RotatingModel />
      </ScrollControls>
    </Canvas>
  );
}

GSAP + Three.js

import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);
// Integration fragment: camera and the section are supplied by your scene.
// Create this tween during mount and kill it/its ScrollTrigger during cleanup.

gsap.to(camera.position, {
  scrollTrigger: {
    trigger: '.section',
    scrub: true,
  },
  z: 5,
  y: 2,
});

よく使われるスクロールエフェクト

• シーン内でのカメラ移動
• スクロールに応じたモデルの回転
• 要素の表示／非表示
• 色／マテリアルの変更
• 分解表示のアニメーション

パフォーマンスの最適化

3D を高速に保つ

使用する場面: 常に。3D は負荷が高いためです

3D パフォーマンス

パフォーマンスの目標

以下は初期予算の目安であり、ハードウェアの制限や保証値ではありません。 GPU 時間、ドローコール、メモリ、読み込み時間を計測してください。三角形の数だけでは パフォーマンスを判断できません。動きを減らす設定を尊重し、通常の操作方法も維持してください。

デバイス	目標 FPS	最大三角形数
デスクトップ	60fps	500K
モバイル	30-60fps	100K
ローエンド	30fps	50K

すぐにできる改善

これらは独立した統合用コードであり、そのままコピーできる単一のモジュールではありません。実際のシーンで インスタンス／LOD とライトを設定し、遅延読み込みするコンポーネントは Suspense でラップしてください。

// 1. Use instances for repeated objects
import { Instances, Instance } from '@react-three/drei';

// 2. Limit lights
const lights = (
  <>
    <ambientLight intensity={0.5} />
    <directionalLight />
  </>
);

// 3. Use LOD (Level of Detail)
import { LOD } from 'three';

// 4. Lazy load models
import { lazy } from 'react';
const Model = lazy(() => import('./Model'));

解像度の予算

初期の DPR は控えめに設定し、ユーザーエージェント文字列からデバイスの性能を推測するのではなく、 実際のレンダリングパフォーマンスを計測してください。

import { Canvas } from '@react-three/fiber';

export default function Scene() {
  return (
    <Canvas dpr={[1, 1.5]} fallback={<p>3D preview unavailable.</p>}>
      <mesh>
        <boxGeometry />
        <meshNormalMaterial />
      </mesh>
    </Canvas>
  );
}

フォールバック戦略

Canvas は GL を初期化できない場合の DOM fallback に対応しています。コンテキストのクラッシュやアセットのエラーに備えて、シーンも アプリケーションのエラーバウンダリーでラップしてください。Suspense が処理するのは読み込みであり、失敗ではありません。製品の説明、バリエーションのコントロール、 購入操作は、Canvas がなくても目的を達成できるよう、アクセス可能な DOM に配置してください。キーボード操作、ズーム、動きを減らす設定、WebGL コンテキストが利用できない場合をテストしてください。 Canvas API とフォールバックのガイダンスを参照してください。

検証チェック

3D読み込みインジケーターがない

重大度：高

メッセージ：3Dコンテンツの読み込みインジケーターがありません。

修正方法：読み込み中のフォールバックを指定してSuspenseを追加するか、読み込みUIにuseProgressを使用します。

WebGLのフォールバックがない

重大度：中

メッセージ：WebGLに対応していないデバイス向けのフォールバックがありません。

修正方法：WebGLの検出機能と静的画像のフォールバックを追加します。

圧縮されていない3Dモデル

重大度：中

メッセージ：3Dモデルが最適化されていない可能性があります。

修正方法：gltf-transformでDracoとテクスチャ圧縮を使用してモデルを圧縮します。

OrbitControlsがスクロールを妨げる

重大度：中

メッセージ：OrbitControlsがスクロールイベントを捕捉する可能性があります。

修正方法：enableZoom={false}を追加するか、スクロール／タッチイベントを適切に処理します。

モバイルでDPRが高い

重大度：中

メッセージ：CanvasのDPRがモバイルデバイスには高すぎる可能性があります。

修正方法：パフォーマンス向上のため、モバイルデバイスではDPRを1に制限します。

コラボレーション

任意のコラボレーション領域

これらは機能ラベルです。推奨する前に、現在のカタログで実際のIDを確認し、適用範囲を読んでください。エージェントを起動する権限を与えるものではありません。

• スクロールアニメーション|パララックス|GSAP -> scroll-experience（スクロール連携）
• react|next|フロントエンド -> frontend-developer（React連携）
• パフォーマンス|低速|fps -> performance-engineer（3Dパフォーマンスの最適化）
• 製品ページ|ランディングページ|マーケティング -> frontend-design（3Dを用いた製品ランディングページ）

製品コンフィギュレーター

スキル：3d-web-experience, frontend-developer, frontend-design

ワークフロー：

1. Prepare 3D product model
2. Set up React Three Fiber scene
3. Add interactivity (colors, variants)
4. Integrate with product page
5. Optimize for mobile
6. Add fallback images

没入型ポートフォリオ

スキル：3d-web-experience, scroll-experience, interactive-portfolio

ワークフロー：

1. Design 3D scene concept
2. Build scene in Spline or R3F
3. Add scroll-driven animations
4. Integrate with portfolio sections
5. Ensure mobile fallback
6. Optimize performance

関連スキル

相性のよいスキル：scroll-experience、interactive-portfolio、frontend-developer、frontend-design

使用する場面

• 通常の商品情報や購入操作を維持しながら、操作可能な商品モデルやコンフィギュレーターをWebページに追加する場合。
• 既存のThree.js/R3Fシーンで、読み込み、フレーム時間、アセットサイズ、入力に関する問題を診断する場合。
• インタラクション、デプロイ、メンテナンスの要件に基づいて、デザイン制作のSplineシーンとコード管理のシーンを選択する場合。
• アクセシブルな静的代替手段と視覚効果を軽減する経路を備えた、スクロール連動型ポートフォリオシーンを計画する場合。奥行きがユーザーのタスクに役立たないときは、通常のDOMコンテンツを優先してください。

制限事項

• タスクが上記の適用範囲に明確に一致する場合に限り、このスキルを使用してください。
• 出力を、環境固有の検証、テスト、専門家によるレビューの代わりとして扱わないでください。
• アセットと依存関係はプロジェクトの前提条件であり、このスキルに同梱されていません。例示用のSplineシーンURLは、許可されたアセットに置き換えてください。プレースホルダーを動作するシーンとして扱わないでください。
• インストール済みのCLIバージョンと実際の対象デバイスを使って、圧縮／デコーダーの互換性と視覚的品質を検証してください。glTF Transform CLIを参照してください。
• 読み込み、実行時エラー、アクセシブルなDOMコントロール、視覚効果の軽減は個別に確認する必要があります。Canvasが描画されるだけでは、アクセシビリティやパフォーマンスが証明されたことにはなりません。