threejs-expert（v1.0.0）是一个高级 WebGPU 与 3D 图形架构技能，定位为面向 2026 年的资深架构方案。其核心方向是 Three.js v172+、WebGPU 优先渲染、TSL（Three Shader Language），以及通过 @react-three/fiber 和 @react-three/drei 实现的高性能 React 19 集成，目标是构建沉浸式、低延迟且具备可访问性的现代 Web 3D 体验。
用途与工作流程 该技能提出一套“Conductor's Protocol”流程：先做需求分解，判断 3D 场景是否需要 WebGPU（2026 年的默认选择），或是否需要为旧硬件保留 WebGL 2 回退；再进行专家选择，核心场景架构使用 threejs-expert，HUD/UI 叠加层集成使用 ui-ux-pro；随后按顺序激活技能：activate_skill(name="threejs-expert") → activate_skill(name="react-expert") → activate_skill(name="tailwind4-expert")；最后进行验证，始终使用 stats-gl 和 renderer.info 检查 draw call 与 VRAM 占用。
主要能力与强制规范
- WebGPU 与 TSL 优先：截至 2026 年，WebGPURenderer 被视为生产标准，应优先采用异步初始化与 TSL 编写着色器。规则是除非明确要求兼容 2022 年以前的硬件，否则不使用 WebGLRenderer；首次渲染循环前必须 await renderer.init()。
- React 19 与 Next.js 16 集成：所有逐帧更新（旋转、位置）使用 useFrame，绝不在渲染循环内使用 setState；将 <Canvas> 包裹在 <Suspense> 中以支持 Next.js 16 的 PPR（Partial Prerendering），在提供静态外壳的同时流式传输 3D 场景；避免为几何体/材质手动使用 useMemo，交由 React Compiler 处理记忆化，除非性能分析显示存在泄漏。
- 资源与性能加固：.glb 使用 Draco 压缩，纹理使用 KTX2（Basis Universal）；draw call 预算控制在 100 以下，重复元素使用 InstancedMesh，共享材质的多样几何体使用 BatchedMesh；组件卸载时显式对几何体、材质和纹理调用 .dispose()。
使用方式与实现模式 文档提供了“Quick Start: Modern WebGPU Canvas (React 19)”示例，展示在 "use client" 下使用 Canvas、useFrame 与 useRef 实现旋转立方体，并通过 gl 回调显式创建 THREE.WebGPURenderer，同时用 Suspense 包裹 Canvas。另提供“Advanced Pattern: TSL Shader & Compute (Procedural)”示例，从 three/addons/renderers/webgpu/utils/NodeFrame.js 引入 nodeFrame，从 three/tsl 引入 texture、uv、color、mix、oscSine、timerLocal，使用 MeshStandardNodeMaterial 与 colorNode 实现随时间变化的颜色混合，并说明 TSL 可让着色器同时运行于 WebGPU 与 WebGL。
反模式（Do Not List） 不要在 useFrame 内创建 new THREE.Vector3() 或 new THREE.Color()，会造成大量 GC 压力；不要在 React 项目中手动使用 requestAnimationFrame，应使用 R3F 的 useFrame；不要忽略 renderer.init()，WebGPU 中未 await 初始化会导致竞态与黑屏；不要为背景元素使用高面数模型，应使用 LOD 或 Impostors；不要在未使用 Suspense 的情况下加载资源，会阻塞主线程并破坏体验。
深入主题与工具 渐进式深入内容包括：性能与优化（Draco、KTX2、Instancing、BatchedMesh）、WebGPU 与 TSL 深入（从 GLSL 迁移到 TSL 与计算着色器）、Next.js 16 与 PPR 集成（流式 3D 内容与代理边界）、React-Three-Fiber 模式（Hooks、Portals 与高级组合）。专用工具与脚本包括 scripts/validate-assets.ts（检查项目中未压缩纹理或高面数）与 scripts/generate-tsl-boilerplate.py（生成 TSL 着色器节点脚手架）。学习资源列出 Three.js Manual（v172+）、React Three Fiber Docs、WebGPU Explorer 2026。文档更新时间为 2026 年 1 月 23 日 15:45。
适用场景与限制 适用于需要 WebGPU 优先渲染、TSL 着色器、React 19 与 Next.js 16 集成的现代 Web 3D 项目，尤其是对低延迟与性能预算有要求的沉浸式体验。限制方面：资料未提供该技能的收费、价格、平台支持范围、实际效果数据或具体安装命令，这些信息暂未提供；其规范中的版本与时间点（如 Three.js v172+、2026 标准）为资料原文表述，实际可用性需以对应依赖版本为准。