RUN · EDIT · LEARN

Three.js 互动实验室

打开就能运行,源码可以直接修改。用 573 个小实验理解浏览器里的 3D 图形编程。

573
示例总数
14
分类数量
100%
免费开源
显示 573 / 573 个示例
1入门基础

Hello Scene

最简 Three.js 场景:Scene + Camera + Renderer 三件套,无动画,静态展示立方体。

2入门基础

Animation Loop

从静态场景迈向动态场景:加入 requestAnimationFrame,让立方体持续旋转,但仍使用无光照材质。

3入门基础

Lit Cube

在动画场景里引入受光材质与第一组灯光:MeshStandardMaterial + AmbientLight + DirectionalLight。

4入门基础

Orbit Controls

在受光立方体场景中加入 OrbitControls,实现鼠标拖拽旋转、滚轮缩放和阻尼。

5入门基础

Rotating Cube

把动画、光照和 OrbitControls 组合起来,形成第一个完整可交互的 3D 旋转立方体场景。

6入门基础

Basic Lights

沿用上一个旋转立方体场景,只额外切换四种光源:AmbientLight、DirectionalLight、PointLight、SpotLight。

7入门基础

Geometry Types

常用几何体一览:Box、Sphere、Cylinder、Cone、Torus、TorusKnot、Icosahedron、Octahedron、Plane、Circle、Ring、Capsule 等。

8入门基础

Material Showcase

固定相同球体与 TorusKnot、固定同一套灯光,只替换 MeshBasic / Lambert / Phong / Standard 四种材质,对比它们对光照与高光的响应差异。

9入门基础

Camera Controls

OrbitControls 相机交互:鼠标拖拽旋转、滚轮缩放、右键平移、阻尼效果、自动旋转。

10入门基础

Texture Basics

纹理贴图基础:TextureLoader 加载外部图片、Canvas 程序化生成纹理、纹理重复与 UV 偏移动画。

11入门基础

Animation Basics

动画基础:requestAnimationFrame 动画循环、基于时间的运动(而非帧数)、正弦波动、轨道运动、脉冲缩放。

12交互与控制

Orbit Controls

实现 3D 场景的轨道相机控制,支持鼠标拖拽旋转、滚轮缩放和平移查看。

13交互与控制

Raycaster

使用 Raycaster 实现 3D 场景中的鼠标拾取、对象选择和交互检测。

14交互与控制

Gltf Loader

加载 GLTF/GLB 格式的 3D 模型,学习如何导入 Blender 等工具导出的场景。

15交互与控制

Loading Manager

使用 LoadingManager 统一管理多个资源的加载进度,实现加载界面。

16交互与控制

Virtual Joystick

虚拟摇杆控制器,支持移动端触控操作。

17科学与数学粒子系统交互与控制

Forest Fire Sim

Three.js 示例:forest fire sim,展示相关 3D 图形技术与实现方法。

18交互与控制

Path Recorder

路径录制回放,记录相机或物体运动轨迹。

19交互与控制

Webxr Hand Tracking

Three.js 示例:webxr hand tracking,展示相关 3D 图形技术与实现方法。

20交互与控制

Grid Snap

网格吸附功能,帮助对齐物体到网格点。

21几何体与建模交互与控制

Epidemic Spread Sir Model

Three.js 示例:epidemic spread sir,展示相关 3D 图形技术与实现方法。

22交互与控制

Decal

Three.js 示例:decal,展示相关 3D 图形技术与实现方法。

23几何体与建模交互与控制

Voxel Editor

体素编辑器,支持添加、删除和绘制体素方块。

24几何体与建模交互与控制

Sdf Sculptor

使用 SDF 建模工具实时雕刻 3D 模型,支持布尔运算。

25粒子系统交互与控制

Particle Settling

Three.js 示例:particle settling,展示相关 3D 图形技术与实现方法。

26交互与控制

Drag Controls

Three.js 示例:drag controls,展示相关 3D 图形技术与实现方法。

27交互与控制

Spline Editor

交互式样条曲线编辑器,支持添加控制点和调整曲线形状。

28交互与控制

Transform Controls

Three.js 示例:transform controls,展示相关 3D 图形技术与实现方法。

29交互与控制

Webxr Vr

WebXR 虚拟现实体验,支持头戴设备交互和空间定位。

30几何体与建模交互与控制

Topological Mesh

拓扑优化网格可视化,展示网格简化过程。

31交互与控制

Ulam Spiral Prime

Three.js 示例:ulam spiral prime,展示相关 3D 图形技术与实现方法。

32几何体与建模

Convex Geometry

凸包几何体计算,用于碰撞检测和点集外包。

33交互与控制

Webxr Grab

Three.js 示例:webxr grab,展示相关 3D 图形技术与实现方法。

34几何体与建模

Curve Modifier

沿曲线变形几何体,创建扭曲拉伸效果。

35交互与控制

Sandpile Self Organized

Three.js 示例:sandpile self organized,展示相关 3D 图形技术与实现方法。

36科学与数学几何体与建模

Simplify Modifier

网格简化算法,在保持外形的同时减少面数。

37几何体与建模

Extrude Shape

使用 ExtrudeGeometry 从 2D 形状创建 3D 模型,支持倒角和拉伸参数。

38几何体与建模

Curve Tube

沿曲线路径创建管状几何体,可用于道路、管道、绳索等建模。

39程序化生成几何体与建模

Voronoi Shatter

使用 Voronoi 碎片化效果,实现物体破碎和爆炸效果。

40程序化生成几何体与建模

Terrain Carver

程序化雕刻地形,支持添加洞穴、水体或建筑凹陷效果。

41几何体与建模

Text Geometry

创建 3D 文字效果,支持自定义字体、厚度和倒角参数。

42几何体与建模

Geometry Merge

合并多个几何体为单一网格,优化 Draw Call 并减少内存占用。

43几何体与建模

Instanced Mesh

使用 InstancedMesh 批量渲染相同几何体,大幅提升渲染性能(草、草地、树林等)。

44程序化生成几何体与建模

Voronoi Diagram

可视化 Voronoi 图结构,支持动态生成和交互。

45几何体与建模

Packing Spheres

球体堆积算法可视化,展示密堆积和空隙分布。

46几何体与建模

Isosurface

从 3D 标量场提取等值面,构建隐式曲面几何体。

47几何体与建模

Generative Art Forest

程序化生成艺术森林,包含树木、草地和光线。

48程序化生成几何体与建模

Terrain Lod

地形多细节层次(LOD),根据摄像机距离切换网格密度。

Three.js 互动实验室 | DogeOW 教程网