⚠️

重要前提

安装AI Skills的关键前提是：必须科学上网，且开启TUN模式，这一点至关重要，直接决定安装能否顺利完成，在此郑重提醒三遍：科学上网，科学上网，科学上网。查看完整安装教程 →

Three.js 完整原生参考指南 - 3D 图形渲染、WebGL 与 WebGPU 开发教程

three-js by noklip-io/agent-skills

66 周安装量

1 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/noklip-io/agent-skills --skill three-js

图形渲染 Web应用 JavaScript 框架

🇨🇳中文介绍

Three.js 完整参考（原生版）

React Three Fiber 用户注意：本参考适用于原生 Three.js。如需 R3F/Drei 模式，请使用 r3f-best-practices 技能。不过，理解此处的 Three.js 概念有助于使用 R3F，因为 R3F 是 Three.js 的 React 渲染器。

快速开始

import * as THREE from 'three';

const 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);

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

scene.add(new THREE.AmbientLight(0xffffff, 0.5));
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

camera.position.z = 5;

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

广告位招租

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

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

联系我们

参考文件	使用场景
`references/01-fundamentals.md`	场景设置、渲染器配置、Object3D 层级、坐标系
`references/02-geometry.md`	创建形状、BufferGeometry、实例化、点、线
`references/06-cameras.md`	相机类型、视锥体、视口、投影
`references/13-math.md`	Vector3、Matrix4、Quaternion、Euler、Color、MathUtils

参考文件	使用场景
`references/03-materials.md`	PBR 材质、着色器材质、所有材质类型
`references/04-textures.md`	纹理加载、UV 映射、渲染目标、环境贴图
`references/05-lighting.md`	光源类型、阴影、IBL、光照探针
`references/11-shaders.md`	自定义 GLSL 着色器、uniforms、varyings、着色器模式

参考文件	使用场景
`references/08-animation.md`	关键帧动画、骨骼动画、变形目标、程序化运动
`references/09-interaction.md`	光线投射、选择、拖拽、坐标转换
`references/10-controls.md`	OrbitControls、FlyControls、PointerLockControls 等

参考文件	使用场景
`references/07-loaders.md`	GLTF、FBX、纹理、HDR、Draco 压缩、异步模式

参考文件	使用场景
`references/12-postprocessing.md`	辉光、景深、SSAO、自定义效果、EffectComposer

参考文件	使用场景
`references/14-performance.md`	优化、性能分析、LOD、剔除、批处理
`references/15-node-materials.md`	TSL（Three 着色语言）、基于节点的材质
`references/16-physics-vr.md`	物理引擎、WebXR、VR/AR 集成
`references/17-webgpu.md`	WebGPU 渲染器、计算着色器、WGSL
`references/18-patterns.md`	架构模式、资源管理、清理、状态

常用模式快速参考

窗口大小调整处理程序

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

function dispose(obj) {
  obj.traverse(child => {
    if (child.geometry) child.geometry.dispose();
    if (child.material) {
      if (Array.isArray(child.material)) {
        child.material.forEach(m => m.dispose());
      } else {
        child.material.dispose();
      }
    }
  });
}

使用 Clock 的动画循环

const clock = new THREE.Clock();

function animate() {
  const delta = clock.getDelta();
  const elapsed = clock.getElapsedTime();

  // 使用 delta 实现与帧率无关的动画
  mixer?.update(delta);

  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

// 核心
import * as THREE from 'three';

// 附加组件（控件、加载器、效果）
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';

// 压缩支持
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';

本参考针对 Three.js r150+ 版本，包含以下说明：

WebGPU 支持（r150+）
节点材质 / TSL
现代 ES 模块导入

如需特定版本的 API，请查阅 Three.js 迁移指南。

🇺🇸English

Three.js Complete Reference (Vanilla)

React Three Fiber users : This reference is for vanilla Three.js. For R3F/Drei patterns, use the r3f-best-practices skill. However, understanding Three.js concepts here helps when working with R3F since R3F is a React renderer for Three.js.

Quick Start

import * as THREE from 'three';

const 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);

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

scene.add(new THREE.AmbientLight(0xffffff, 0.5));
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

camera.position.z = 5;

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

Reference Index

Load the appropriate reference file based on task:

Core Foundation

Reference	Use When
`references/01-fundamentals.md`	Scene setup, renderer config, Object3D hierarchy, coordinate systems
`references/02-geometry.md`	Creating shapes, BufferGeometry, instancing, points, lines
`references/06-cameras.md`	Camera types, frustum, viewport, projection
`references/13-math.md`	Vector3, Matrix4, Quaternion, Euler, Color, MathUtils

Visual Appearance

Reference	Use When
`references/03-materials.md`	PBR materials, shader materials, all material types
`references/04-textures.md`	Texture loading, UV mapping, render targets, environment maps
`references/05-lighting.md`	Light types, shadows, IBL, light probes
`references/11-shaders.md`	Custom GLSL shaders, uniforms, varyings, shader patterns

Motion & Interaction

Reference	Use When
`references/08-animation.md`	Keyframe animation, skeletal, morph targets, procedural motion
`references/09-interaction.md`	Raycasting, selection, drag, coordinate conversion
`references/10-controls.md`	OrbitControls, FlyControls, PointerLockControls, etc.

Assets

Reference	Use When
`references/07-loaders.md`	GLTF, FBX, textures, HDR, Draco compression, async patterns

Effects

Reference	Use When
`references/12-postprocessing.md`	Bloom, DOF, SSAO, custom effects, EffectComposer

Advanced

Reference	Use When
`references/14-performance.md`	Optimization, profiling, LOD, culling, batching
`references/15-node-materials.md`	TSL (Three Shading Language), node-based materials
`references/16-physics-vr.md`	Physics engines, WebXR, VR/AR integration
`references/17-webgpu.md`	WebGPU renderer, compute shaders, WGSL
`references/18-patterns.md`	Architecture patterns, asset management, cleanup, state

Common Patterns Quick Reference

Resize Handler

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

Cleanup/Dispose

function dispose(obj) {
  obj.traverse(child => {
    if (child.geometry) child.geometry.dispose();
    if (child.material) {
      if (Array.isArray(child.material)) {
        child.material.forEach(m => m.dispose());
      } else {
        child.material.dispose();
      }
    }
  });
}

Animation Loop with Clock

const clock = new THREE.Clock();

function animate() {
  const delta = clock.getDelta();
  const elapsed = clock.getElapsedTime();

  // Use delta for frame-rate independent animation
  mixer?.update(delta);

  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

Import Patterns

// Core
import * as THREE from 'three';

// Addons (controls, loaders, effects)
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';

// Compression support
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';

Version Notes

This reference targets Three.js r150+ with notes for:

WebGPU support (r150+)
Node materials / TSL
Modern ES module imports

For version-specific APIs, check the Three.js migration guide.

Weekly Installs

Repository

noklip-io/agent-skills

GitHub Stars

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykWarn

Installed on

gemini-cli51

opencode50

codex49

cursor47

antigravity42

github-copilot39

Genkit JS 开发指南：AI 应用构建、错误排查与最佳实践

10,800 周安装