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 打造 3D 網頁體驗的參考知識庫，涵蓋十個核心領域並提供程式碼範例。

功能
提供 Three.js 在十個領域的 API 參考、最佳實務與可用程式碼片段：基礎、幾何、材質、燈光、貼圖、動畫、載入器、著色器、後處理與互動。它會依目前任務把代理導向十個參考檔案之一，例如場景設定、GLTF 載入或自訂 GLSL 效果。此外也列出資源釋放、回應式算繪與效能最佳化等常用模式。
適用情境
適用於以 Three.js 打造 3D 網頁體驗或 WebGL 視覺化、載入 GLTF/GLB 模型、撰寫自訂著色器或後處理效果，以及為網頁應用加入射線拾取、相機控制等互動式 3D 元素時。
執行需求
不含指令碼或可執行檔，僅為說明文件與參考文件。使用範例需具備 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 監控來指導網頁效能最佳化。

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 週前更新