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用户提到或暗示产品配置器限制仅当任务明确符合上述范围时使用此技能。不要将输出视为环境特定验证、测试或专家审查的替代品。如果缺少所需的输入、权限、安全边界或成功标准请停止并请求澄清。
3d-web-experience - SKILL
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用户提到或暗示产品配置器限制仅当任务明确符合上述范围时使用此技能。不要将输出视为环境特定验证、测试或专家审查的替代品。如果缺少所需的输入、权限、安全边界或成功标准请停止并请求澄清。