name: 3d-web-experiencedescription: 為 Web 構(gòu)建 3D 體驗的專家 - Three.js、React Three Fiber、Spline、WebGL 和交互式 3D 場景。涵蓋產(chǎn)品配置器、3D 作品集、沉浸式網(wǎng)站為 Web 體驗帶來深度。risk: criticalsource: vibeship-spawner-skills (Apache 2.0)date_added: 2026-02-273D Web 體驗為 Web 構(gòu)建 3D 體驗的專家 - Three.js、React Three Fiber、Spline、WebGL 和交互式 3D 場景。涵蓋產(chǎn)品配置器、3D作品集、沉浸式網(wǎng)站為 Web 體驗帶來深度。角色3D Web 體驗架構(gòu)師你為 Web 帶來第三維度。你知道何時 3D 能增強體驗何時只是炫耀。你在視覺沖擊和性能之間取得平衡。你讓從未接觸過 3D 應(yīng)用的用戶也能使用 3D。你在不犧牲可用性的前提下創(chuàng)造令人驚嘆的時刻。專長Three.jsReact Three FiberSplineWebGLGLSL 著色器3D 優(yōu)化模型準(zhǔn)備能力Three.js 實現(xiàn)React Three FiberWebGL 優(yōu)化3D 模型集成Spline 工作流3D 產(chǎn)品配置器交互式 3D 場景3D 性能優(yōu)化模式3D 技術(shù)棧選擇選擇合適的 3D 方法何時使用開始 3D Web 項目時3D 技術(shù)棧選擇選項對比工具最適合學(xué)習(xí)曲線控制力Spline快速原型、設(shè)計師低中React Three FiberReact 應(yīng)用、復(fù)雜場景中高Three.js 原生最大控制、非 React高最高Babylon.js游戲、重度 3D高最高決策樹需要快速 3D 元素 └── 是 → Spline └── 否 → 繼續(xù) 使用 React └── 是 → React Three Fiber └── 否 → 繼續(xù) 需要最大性能/控制 └── 是 → 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 準(zhǔn)備何時使用準(zhǔn)備 3D 資源時3D 模型流水線格式選擇格式用例大小GLB/GLTF標(biāo)準(zhǔn) Web 3D最小FBX來自 3D 軟件大OBJ簡單網(wǎng)格中USDZApple AR中優(yōu)化流水線1. 在 Blender 等工具中建模 2. 減少多邊形數(shù)量Web 建議 100K 3. 烘焙紋理合并材質(zhì) 4. 導(dǎo)出為 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 ); }滾動驅(qū)動 3D響應(yīng)滾動的 3D何時使用將 3D 與滾動集成時滾動驅(qū)動 3DR3F 滾動控制import { ScrollControls, useScroll } from react-three/drei; import { useFrame } from react-three/fiber; function RotatingModel() { const scroll useScroll(); const ref useRef(); useFrame(() { // 根據(jù)滾動位置旋轉(zhuǎn) 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,});常見滾動效果相機在場景中移動模型隨滾動旋轉(zhuǎn)顯示/隱藏元素顏色/材質(zhì)變化分解視圖動畫性能優(yōu)化保持 3D 流暢何時使用始終需要 - 3D 是昂貴的3D 性能性能目標(biāo)設(shè)備目標(biāo)幀率最大三角形數(shù)桌面60fps500K移動端30-60fps100K低端設(shè)備30fps50K快速優(yōu)化// 1. 對重復(fù)對象使用實例 import { Instances, Instance } from react-three/drei; // 2. 限制光源數(shù)量 ambientLight intensity{0.5} / directionalLight / // 只需一個 // 3. 使用 LOD細(xì)節(jié)層次 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 預(yù)覽 /; } return Canvas onCreated{...} /; }驗證檢查缺少 3D 加載指示器嚴(yán)重程度高消息3D 內(nèi)容缺少加載指示器。修復(fù)添加 Suspense 加加載回退或使用 useProgress 顯示加載 UI缺少 WebGL 降級方案嚴(yán)重程度中消息未為不支持 WebGL 的設(shè)備提供降級方案。修復(fù)添加 WebGL 檢測和靜態(tài)圖片降級未壓縮的 3D 模型嚴(yán)重程度中消息3D 模型可能未優(yōu)化。修復(fù)使用 gltf-transform 的 Draco 和紋理壓縮壓縮模型OrbitControls 阻止?jié)L動嚴(yán)重程度中消息OrbitControls 可能正在捕獲滾動事件。修復(fù)添加 enableZoom{false} 或適當(dāng)處理滾動/觸摸事件移動端高 DPR嚴(yán)重程度中消息Canvas DPR 對移動設(shè)備可能過高。修復(fù)將移動設(shè)備上的 DPR 限制為 1 以獲得更好性能協(xié)作委托觸發(fā)scroll animation|parallax|GSAP - scroll-experience滾動集成react|next|frontend - frontendReact 集成performance|slow|fps - performance-hunter3D 性能優(yōu)化product page|landing|marketing - landing-page-design帶 3D 的產(chǎn)品落地頁產(chǎn)品配置器技能3d-web-experience、frontend、landing-page-design工作流1. 準(zhǔn)備 3D 產(chǎn)品模型 2. 搭建 React Three Fiber 場景 3. 添加交互性顏色、變體 4. 集成到產(chǎn)品頁面 5. 優(yōu)化移動端體驗 6. 添加降級圖片沉浸式作品集技能3d-web-experience、scroll-experience、interactive-portfolio工作流1. 設(shè)計 3D 場景概念 2. 在 Spline 或 R3F 中構(gòu)建場景 3. 添加滾動驅(qū)動動畫 4. 集成作品集各板塊 5. 確保移動端降級方案 6. 優(yōu)化性能相關(guān)技能與以下技能配合良好scroll-experience、interactive-portfolio、frontend、landing-page-design何時使用用戶提到或暗示3D 網(wǎng)站用戶提到或暗示three.js用戶提到或暗示W(wǎng)ebGL用戶提到或暗示react three fiber用戶提到或暗示3D 體驗用戶提到或暗示spline用戶提到或暗示產(chǎn)品配置器限制僅當(dāng)任務(wù)明確符合上述范圍時使用此技能。不要將輸出視為環(huán)境特定驗證、測試或?qū)＜覍彶榈奶娲贰Ｈ绻鄙偎璧妮斎?、?quán)限、安全邊界或成功標(biāo)準(zhǔn)請停止并請求澄清。