Threejs Webgl

freshtechbro/claudedesignskills/.factory/skills/threejs-webgl

作者 freshtechbro1da73febff0c3e1dfefc07f8a5ef8f7d1dfdb6cd無授權條款1K 個星標收錄於 2026年10月9日更新於 2026年10月9日儲存庫10 個月前更新

Comprehensive skill for Three.js 3D web development. Use this skill when building interactive 3D scenes, WebGL/WebGPU applications, product configurators, 3D visualizations, or immersive web experiences. Triggers on tasks involving Three.js, 3D rendering, scenes, cameras, meshes, materials, lights, animations, textures, or WebGL/WebGPU rendering.

包含腳本Software DevelopmentDesign & Creative
AI 產生的概覽

指導 Three.js WebGL/WebGPU 開發，用於打造互動式 3D 網頁場景，並提供參考文件與起始場景。

功能
提供建構 Three.js 3D 網頁應用的指引與程式碼模式，涵蓋場景、相機、渲染器、幾何體、材質、燈光、紋理、動畫、陰影、射線偵測、後處理與效能最佳化。它附帶 API、材質與最佳化方面的參考文件，以及一個起始 HTML/JS 場景和一個用於產生場景樣板程式的 Python 指令碼。
適用情境
適用於建構互動式 3D 網頁體驗、產品配置器、3D 視覺化或 WebGL/WebGPU 渲染。也適合偵錯或最佳化現有 Three.js 場景，以及將 Three.js 與動畫或 UI 函式庫整合。
執行需求
需要具備 Three.js 函式庫的 JavaScript 環境，以及支援 WebGL 或 WebGPU 的瀏覽器。它附帶可執行指令碼，包括一個 Python 設定指令碼，並引用 GLTFLoader、DRACOLoader 與後處理通道等選用附加元件。

Three.js WebGL/WebGPU Development

Overview

Three.js is the industry-standard JavaScript library for creating 3D graphics in web browsers using WebGL and WebGPU. This skill provides comprehensive guidance for building performant, interactive 3D experiences including scenes, cameras, renderers, geometries, materials, lights, textures, and animations.

Core Concepts

Scene Graph Architecture

Three.js uses a hierarchical scene graph where all 3D objects are organized in a tree structure:

javascript
Scene├── Camera├── Lights│   ├── AmbientLight│   ├── DirectionalLight│   └── PointLight├── Meshes│   ├── Mesh (Geometry + Material)│   └── InstancedMesh└── Groups

Essential Components

Every Three.js application requires these core elements:

  1. Scene: Container for all 3D objects
  2. Camera: Defines the viewing perspective
  3. Renderer: Draws the scene to canvas (WebGL or WebGPU)
  4. Geometry: Defines the shape of objects
  5. Material: Defines the surface appearance
  6. Mesh: Combines geometry and material

Quick Start Pattern

Basic Scene Setup

javascript
import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// Scene, Camera, Rendererconst scene = new THREE.Scene();scene.background = new THREE.Color(0x333333);
const camera = new THREE.PerspectiveCamera(  75, // FOV  window.innerWidth / window.innerHeight, // Aspect ratio  0.1, // Near clipping plane  1000 // Far clipping plane);camera.position.set(0, 2, 5);
const renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);renderer.setPixelRatio(window.devicePixelRatio);renderer.shadowMap.enabled = true;document.body.appendChild(renderer.domElement);
// Lightingconst ambientLight = new THREE.AmbientLight(0xffffff, 0.5);scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);directionalLight.position.set(5, 10, 7.5);directionalLight.castShadow = true;scene.add(directionalLight);
// Controlsconst controls = new OrbitControls(camera, renderer.domElement);controls.enableDamping = true;controls.dampingFactor = 0.05;
// Animation Loopfunction animate() {  requestAnimationFrame(animate);  controls.update();  renderer.render(scene, camera);}
animate();
// Handle Resizewindow.addEventListener('resize', () => {  camera.aspect = window.innerWidth / window.innerHeight;  camera.updateProjectionMatrix();  renderer.setSize(window.innerWidth, window.innerHeight);});

WebGPU Setup (Modern Alternative)

javascript
import * as THREE from 'three/webgpu';
const renderer = new THREE.WebGPURenderer({ antialias: true });renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);renderer.setAnimationLoop(animate);renderer.toneMapping = THREE.LinearToneMapping;renderer.toneMappingExposure = 1;document.body.appendChild(renderer.domElement);

