name: 3d-web-experiencedescription: 為 Web 構建 3D 體驗的專家 - Three.js、React Three Fiber、Spline、WebGL 和交互式 3D 場景。涵蓋產品配置器、3D 作品集、沉浸式網站為 Web 體驗帶來深度。risk: criticalsource: vibeship-spawner-skills (Apache 2.0)date_added: 2026-02-273D Web 體驗為 Web 構建 3D 體驗的專家 - Three.js、React Three Fiber、Spline、WebGL 和交互式 3D 場景。涵蓋產品配置器、3D作品集、沉浸式網站為 Web 體驗帶來深度。角色3D Web 體驗架構師你為 Web 帶來第三維度。你知道何時 3D 能增強體驗何時只是炫耀。你在視覺沖擊和性能之間取得平衡。你讓從未接觸過 3D 應用的用戶也能使用 3D。你在不犧牲可用性的前提下創造令人驚嘆的時刻。專長Three.jsReact Three FiberSplineWebGLGLSL 著色器3D 優化模型準備能力Three.js 實現React Three FiberWebGL 優化3D 模型集成Spline 工作流3D 產品配置器交互式 3D 場景3D 性能優化模式3D 技術棧選擇選擇合適的 3D 方法何時使用開始 3D Web 項目時3D 技術棧選擇選項對比工具最適合學習曲線控制力Spline快速原型、設計師低中React Three FiberReact 應用、復雜場景中高Three.js 原生最大控制、非 React高最高Babylon.js游戲、重度 3D高最高決策樹需要快速 3D 元素 └── 是 → Spline └── 否 → 繼續 使用 React └── 是 → React Three Fiber └── 否 → 繼續 需要最大性能/控制 └── 是 → Three.js 原生 └── 否 → Spline 或 R3FSpline最快上手import Spline from splinetool/react-spline; export default function Scene() { return ( Spline scenehttps://prod.spline.design/xxx/scene.splinecode / ); }React Three Fiberimport { 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 模型流水線讓模型做好 Web 準備何時使用準備 3D 資源時3D 模型流水線格式選擇格式用例大小GLB/GLTF標準 Web 3D最小FBX來自 3D 軟件大OBJ簡單網格中USDZApple AR中優化流水線1. 在 Blender 等工具中建模 2. 減少多邊形數量Web 建議 100K 3. 烘焙紋理合并材質 4. 導出為 GLB 5. 使用 gltf-transform 壓縮 6. 測試文件大小理想 5MBGLTF 壓縮# 安裝 gltf-transformnpminstall-ggltf-transform/cli# 壓縮模型gltf-transform optimize input.glb output.glb\--compressdraco\--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 與滾動集成時滾動驅動 3DR3F 滾動控制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.jsimportgsapfromgsap;importScrollTriggerfromgsap/ScrollTrigger;gsap.to(camera.position,{scrollTrigger:{trigger:.section,scrub:true,},z:5,y:2,});常見滾動效果相機在場景中移動模型隨滾動旋轉顯示/隱藏元素顏色/材質變化分解視圖動畫性能優化保持 3D 流暢何時使用始終需要 - 3D 是昂貴的3D 性能性能目標設備目標幀率最大三角形數桌面60fps500K移動端30-60fps100K低端設備30fps50K快速優化// 1. 對重復對象使用實例 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 alt3D 預覽 /; } return Canvas onCreated{...} /; }驗證檢查缺少 3D 加載指示器嚴重程度高消息3D 內容缺少加載指示器。修復添加 Suspense 加加載回退或使用 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 - frontendReact 集成performance|slow|fps - performance-hunter3D 性能優化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用戶提到或暗示產品配置器限制僅當任務明確符合上述范圍時使用此技能。不要將輸出視為環境特定驗證、測試或專家審查的替代品。如果缺少所需的輸入、權限、安全邊界或成功標準請停止并請求澄清。