threejs-pro

用途

Three.js & WebGL Developer 提供 3D 网页图形开发能力，专注于 Three.js、React Three Fiber（R3F）以及自定义 GLSL 着色器开发。目标是创建具有性能优化和声明式场景管理的沉浸式网页 3D 体验。

适用场景

构建 3D 产品配置器或落地页
实现自定义着色器（GLSL）视觉效果
优化 3D 场景（Draco 压缩、纹理缩放）
开发 React Three Fiber（R3F）应用
将物理引擎（Rapier/Cannon）集成到网页场景
调试 WebGL 性能问题（Draw call、内存泄漏）

主要能力与示例

3D 产品配置器：为家具零售商构建交互式产品配置器，包括 R3F 组件展示 3D 产品、纹理/材质切换系统、相机控制与灯光设置、Draco 压缩优化模型，以及为非 3D 用户提供无障碍替代方案。资料中给出的结果为：转化率提升 40%、平均会话时长增加 2 倍、加载时间低于 2 秒、支持移动设备。

自定义着色器特效：为游戏落地页创建沉浸式视觉效果，包括编写自定义 GLSL 顶点与片元着色器、实现后处理效果（bloom、DOF）、添加响应用户输入的交互元素、优化着色器实时渲染性能，以及为不支持 WebGL 的设备提供降级方案。资料中给出的结果为：60fps 的视觉体验、营销活动成功、获得视觉设计行业认可、在中端设备上保持性能。

电商 3D 集成：将 Three.js 集成到现有 React 电商站点，包括创建隔离的 3D canvas 组件、3D 内容懒加载、React 与 Three.js 之间的状态管理、组件卸载时的清理，以及错误边界与降级内容。资料中给出的结果为：不影响现有页面性能、通过懒加载改善 SEO、对不支持浏览器优雅降级、代码库符合 React 模式。

最佳实践

性能优化：几何合并以减少 draw call；使用压缩格式与合适尺寸的纹理；正确释放几何体与材质；对远处对象使用 LOD。

React Three Fiber：使用声明式 R3F 组件树而非命令式代码；正确使用 useFrame、useThree、useLoader 等 Hook；使用 Zustand 管理全局 3D 状态；将场景拆分为可复用组件。

着色器与特效：内置功能不足时使用自定义着色器；在不牺牲性能的前提下添加后处理；对 shader 性能进行剖析；为低端设备提供替代方案。

开发工作流：使用 HMR 快速迭代；使用 drei 的辅助工具与控制；为 3D 内容提供无障碍替代；在多种设备与浏览器上测试。

技术栈选择决策框架

需要 React 集成 → React Three Fiber（R3F），推荐用于 90% 的 Web 应用；否则使用原生 Three.js。
性能关键：海量对象 → InstancedMesh；复杂物理 → Rapier（WASM）；后处理 → EffectComposer / R3F Postprocessing。
视觉风格：写实 → PBR 材质 + HDR 光照；卡通 → Toon Shader / Outline Pass；抽象 → 自定义 GLSL 着色器。

优化清单（60FPS 规则）

几何体：使用 Draco 或 Meshopt 压缩。
纹理：使用 .webp 或 .ktx2，最大尺寸 2048x2048。
光照：尽可能烘焙光照，实时阴影最多 1-2 个。
Draw call：合并几何体或使用实例化。
渲染循环：避免在 useFrame 循环中创建对象。

需要升级到 graphics-engineer 的情况：浏览器内光线追踪需求（WebGPU 实验性）、超出标准 Three.js 能力的自定义渲染管线、需要直接调用底层 WebGL API。

核心工作流示例

R3F 基础设置（旋转立方体 + 阴影 + 轨道控制）：

安装：

npm install three @types/three @react-three/fiber @react-three/drei

场景组件（Scene.tsx）：

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

export default function Scene() {
  return (
    <Canvas shadows camera={{ position: [0, 0, 5] }}>
      <color attach="background" args={['#101010']} />
      <ambientLight intensity={0.5} />
      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} castShadow />
      
      <mesh castShadow receiveShadow rotation={[0, 1, 0]}>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="orange" />
      </mesh>
      
      <OrbitControls />
    </Canvas>
  );
}

模型加载与优化：使用 gltf-pipeline 或 gltf-transform 压缩：

gltf-transform optimize input.glb output.glb --compress draco

R3F 加载：

import { useGLTF } from '@react-three/drei';

export function Model(props) {
  const { nodes, materials } = useGLTF('/optimized-model.glb');
  return (
    <group {...props} dispose={null}>
      <mesh geometry={nodes.Cube.geometry} material={materials.Metal} />
    </group>
  );
}
useGLTF.preload('/optimized-model.glb');

反模式与注意事项

在循环中创建对象：如 useFrame(() => { new THREE.Vector3(...) })，会导致垃圾回收卡顿；应复用模块级变量，如 const vec = new THREE.Vector3(); useFrame(() => vec.set(...))。
超大纹理：如为背景对象加载 4k .png（每张 10MB），会导致加载缓慢、GPU 内存耗尽（移动端崩溃）；应使用 1k 或 2k 纹理，颜色贴图用 .jpg，仅在需要 alpha 时用 .png，GPU 压缩用 Basis/KTX2。
过多灯光：如 50 个动态 PointLight，前向渲染会导致着色器复杂度指数增长；应在 Blender 中烘焙光照（Lightmap），使用 AmbientLight + 1 个 DirectionalLight（太阳）。

其他反模式包括：过多 draw call、内存泄漏（未释放几何体/材质）、未优化纹理、主线程阻塞计算；在 React 中使用命令式 Three.js、prop drilling、状态分散、组件臃肿；高面数模型、比例不一致、缺少碰撞体、光照不当；无渐进加载、缺少降级方案、忽略无障碍、无性能预算。

质量检查清单

性能：平均笔记本上稳定 60fps；draw call 理想情况下 < 100；卸载时释放几何体/材质。
视觉：配置柔和阴影（ContactShadows 或 PCSS）；启用抗锯齿（R3F 默认）或通过后处理使用 SMAA；窗口缩放时 canvas 正确响应。
代码：使用声明式 R3F 组件树而非命令式 scene.add()；对昂贵计算使用 useMemo。

限制

资料未提供该技能的具体安装方式、收费模式、价格、平台支持范围或版本要求等信息。