Common Patterns

1. Creating Meshes with Materials

javascript
// Basic Meshconst geometry = new THREE.BoxGeometry(1, 1, 1);const material = new THREE.MeshStandardMaterial({  color: 0x00ff00,  roughness: 0.5,  metalness: 0.5});const cube = new THREE.Mesh(geometry, material);scene.add(cube);
// Textured Meshconst loader = new THREE.TextureLoader();const texture = loader.load('texture.jpg');texture.colorSpace = THREE.SRGBColorSpace;
const texturedMaterial = new THREE.MeshStandardMaterial({  map: texture});const mesh = new THREE.Mesh(geometry, texturedMaterial);scene.add(mesh);

2. Lighting Strategies

javascript
// Three-Point Lighting Setupfunction setupThreePointLight(scene) {  // Key Light (Main)  const keyLight = new THREE.DirectionalLight(0xffffff, 3);  keyLight.position.set(5, 10, 7.5);  keyLight.castShadow = true;  scene.add(keyLight);
  // Fill Light (Softens shadows)  const fillLight = new THREE.DirectionalLight(0xffffff, 1);  fillLight.position.set(-5, 5, -5);  scene.add(fillLight);
  // Rim Light (Edge definition)  const rimLight = new THREE.DirectionalLight(0xffffff, 0.5);  rimLight.position.set(0, 5, -10);  scene.add(rimLight);
  // Ambient (Base illumination)  const ambient = new THREE.AmbientLight(0x404040, 0.5);  scene.add(ambient);}
// Physical Light (Realistic)const bulbLight = new THREE.PointLight(0xffee88, 1, 100, 2);bulbLight.power = 1700; // Lumens (100W bulb equivalent)bulbLight.castShadow = true;scene.add(bulbLight);
// Hemisphere Light (Sky + Ground)const hemiLight = new THREE.HemisphereLight(  0xddeeff, // Sky color  0x0f0e0d, // Ground color  0.02);scene.add(hemiLight);

3. Instanced Geometry (Performance)

javascript
// For rendering thousands of similar objects efficientlyconst geometry = new THREE.SphereGeometry(0.1, 16, 16);const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });const instancedMesh = new THREE.InstancedMesh(geometry, material, 1000);
const matrix = new THREE.Matrix4();const color = new THREE.Color();
for (let i = 0; i < 1000; i++) {  matrix.setPosition(    Math.random() * 10 - 5,    Math.random() * 10 - 5,    Math.random() * 10 - 5  );  instancedMesh.setMatrixAt(i, matrix);  instancedMesh.setColorAt(i, color.setHex(Math.random() * 0xffffff));}
instancedMesh.instanceMatrix.needsUpdate = true;scene.add(instancedMesh);

4. Loading 3D Models (glTF)

javascript
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
// Setup loadersconst dracoLoader = new DRACOLoader();dracoLoader.setDecoderPath('/draco/');
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;    }  });
  scene.add(model);
  // Handle animations  if (gltf.animations.length > 0) {    const mixer = new THREE.AnimationMixer(model);    const action = mixer.clipAction(gltf.animations[0]);    action.play();
    // In animation loop:    // mixer.update(deltaTime);  }});

5. Shadow Configuration

javascript
// Enable shadows on rendererrenderer.shadowMap.enabled = true;renderer.shadowMap.type = THREE.PCFSoftShadowMap; // or VSMShadowMap
// Configure light shadowsdirectionalLight.castShadow = true;directionalLight.shadow.mapSize.width = 2048;directionalLight.shadow.mapSize.height = 2048;directionalLight.shadow.camera.near = 0.5;directionalLight.shadow.camera.far = 50;directionalLight.shadow.camera.left = -10;directionalLight.shadow.camera.right = 10;directionalLight.shadow.camera.top = 10;directionalLight.shadow.camera.bottom = -10;directionalLight.shadow.radius = 4;directionalLight.shadow.blurSamples = 8;
// Objects casting/receiving shadowsmesh.castShadow = true;mesh.receiveShadow = true;

6. Raycasting (Interaction)

javascript
const raycaster = new THREE.Raycaster();const mouse = new THREE.Vector2();
function onMouseClick(event) {  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);  const intersects = raycaster.intersectObjects(scene.children, true);
  if (intersects.length > 0) {    const object = intersects[0].object;    object.material.color.set(0xff0000);  }}
window.addEventListener('click', onMouseClick);

Integration Patterns

