AI Skills
3d-web-experience

3d-web-experience

熱門

擅長使用 Three.js、React Three Fiber、Spline、WebGL 及互動式 3D 場景打造網頁 3D 體驗。涵蓋產品配置器、3D 作品集、沉浸式網站，為網頁體驗增添深度。

4.4萬星標
6463分支
更新於 2026/7/21
獲取技能源代碼

相關技能

frontend-skill8.4萬baoyu-infographic2.2萬algorithmic-art15萬
SKILL.md
readonlyread-only
name
3d-web-experience
description

Expert in building 3D experiences for the web - Three.js, React

3D 網頁體驗

擅長使用 Three.js、React Three Fiber、Spline、WebGL 及互動式 3D 場景打造網頁 3D 體驗。涵蓋產品配置器、3D 作品集、沉浸式網站，為網頁體驗增添深度。

角色：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 網頁專案時

3D 技術堆疊選擇

選項比較

工具 最適合 學習曲線 控制度
Spline 快速原型、設計師 低 中等
React Three Fiber React 應用、複雜場景 中等 高
Three.js 原生 最大控制、非 React 高 最高
Babylon.js 遊戲、重度 3D 高 最高

決策樹

需要快速 3D 元素？
└── 是 → Spline
└── 否 → 繼續

使用 React？
└── 是 → React Three Fiber
└── 否 → 繼續

需要最大效能/控制？
└── 是 → Three.js 原生
└── 否 → Spline 或 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';

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

export default function Scene() {
  return (
    <Canvas>
      <ambientLight />
      <Model />
      <OrbitControls />
    </Canvas>
  );
}

3D 模型管線

讓模型準備好上網

使用時機：準備 3D 素材時

3D 模型管線

格式選擇

格式 使用情境 大小
GLB/GLTF 標準網頁 3D 最小
FBX 來自 3D 軟體 大
OBJ 簡單網格 中等
USDZ Apple AR 中等

優化管線

1. 在 Blender 等軟體建模
2. 減少多邊形數量（網頁建議低於 10 萬）
3. 烘焙紋理（合併材質）
4. 匯出為 GLB
5. 使用 gltf-transform 壓縮
6. 測試檔案大小（理想小於 5MB）

GLTF 壓縮

# 安裝 gltf-transform
npm install -g @gltf-transform/cli

# 壓縮模型
gltf-transform optimize input.glb output.glb \
  --compress draco \
  --texture-compress webp

在 R3F 中載入

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

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

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

滾動驅動 3D

3D 隨滾動而變化

使用時機：整合 3D 與滾動時

滾動驅動 3D

R3F + 滾動控制

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

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

  useFrame(() => {
    // 根據滾動位置旋轉
    ref.current.rotation.y = scroll.offset * Math.PI * 2;
  });

  return <mesh ref={ref}>...</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.to(camera.position, {
  scrollTrigger: {
    trigger: '.section',
    scrub: true,
  },
  z: 5,
  y: 2,
});

常見滾動效果

  • 攝影機在場景中移動
  • 模型隨滾動旋轉
  • 顯示/隱藏元素
  • 顏色/材質變化
  • 爆炸視圖動畫

效能優化

保持 3D 流暢

使用時機：永遠——3D 很耗資源

3D 效能

效能目標

裝置 目標幀率 最大三角形數
桌機 60fps 50 萬
手機 30-60fps 10 萬
低階裝置 30fps 5 萬

快速優化技巧

// 1. 對重複物件使用 Instances
import { Instances, Instance } from '@react-three/drei';

// 2. 限制光源數量
<ambientLight intensity={0.5} />
<directionalLight /> // 只要一個

// 3. 使用 LOD（細節層級）
import { LOD } from 'three';

// 4. 延遲載入模型
const Model = lazy(() => import('./Model'));

手機偵測

const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);

<Canvas
  dpr={isMobile ? 1 : 2} // 手機上降低解析度
  performance={{ min: 0.5 }} // 允許掉幀
>

降級方案

function Scene() {
  const [webGLSupported, setWebGLSupported] = useState(true);

  if (!webGLSupported) {
    return <img src="/fallback.png" alt="3D 預覽" />;
  }

  return <Canvas onCreated={...} />;
}

驗證檢查

缺少 3D 載入指示器

嚴重程度：高

訊息：3D 內容缺少載入指示器。

修正動作：使用 Suspense 搭配載入 fallback 或 useProgress 顯示載入 UI

缺少 WebGL 降級方案

嚴重程度：中

訊息：未針對不支援 WebGL 的裝置提供降級方案。

修正動作：加入 WebGL 偵測及靜態圖片降級方案

未壓縮的 3D 模型

嚴重程度：中

訊息：3D 模型可能未經優化。

修正動作：使用 gltf-transform 搭配 Draco 壓縮及紋理壓縮

OrbitControls 阻擋滾動

嚴重程度：中

訊息：OrbitControls 可能正在攔截滾動事件。

修正動作：設定 enableZoom={false} 或適當處理滾動/觸控事件

手機上 DPR 過高

嚴重程度：中

訊息：Canvas 的 DPR 可能對手機裝置過高。

修正動作：在手機上將 DPR 限制為 1 以獲得較佳效能

協作

委派觸發條件

  • scroll animation|parallax|GSAP -> scroll-experience（滾動整合）
  • react|next|frontend -> frontend（React 整合）
  • performance|slow|fps -> performance-hunter（3D 效能優化）
  • product page|landing|marketing -> landing-page-design（含 3D 的產品登陸頁）

產品配置器

技能：3d-web-experience, frontend, landing-page-design

工作流程：

1. 準備 3D 產品模型
2. 設定 React Three Fiber 場景
3. 加入互動功能（顏色、款式）
4. 整合至產品頁面
5. 針對手機優化
6. 加入降級圖片

沉浸式作品集

技能：3d-web-experience, scroll-experience, interactive-portfolio

工作流程：

1. 設計 3D 場景概念
2. 在 Spline 或 R3F 中建立場景
3. 加入滾動驅動動畫
4. 整合至作品集區塊
5. 確保手機降級方案
6. 優化效能

相關技能

與以下技能搭配良好：scroll-experience, interactive-portfolio, frontend, landing-page-design

使用時機

  • 使用者提及或暗示：3D 網站
  • 使用者提及或暗示：three.js
  • 使用者提及或暗示：WebGL
  • 使用者提及或暗示：react three fiber
  • 使用者提及或暗示：3D 體驗
  • 使用者提及或暗示：spline
  • 使用者提及或暗示：產品配置器

限制

  • 僅在任務明確符合上述範圍時使用此技能。
  • 請勿將輸出視為環境特定驗證、測試或專家審查的替代方案。
  • 若缺少必要的輸入、權限、安全邊界或成功標準，請停止並要求釐清。