Threejs

secondsky/claude-skills/plugins/threejs/skills/threejs

作者 secondsky88378361314fMIT227 个星标收录于 2026年10月8日更新于 2026年10月8日仓库10天前更新

Three.js 3D graphics library - scene setup, geometry, materials, lighting, textures, animation, loaders, shaders, postprocessing, interaction. Use when building 3D web experiences, creating WebGL visualizations, working with GLTF models, implementing custom shaders, or adding interactive 3D elements to web applications.

仅含说明Software Development
AI 生成的概览

用于构建 Three.js 三维网页体验的参考知识库，涵盖十个核心领域并提供代码示例。

功能
提供 Three.js 在十个领域的 API 参考、最佳实践和可用代码片段：基础、几何体、材质、灯光、贴图、动画、加载器、着色器、后处理和交互。它会根据当前任务把代理引导到十个参考文件之一，例如场景搭建、GLTF 加载或自定义 GLSL 效果。此外还列出资源释放、响应式渲染和性能优化等常用模式。
适用场景
适用于使用 Three.js 构建三维网页体验或 WebGL 可视化、加载 GLTF/GLB 模型、编写自定义着色器或后处理效果，以及为网页应用添加射线拾取、相机控制等交互式三维元素时。
运行要求
不含脚本或可执行文件，仅为说明文档与参考文档。使用示例需具备 JavaScript/WebGL 项目环境，并安装 three 包（r160 及以上）及其 addons；加载模型、贴图和 HDR 环境贴图等外部资源时需要网络访问。

Three.js Skills

Overview

Comprehensive knowledge base for building 3D web experiences with Three.js. This skill provides accurate API references, best practices, and working code examples across all major Three.js domains.

Three.js version: r160+ (January 2024)

Quick Reference

Core Topics

This skill covers 10 essential Three.js domains:

  1. Fundamentals - Scene setup, cameras, renderer, Object3D hierarchy
  2. Geometry - Built-in shapes, BufferGeometry, custom geometry, instancing
  3. Materials - PBR materials, shader materials, material properties
  4. Lighting - Light types, shadows, environment lighting
  5. Textures - UV mapping, environment maps, render targets
  6. Animation - Keyframe animation, skeletal animation, animation mixing
  7. Loaders - GLTF/GLB loading, async patterns, caching
  8. Shaders - GLSL basics, ShaderMaterial, custom effects
  9. Postprocessing - EffectComposer, bloom, DOF, custom passes
  10. Interaction - Raycasting, camera controls, mouse/touch input

When to Load References

Load detailed reference files based on your current task:

  • Basic scene setup, cameras, renderer → Load references/threejs-fundamentals.md
  • Creating shapes, custom geometry, instancing → Load references/threejs-geometry.md
  • Material properties, PBR, shader materials → Load references/threejs-materials.md
  • Adding lights, configuring shadows → Load references/threejs-lighting.md
  • Texture loading, UV mapping, environment maps → Load references/threejs-textures.md
  • Animating objects, GLTF animations, mixing → Load references/threejs-animation.md
  • Loading GLTF/GLB models, Draco compression → Load references/threejs-loaders.md
  • Writing GLSL shaders, custom visual effects → Load references/threejs-shaders.md
  • Adding bloom, depth of field, screen effects → Load references/threejs-postprocessing.md
  • Raycasting, mouse picking, camera controls → Load references/threejs-interaction.md

Quick Start Examples

1. Fundamentals: Basic Scene

javascript
import * as THREE from 'three';
// Scene, camera, rendererconst scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));document.body.appendChild(renderer.domElement);
// Create cubeconst geometry = new THREE.BoxGeometry();const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);scene.add(cube);
// Add lightscene.add(new THREE.AmbientLight(0xffffff, 0.5));const dirLight = new THREE.DirectionalLight(0xffffff, 1);dirLight.position.set(5, 5, 5);scene.add(dirLight);
camera.position.z = 5;
// Animation loopfunction animate() {  requestAnimationFrame(animate);  cube.rotation.x += 0.01;  cube.rotation.y += 0.01;  renderer.render(scene, camera);}animate();
// Responsivewindow.addEventListener('resize', () => {  camera.aspect = window.innerWidth / window.innerHeight;  camera.updateProjectionMatrix();  renderer.setSize(window.innerWidth, window.innerHeight);});