With GSAP for Animation

javascript
import gsap from 'gsap';
// Animate cameragsap.to(camera.position, {  x: 5,  y: 3,  z: 10,  duration: 2,  ease: "power2.inOut",  onUpdate: () => {    camera.lookAt(scene.position);  }});
// Animate mesh propertiesgsap.to(mesh.rotation, {  y: Math.PI * 2,  duration: 3,  repeat: -1,  ease: "none"});

With React (see react-three-fiber skill)

javascript
// Three.js integrates naturally with React Three Fiber// Use the react-three-fiber skill for React integration patterns

With Post-Processing

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';
const composer = new EffectComposer(renderer);composer.addPass(new RenderPass(scene, camera));
const bloomPass = new UnrealBloomPass(  new THREE.Vector2(window.innerWidth, window.innerHeight),  1.5, // strength  0.4, // radius  0.85 // threshold);composer.addPass(bloomPass);
// In animation loop:composer.render();

Performance Optimization

1. Geometry Reuse

javascript
// Bad: Creates new geometry for each meshfor (let i = 0; i < 100; i++) {  const geometry = new THREE.BoxGeometry(1, 1, 1);  const mesh = new THREE.Mesh(geometry, material);  scene.add(mesh);}
// Good: Reuse geometryconst sharedGeometry = new THREE.BoxGeometry(1, 1, 1);for (let i = 0; i < 100; i++) {  const mesh = new THREE.Mesh(sharedGeometry, material);  scene.add(mesh);}

2. Use InstancedMesh for Repeated Objects

For hundreds/thousands of identical objects, use InstancedMesh (see pattern above).

3. Texture Optimization

javascript
// Compress texturestexture.generateMipmaps = true;texture.minFilter = THREE.LinearMipmapLinearFilter;texture.magFilter = THREE.LinearFilter;
// Use power-of-two dimensions (512, 1024, 2048)// Consider texture atlases for multiple small textures

4. Level of Detail (LOD)

javascript
const lod = new THREE.LOD();lod.addLevel(highDetailMesh, 0);    // 0-50 unitslod.addLevel(mediumDetailMesh, 50);  // 50-100 unitslod.addLevel(lowDetailMesh, 100);    // 100+ unitsscene.add(lod);

5. Frustum Culling

Three.js automatically culls objects outside the camera's view. Ensure objects have correct bounding spheres:

javascript
mesh.geometry.computeBoundingSphere();

6. Dispose Resources

javascript
function disposeScene() {  scene.traverse((object) => {    if (object.geometry) object.geometry.dispose();    if (object.material) {      if (Array.isArray(object.material)) {        object.material.forEach(material => material.dispose());      } else {        object.material.dispose();      }    }  });  renderer.dispose();}

Best Practices

1. Use Animation Clocks for Consistent Timing

javascript
const clock = new THREE.Clock();
function animate() {  const deltaTime = clock.getDelta();  const elapsedTime = clock.getElapsedTime();
  // Use deltaTime for frame-independent animations  mesh.rotation.y += deltaTime * Math.PI * 0.5; // 90° per second
  renderer.render(scene, camera);}

2. Camera Setup Guidelines

  • FOV: 45-75° for most applications
  • Near plane: As far as possible (avoid z-fighting)
  • Far plane: As close as possible (precision)
  • Aspect ratio: Always match canvas dimensions

3. Material Selection

  • MeshBasicMaterial: Unlit, flat colors (debugging, UI)
  • MeshLambertMaterial: Cheap diffuse lighting (mobile)
  • MeshPhongMaterial: Specular highlights (older standard)
  • MeshStandardMaterial: PBR, realistic (recommended)
  • MeshPhysicalMaterial: Advanced PBR (clearcoat, transmission)

4. Coordinate System

  • Three.js uses right-handed coordinate system
  • +Y is up, +Z is toward camera, +X is right
  • Rotations use radians (Math.PI = 180°)

5. Scene Organization

javascript
// Group related objectsconst building = new THREE.Group();building.add(walls, roof, windows);scene.add(building);
// Use meaningful namesmesh.name = 'player-character';const found = scene.getObjectByName('player-character');

Common Pitfalls

1. Not Updating Aspect Ratio on Resize

Always update camera aspect ratio and projection matrix when window resizes.

2. Creating New Objects in Animation Loop

javascript
// Bad: Memory leakfunction animate() {  const geometry = new THREE.BoxGeometry(); // Created every frame!  // ...}
// Good: Create once outside loopconst geometry = new THREE.BoxGeometry();function animate() {  // Reuse geometry}

3. Forgetting to Enable Shadows

Remember to enable shadows on renderer, lights, and objects.

4. Z-Fighting (Flickering)

  • Increase near plane distance
  • Decrease far plane distance
  • Avoid overlapping coplanar surfaces
  • Use material.polygonOffset = true with material.polygonOffsetFactor

5. Color Space Issues

javascript
// Always set color space for texturestexture.colorSpace = THREE.SRGBColorSpace;
// Set renderer output encodingrenderer.outputColorSpace = THREE.SRGBColorSpace;

6. Not Disposing Resources

Always call .dispose() on geometries, materials, textures, and renderers when no longer needed.

Resources

This skill includes bundled resources to accelerate Three.js development:

references/

  • api_reference.md: Quick API reference for core classes (Scene, Camera, Renderer, etc.)
  • materials_guide.md: Comprehensive material types and properties
  • optimization_checklist.md: Performance optimization strategies

scripts/

  • setup_scene.py: Generate boilerplate Three.js scene setup code
  • texture_optimizer.py: Batch optimize textures for web (resize, compress)
  • gltf_validator.py: Validate glTF models before use

assets/

  • starter_scene/: Complete HTML/JS boilerplate project
  • shaders/: Custom GLSL shader examples (vertex, fragment)
  • hdri/: Environment maps for PBR lighting
  • draco/: DRACO decoder for compressed models

Advanced Topics

Custom Shaders (GLSL)

javascript
const material = new THREE.ShaderMaterial({  uniforms: {    uTime: { value: 0.0 },    uColor: { value: new THREE.Color(0x00ff00) }  },  vertexShader: `    varying vec2 vUv;    void main() {      vUv = uv;      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);    }  `,  fragmentShader: `    uniform float uTime;    uniform vec3 uColor;    varying vec2 vUv;    void main() {      gl_FragColor = vec4(uColor * vUv.x, 1.0);    }  `});

Render Targets (Render-to-Texture)

javascript
const renderTarget = new THREE.WebGLRenderTarget(512, 512);
// Render scene to texturerenderer.setRenderTarget(renderTarget);renderer.render(scene, camera);renderer.setRenderTarget(null);
// Use textureconst material = new THREE.MeshBasicMaterial({  map: renderTarget.texture});

GPU Computation (GPGPU)

Use GPUComputationRenderer for particle simulations, cloth physics, etc.

When to Use This Skill

Use this skill when:

  • Building interactive 3D web experiences
  • Creating product configurators or visualizers
  • Implementing WebGL/WebGPU rendering
  • Working with 3D models, scenes, or animations
  • Optimizing Three.js performance
  • Integrating Three.js with other libraries (GSAP, React, etc.)
  • Debugging Three.js rendering issues

For React integration, use the react-three-fiber skill. For animation, combine with the gsap-scrolltrigger skill. For UI animations, use the motion-framer skill.

來源與署名

來源：freshtechbro/claudedesignskills位於.factory/skills/threejs-webgl提交1da73fe

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 freshtechbro/claudedesignskills 的技能

Web3d Integration Patterns

freshtechbro

在 3D 網頁應用中整合 Three.js、GSAP、React Three Fiber、Motion 與 React Spring 的架構模式。

Software Development1K10 個月前更新

Threejs Webgl

freshtechbro

指導 Three.js WebGL/WebGPU 開發，用於打造互動式 3D 網頁場景，並提供參考文件與起始場景。

包含腳本
Software Development1K10 個月前更新

Substance 3d Texturing

freshtechbro

指導在 Substance 3D Painter 中建立並匯出面向網頁與即時引擎的 PBR 貼圖，並提供 Python 批次自動化。

包含腳本
Design & Creative1K10 個月前更新

Scroll Reveal Libraries

freshtechbro

指導使用 AOS 函式庫為網頁加入簡單的捲動觸發顯現動畫。

包含腳本
Software Development1K10 個月前更新

Rive Interactive

freshtechbro

指導在 React 中以狀態機、輸入、ViewModel 和事件打造可互動的 Rive 向量動畫。

包含腳本
Design & Creative1K10 個月前更新

Pixijs 2d

freshtechbro

指導使用 PixiJS WebGL/WebGPU 引擎打造高效能 2D 圖形、粒子效果與互動式畫布。

包含腳本
Software Development1K10 個月前更新

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