Three.js 3D Web开发教程 - WebGL/WebGPU图形编程、动画与性能优化指南

threejs by mrgoonie/claudekit-skills

447 周安装量

1,900 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/mrgoonie/claudekit-skills --skill threejs

数据可视化 JavaScript 框架游戏

🇨🇳中文介绍

Three.js 开发

使用 Three.js 构建高性能的 3D Web 应用程序——一个跨浏览器的 WebGL/WebGPU 库。

何时使用此技能

在以下场景中使用：

3D 场景、模型、动画或可视化
WebGL/WebGPU 渲染和图形编程
交互式 3D 体验（游戏、配置器、数据可视化）
相机控制、光照、材质或着色器
加载 3D 资源（GLTF、FBX、OBJ）或纹理
后期处理效果（辉光、景深、SSAO）
物理模拟、VR/XR 体验或空间音频
性能优化（实例化、LOD、视锥体剔除）

渐进式学习路径

第 1 级：入门

加载 references/00-fundamentals.md - 基础
加载 references/01-getting-started.md - 场景设置、基础几何体、材质、灯光、渲染循环

第 2 级：常见任务

资源加载 : references/02-loaders.md - GLTF、FBX、OBJ、纹理加载器
纹理 : references/03-textures.md - 类型、映射、包裹、过滤
: - 透视、正交、控制

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

第 3 级：交互与效果

交互 : references/08-interaction.md - 光线投射、拾取、变换
后期处理 : references/09-postprocessing.md - 通道、辉光、SSAO、SSR
控制（插件） : references/10-controls.md - 轨道、变换、第一人称

第 4 级：高级渲染

高级材质 : references/11-materials-advanced.md - PBR、自定义着色器
性能 : references/12-performance.md - 实例化、LOD、批处理、剔除
节点材质 (TSL) : references/13-node-materials.md - 着色器图、计算

第 5 级：专业领域

物理 : references/14-physics-vr.md - Ammo、Rapier、Jolt、VR/XR
高级加载器 : references/15-specialized-loaders.md - SVG、VRML、特定领域
WebGPU : references/16-webgpu.md - 现代后端、计算着色器
着色器 : references/17-shader.md - GLSL、ShaderMaterial、uniforms、自定义效果

// 1. 场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 2. 添加对象
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 3. 添加灯光
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
scene.add(new THREE.AmbientLight(0x404040));

// 4. 动画循环
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

🇺🇸English

Three.js Development

Build high-performance 3D web applications using Three.js - a cross-browser WebGL/WebGPU library.

When to Use This Skill

Use when working with:

3D scenes, models, animations, or visualizations
WebGL/WebGPU rendering and graphics programming
Interactive 3D experiences (games, configurators, data viz)
Camera controls, lighting, materials, or shaders
Loading 3D assets (GLTF, FBX, OBJ) or textures
Post-processing effects (bloom, depth of field, SSAO)
Physics simulations, VR/XR experiences, or spatial audio
Performance optimization (instancing, LOD, frustum culling)

Progressive Learning Path

Level 1: Getting Started

Load references/00-fundamentals.md - Fundamentals
Load references/01-getting-started.md - Scene setup, basic geometries, materials, lights, rendering loop

Level 2: Common Tasks

Asset Loading : references/02-loaders.md - GLTF, FBX, OBJ, texture loaders
Textures : references/03-textures.md - Types, mapping, wrapping, filtering
Cameras : references/04-cameras.md - Perspective, orthographic, controls
Lights : references/05-lights.md - Types, shadows, helpers
Animations : references/06-animations.md - Clips, mixer, keyframes
Math : references/07-math.md - Vectors, matrices, quaternions, curves
Geometry : references/18-geometry.md - Built-in shapes, BufferGeometry, custom geometry, instancing
Materials : references/11-materials.md - PBR, basic, phong, lambert, physical, toon, normal, depth, raw, shader materials, material properties

Level 3: Interactive & Effects

Interaction : references/08-interaction.md - Raycasting, picking, transforms
Post-Processing : references/09-postprocessing.md - Passes, bloom, SSAO, SSR
Controls (Addons) : references/10-controls.md - Orbit, transform, first-person

Level 4: Advanced Rendering

Materials Advanced : references/11-materials-advanced.md - PBR, custom shaders
Performance : references/12-performance.md - Instancing, LOD, batching, culling
Node Materials (TSL) : references/13-node-materials.md - Shader graphs, compute

Level 5: Specialized

Physics : references/14-physics-vr.md - Ammo, Rapier, Jolt, VR/XR
Advanced Loaders : references/15-specialized-loaders.md - SVG, VRML, domain-specific
WebGPU : references/16-webgpu.md - Modern backend, compute shaders
Shaders : references/17-shader.md - GLSL, ShaderMaterial, uniforms, custom effects

Quick Start Pattern

// 1. Scene, Camera, Renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 2. Add Objects
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 3. Add Lights
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
scene.add(new THREE.AmbientLight(0x404040));

// 4. Animation Loop
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

External Resources

Official Docs: https://threejs.org/docs/
Examples: https://threejs.org/examples/
Editor: https://threejs.org/editor/
Discord: https://discord.gg/56GBJwAnUS

Weekly Installs

438

Repository

mrgoonie/claude…t-skills

GitHub Stars

1.9K

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode364

gemini-cli342

codex334

claude-code329

cursor302

github-copilot295

Flutter应用架构设计指南：分层结构、数据层实现与最佳实践

2,800 周安装