Three.js 互动实验室
打开就能运行,源码可以直接修改。用 573 个小实验理解浏览器里的 3D 图形编程。
Hello Scene
最简 Three.js 场景:Scene + Camera + Renderer 三件套,无动画,静态展示立方体。
Animation Loop
从静态场景迈向动态场景:加入 requestAnimationFrame,让立方体持续旋转,但仍使用无光照材质。
Lit Cube
在动画场景里引入受光材质与第一组灯光:MeshStandardMaterial + AmbientLight + DirectionalLight。
Orbit Controls
在受光立方体场景中加入 OrbitControls,实现鼠标拖拽旋转、滚轮缩放和阻尼。
Rotating Cube
把动画、光照和 OrbitControls 组合起来,形成第一个完整可交互的 3D 旋转立方体场景。
Basic Lights
沿用上一个旋转立方体场景,只额外切换四种光源:AmbientLight、DirectionalLight、PointLight、SpotLight。
Geometry Types
常用几何体一览:Box、Sphere、Cylinder、Cone、Torus、TorusKnot、Icosahedron、Octahedron、Plane、Circle、Ring、Capsule 等。
Material Showcase
固定相同球体与 TorusKnot、固定同一套灯光,只替换 MeshBasic / Lambert / Phong / Standard 四种材质,对比它们对光照与高光的响应差异。
Camera Controls
OrbitControls 相机交互:鼠标拖拽旋转、滚轮缩放、右键平移、阻尼效果、自动旋转。
Texture Basics
纹理贴图基础:TextureLoader 加载外部图片、Canvas 程序化生成纹理、纹理重复与 UV 偏移动画。
Animation Basics
动画基础:requestAnimationFrame 动画循环、基于时间的运动(而非帧数)、正弦波动、轨道运动、脉冲缩放。
Orbit Controls
实现 3D 场景的轨道相机控制,支持鼠标拖拽旋转、滚轮缩放和平移查看。
Raycaster
使用 Raycaster 实现 3D 场景中的鼠标拾取、对象选择和交互检测。
Gltf Loader
加载 GLTF/GLB 格式的 3D 模型,学习如何导入 Blender 等工具导出的场景。
Loading Manager
使用 LoadingManager 统一管理多个资源的加载进度,实现加载界面。
Virtual Joystick
虚拟摇杆控制器,支持移动端触控操作。
Forest Fire Sim
Three.js 示例:forest fire sim,展示相关 3D 图形技术与实现方法。
Path Recorder
路径录制回放,记录相机或物体运动轨迹。
Webxr Hand Tracking
Three.js 示例:webxr hand tracking,展示相关 3D 图形技术与实现方法。
Grid Snap
网格吸附功能,帮助对齐物体到网格点。
Epidemic Spread Sir Model
Three.js 示例:epidemic spread sir,展示相关 3D 图形技术与实现方法。
Decal
Three.js 示例:decal,展示相关 3D 图形技术与实现方法。
Voxel Editor
体素编辑器,支持添加、删除和绘制体素方块。
Sdf Sculptor
使用 SDF 建模工具实时雕刻 3D 模型,支持布尔运算。
Particle Settling
Three.js 示例:particle settling,展示相关 3D 图形技术与实现方法。
Drag Controls
Three.js 示例:drag controls,展示相关 3D 图形技术与实现方法。
Spline Editor
交互式样条曲线编辑器,支持添加控制点和调整曲线形状。
Transform Controls
Three.js 示例:transform controls,展示相关 3D 图形技术与实现方法。
Webxr Vr
WebXR 虚拟现实体验,支持头戴设备交互和空间定位。
Topological Mesh
拓扑优化网格可视化,展示网格简化过程。
Ulam Spiral Prime
Three.js 示例:ulam spiral prime,展示相关 3D 图形技术与实现方法。
Convex Geometry
凸包几何体计算,用于碰撞检测和点集外包。
Webxr Grab
Three.js 示例:webxr grab,展示相关 3D 图形技术与实现方法。
Curve Modifier
沿曲线变形几何体,创建扭曲拉伸效果。
Sandpile Self Organized
Three.js 示例:sandpile self organized,展示相关 3D 图形技术与实现方法。
Simplify Modifier
网格简化算法,在保持外形的同时减少面数。
Extrude Shape
使用 ExtrudeGeometry 从 2D 形状创建 3D 模型,支持倒角和拉伸参数。
Curve Tube
沿曲线路径创建管状几何体,可用于道路、管道、绳索等建模。
Voronoi Shatter
使用 Voronoi 碎片化效果,实现物体破碎和爆炸效果。
Terrain Carver
程序化雕刻地形,支持添加洞穴、水体或建筑凹陷效果。
Text Geometry
创建 3D 文字效果,支持自定义字体、厚度和倒角参数。
Geometry Merge
合并多个几何体为单一网格,优化 Draw Call 并减少内存占用。
Instanced Mesh
使用 InstancedMesh 批量渲染相同几何体,大幅提升渲染性能(草、草地、树林等)。
Voronoi Diagram
可视化 Voronoi 图结构,支持动态生成和交互。
Packing Spheres
球体堆积算法可视化,展示密堆积和空隙分布。
Isosurface
从 3D 标量场提取等值面,构建隐式曲面几何体。
Generative Art Forest
程序化生成艺术森林,包含树木、草地和光线。
Terrain Lod
地形多细节层次(LOD),根据摄像机距离切换网格密度。