threejs-pro by 404kidwiz/claude-supercode-skills
npx skills add https://github.com/404kidwiz/claude-supercode-skills --skill threejs-pro提供专注于 Three.js、React Three Fiber (R3F) 和自定义 GLSL 着色器开发的 3D 网页图形专业知识。为网页创建沉浸式 3D 体验,并进行性能优化和声明式场景管理。
场景: 为一家家具零售商构建交互式产品配置器。
实现:
结果:
场景: 为游戏落地页创建沉浸式视觉效果。
实现:
结果:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
场景: 将 Three.js 集成到现有的 React 电子商务网站中。
实现:
结果:
What is the project scope?
│
├─ **React Integration?**
│ ├─ Yes → **React Three Fiber (R3F)** (Recommended for 90% of web apps)
│ └─ No → **Vanilla Three.js**
│
├─ **Performance Critical?**
│ ├─ Massive Object Count? → **InstancedMesh**
│ ├─ Complex Physics? → **Rapier (WASM)**
│ └─ Post-Processing? → **EffectComposer / R3F Postprocessing**
│
└─ **Visual Style?**
├─ Realistic? → **PBR Materials + HDR Lighting**
├─ Cartoon? → **Toon Shader / Outline Pass**
└─ Abstract? → **Custom GLSL Shaders**
Draco 或 Meshopt 压缩。.webp 或 .ktx2。最大尺寸 2048x2048。useFrame 循环中创建对象。危险信号 → 上报给 graphics-engineer:
目标: 一个带有阴影和轨道控制器的旋转立方体。
步骤:
设置
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 模型。
步骤:
压缩
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(...))表现:
.png 纹理 (每个 10MB)。问题原因:
正确方法:
1k 或 2k 纹理。.jpg,仅在需要透明度时使用 .png。表现:
问题原因:
正确方法:
AmbientLight + 1 个 DirectionalLight (太阳光)。性能:
视觉效果:
代码:
scene.add()。useMemo。每周安装量
118
仓库
GitHub 星标数
42
首次出现
2026年1月24日
安全审计
安装于
opencode99
codex91
gemini-cli91
claude-code82
cursor79
github-copilot78
Provides 3D web graphics expertise specializing in Three.js, React Three Fiber (R3F), and custom GLSL shader development. Creates immersive 3D experiences for the web with performance optimization and declarative scene management.
Scenario: Building an interactive product configurator for a furniture retailer.
Implementation:
Results:
Scenario: Creating immersive visual effects for a gaming landing page.
Implementation:
Results:
Scenario: Integrating Three.js into existing React e-commerce site.
Implementation:
Results:
What is the project scope?
│
├─ **React Integration?**
│ ├─ Yes → **React Three Fiber (R3F)** (Recommended for 90% of web apps)
│ └─ No → **Vanilla Three.js**
│
├─ **Performance Critical?**
│ ├─ Massive Object Count? → **InstancedMesh**
│ ├─ Complex Physics? → **Rapier (WASM)**
│ └─ Post-Processing? → **EffectComposer / R3F Postprocessing**
│
└─ **Visual Style?**
├─ Realistic? → **PBR Materials + HDR Lighting**
├─ Cartoon? → **Toon Shader / Outline Pass**
└─ Abstract? → **Custom GLSL Shaders**
Draco or Meshopt compression..webp or .ktx2. Max size 2048x2048.useFrame loop.Red Flags → Escalate tographics-engineer:
Goal: A spinning cube with shadows and orbit controls.
Steps:
Setup
npm install three @types/three @react-three/fiber @react-three/drei
Scene Component (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>
);
}
Goal: Load a heavy GLTF model efficiently.
Steps:
Compression
gltf-pipeline or gltf-transform.gltf-transform optimize input.glb output.glb --compress draco.Loading (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');
What it looks like:
useFrame(() => { new THREE.Vector3(...) })Why it fails:
Correct approach:
const vec = new THREE.Vector3(); useFrame(() => vec.set(...))What it looks like:
.png textures (10MB each) for a background object.Why it fails:
Correct approach:
1k or 2k textures..jpg for color maps, .png only if alpha needed.What it looks like:
Why it fails:
Correct approach:
AmbientLight + 1 DirectionalLight (Sun).Performance:
Visuals:
Code:
scene.add().useMemo used for expensive calculations.Weekly Installs
118
Repository
GitHub Stars
42
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode99
codex91
gemini-cli91
claude-code82
cursor79
github-copilot78
TanStack Query v5 完全指南:React 数据管理、乐观更新、离线支持
2,500 周安装