2. Geometry: Creating Shapes

javascript
// Built-in geometriesconst box = new THREE.BoxGeometry(1, 1, 1);const sphere = new THREE.SphereGeometry(0.5, 32, 32);const plane = new THREE.PlaneGeometry(10, 10);
// Custom BufferGeometryconst geometry = new THREE.BufferGeometry();const vertices = new Float32Array([  -1, -1,  0,  // vertex 0   1, -1,  0,  // vertex 1   1,  1,  0,  // vertex 2  -1,  1,  0   // vertex 3]);geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
// Indices for trianglesconst indices = new Uint16Array([0, 1, 2, 0, 2, 3]);geometry.setIndex(new THREE.BufferAttribute(indices, 1));
// Instancing for many copiesconst count = 1000;const instancedMesh = new THREE.InstancedMesh(geometry, material, count);const dummy = new THREE.Object3D();
for (let i = 0; i < count; i++) {  dummy.position.set(    (Math.random() - 0.5) * 20,    (Math.random() - 0.5) * 20,    (Math.random() - 0.5) * 20  );  dummy.updateMatrix();  instancedMesh.setMatrixAt(i, dummy.matrix);}scene.add(instancedMesh);

3. Materials: PBR Materials

javascript
// Standard PBR materialconst material = new THREE.MeshStandardMaterial({  color: 0xffffff,  metalness: 0.5,  roughness: 0.5,  map: colorTexture,  normalMap: normalTexture,  roughnessMap: roughnessTexture,  metalnessMap: metalnessTexture,  envMap: environmentMap,  envMapIntensity: 1});
// Physical material (advanced PBR)const glassMaterial = new THREE.MeshPhysicalMaterial({  color: 0xffffff,  metalness: 0,  roughness: 0,  transmission: 1,     // Glass transparency  thickness: 0.5,  ior: 1.5,           // Index of refraction  envMapIntensity: 1});
// Shader material (custom)const shaderMaterial = new THREE.ShaderMaterial({  uniforms: {    time: { value: 0 },    color: { value: new THREE.Color(0xff0000) }  },  vertexShader: `    varying vec2 vUv;    void main() {      vUv = uv;      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);    }  `,  fragmentShader: `    uniform float time;    uniform vec3 color;    varying vec2 vUv;
    void main() {      gl_FragColor = vec4(color * sin(vUv.x * 10.0 + time), 1.0);    }  `});

4. Lighting: Basic Lighting

javascript
// Ambient light (uniform everywhere)const ambient = new THREE.AmbientLight(0xffffff, 0.5);scene.add(ambient);
// Directional light (sun)const dirLight = new THREE.DirectionalLight(0xffffff, 1);dirLight.position.set(5, 10, 5);dirLight.castShadow = true;
// Shadow configurationdirLight.shadow.mapSize.width = 2048;dirLight.shadow.mapSize.height = 2048;dirLight.shadow.camera.left = -10;dirLight.shadow.camera.right = 10;dirLight.shadow.camera.top = 10;dirLight.shadow.camera.bottom = -10;scene.add(dirLight);
// Point light (bulb)const pointLight = new THREE.PointLight(0xffffff, 1, 100);pointLight.position.set(0, 5, 0);scene.add(pointLight);
// Enable shadows on rendererrenderer.shadowMap.enabled = true;renderer.shadowMap.type = THREE.PCFSoftShadowMap;
// Enable on objectsmesh.castShadow = true;mesh.receiveShadow = true;

5. Textures: Loading Textures

javascript
const loader = new THREE.TextureLoader();
// Load color textureconst colorTexture = loader.load('texture.jpg');colorTexture.colorSpace = THREE.SRGBColorSpace; // Important for color accuracy
// Configure texturecolorTexture.wrapS = THREE.RepeatWrapping;colorTexture.wrapT = THREE.RepeatWrapping;colorTexture.repeat.set(4, 4);
// HDR environment mapimport { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
const rgbeLoader = new RGBELoader();rgbeLoader.load('environment.hdr', (texture) => {  texture.mapping = THREE.EquirectangularReflectionMapping;  scene.environment = texture;  scene.background = texture;});
// Cube texture (skybox)const cubeLoader = new THREE.CubeTextureLoader();const cubeTexture = cubeLoader.load([  'px.jpg', 'nx.jpg',  // +X, -X  'py.jpg', 'ny.jpg',  // +Y, -Y  'pz.jpg', 'nz.jpg'   // +Z, -Z]);scene.background = cubeTexture;

6. Animation: Simple Animation

javascript
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const loader = new GLTFLoader();loader.load('model.glb', (gltf) => {  const model = gltf.scene;  scene.add(model);
  // Create animation mixer  const mixer = new THREE.AnimationMixer(model);
  // Play all animations  gltf.animations.forEach((clip) => {    const action = mixer.clipAction(clip);    action.play();  });
  // Update in animation loop  const clock = new THREE.Clock();  function animate() {    requestAnimationFrame(animate);    const delta = clock.getDelta();    mixer.update(delta);    renderer.render(scene, camera);  }  animate();});
// Procedural animationfunction animate() {  const time = clock.getElapsedTime();  mesh.rotation.y = time;  mesh.position.y = Math.sin(time) * 0.5;  requestAnimationFrame(animate);  renderer.render(scene, camera);}

7. Loaders: Loading GLTF Models

javascript
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
// Setup Draco compression supportconst dracoLoader = new DRACOLoader();dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/');
const gltfLoader = new GLTFLoader();gltfLoader.setDRACOLoader(dracoLoader);
// Load modelgltfLoader.load('model.glb', (gltf) => {  const model = gltf.scene;
  // Enable shadows  model.traverse((child) => {    if (child.isMesh) {      child.castShadow = true;      child.receiveShadow = true;    }  });
  // Center and scale  const box = new THREE.Box3().setFromObject(model);  const center = box.getCenter(new THREE.Vector3());  model.position.sub(center);
  scene.add(model);});
// Async/Promise patternasync function loadModel(url) {  return new Promise((resolve, reject) => {    gltfLoader.load(url, resolve, undefined, reject);  });}
const gltf = await loadModel('model.glb');scene.add(gltf.scene);

8. Shaders: Custom Shader Material

javascript
const material = new THREE.ShaderMaterial({  uniforms: {    time: { value: 0 },    amplitude: { value: 0.5 }  },  vertexShader: `    uniform float time;    uniform float amplitude;    varying vec2 vUv;
    void main() {      vUv = uv;      vec3 pos = position;
      // Wave displacement      pos.z += sin(pos.x * 5.0 + time) * amplitude;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);    }  `,  fragmentShader: `    uniform float time;    varying vec2 vUv;
    void main() {      vec3 color = vec3(vUv, 0.5 + 0.5 * sin(time));      gl_FragColor = vec4(color, 1.0);    }  `});
// Update in animation loopfunction animate() {  material.uniforms.time.value = clock.getElapsedTime();  requestAnimationFrame(animate);  renderer.render(scene, camera);}

9. Postprocessing: Adding Bloom

javascript
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
// Create composerconst composer = new EffectComposer(renderer);
// Render scene passconst renderPass = new RenderPass(scene, camera);composer.addPass(renderPass);
// Bloom passconst bloomPass = new UnrealBloomPass(  new THREE.Vector2(window.innerWidth, window.innerHeight),  1.5,  // strength  0.4,  // radius  0.85  // threshold);composer.addPass(bloomPass);
// Use composer instead of rendererfunction animate() {  requestAnimationFrame(animate);  composer.render(); // NOT renderer.render()}
// Handle resizewindow.addEventListener('resize', () => {  camera.aspect = window.innerWidth / window.innerHeight;  camera.updateProjectionMatrix();  renderer.setSize(window.innerWidth, window.innerHeight);  composer.setSize(window.innerWidth, window.innerHeight);});

10. Interaction: Raycasting

javascript
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// Camera controlsconst controls = new OrbitControls(camera, renderer.domElement);controls.enableDamping = true;
// Raycasting setupconst raycaster = new THREE.Raycaster();const mouse = new THREE.Vector2();
function onMouseClick(event) {  // Convert mouse to normalized coordinates  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  // Raycast from camera  raycaster.setFromCamera(mouse, camera);  const intersects = raycaster.intersectObjects(scene.children, true);
  if (intersects.length > 0) {    const object = intersects[0].object;    console.log('Clicked:', object);    console.log('Point:', intersects[0].point);
    // Highlight selected object    object.material.emissive.set(0x444444);  }}
window.addEventListener('click', onMouseClick);
// Update controls in animation loopfunction animate() {  requestAnimationFrame(animate);  controls.update(); // Required if enableDamping is true  renderer.render(scene, camera);}

Common Patterns

Proper Disposal

javascript
// Dispose geometries, materials, texturesgeometry.dispose();material.dispose();texture.dispose();
// Remove from scenescene.remove(mesh);
// Dispose rendererrenderer.dispose();

Responsive Rendering

javascript
window.addEventListener('resize', () => {  camera.aspect = window.innerWidth / window.innerHeight;  camera.updateProjectionMatrix();  renderer.setSize(window.innerWidth, window.innerHeight);  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));});

Performance Optimization

  • Use instancing for repeated objects (InstancedMesh)
  • Enable frustum culling (enabled by default)
  • Dispose of unused resources
  • Use proper LOD (Level of Detail) for complex scenes
  • Minimize draw calls by merging geometries
  • Limit active lights (each light adds shader complexity)
  • Use texture atlases to reduce texture switches

Version Information

Three.js version: r160+ (January 2024) Import format: ES6 modules (three, three/addons/*) Verified: 2024-01

See Also

来源与署名

来源：secondsky/claude-skills位于plugins/threejs/skills/threejs提交8837836

许可证： MIT

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 secondsky/claude-skills 的技能

Vulnerability Scanning

secondsky

指导使用 Trivy、Snyk、npm audit 和 Bandit 对依赖、代码和容器进行自动化漏洞扫描。

Security22710天前更新

Web Performance Optimization

secondsky

通过代码分割、懒加载、缓存、压缩和 Core Web Vitals 监控来指导 Web 性能优化。

Software Development22710天前更新

Web Performance Audit

secondsky

依据 Core Web Vitals、Lighthouse、优化策略与性能预算指导网页性能审计。

Software Development22710天前更新

Tailwind V4 Shadcn

secondsky

配置 Tailwind CSS v4 与 shadcn/ui、Vite 和 React，涵盖主题、深色模式与迁移指导。

包含脚本
Software Development22710天前更新

Technical Specification

secondsky

指导编写软件项目技术规格说明，涵盖需求、架构、API、测试与风险。

Software Development22710天前更新

React Native Skills

secondsky

React Native 与 Expo 最佳实践规则，涵盖列表性能、动画、UI 模式、状态、渲染与 monorepo 配置。

Software Development22710天前更新

更多Software Development技能

Playground

anthropics

精选

构建自包含的交互式 HTML 演练场，包含控件、实时预览和可复制的提示词输出。

Software Development37K今天更新

M5 Onboard

anthropics

精选

通过 USB 检测 M5Stack ESP32 开发板，刷写 UIFlow 2.0 固件并安装 MicroPython 应用包。

Software Development37K今天更新

Cardputer Buddy

anthropics

精选

指导迭代 Cardputer-Adv 的 MicroPython 应用包：添加应用、通过 USB 串口推送文件、查看日志并运行 REPL 命令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精选

依据从远程来源获取的 Web Interface Guidelines 审查 UI 代码，并以 file:line 形式报告问题。

Software Development32K5周前更新

Vercel React Native Skills

vercel-labs

精选

React Native 与 Expo 最佳实践规则，涵盖列表性能、动画、导航、UI 模式、状态与 monorepo 配置。

Software Development32K5周前更新

Vercel React Best Practices

vercel-labs

精选

Vercel 的 React 与 Next.js 性能指南，以 70 条规则的形式用于编写、审查和重构代码。

Software Development32K5周前更新