Three.js 演示 · 3D / WebGL 核心特效合集
把网页从 2D 带进 3D —— 几何体、光照材质、粒子、Shader、相机控制、实例化渲染，GPU 加速的图形能力。以下 8 个区块逐个复刻 Three.js 官网 / 示例站的标志性能力，全部真实渲染、可交互，无占位截图。
01 / GEOMETRY 旋转几何体 · TorusKnotGeometry
最基础的 Three.js 场景：一个几何体 + 一盏点光 + 一盏环境光。拖拽旋转视角，滚轮缩放 —— 官网首页头图用的就是这套最小组合。
鼠标 / 触摸拖拽旋转，滚轮缩放。
02 / CAMERA OrbitControls · 轨道相机
官方 OrbitControls 附加模块：阻尼惯性、自动旋转、可缩放边界，一行 controls.update() 接管所有轨道交互。
03 / MATERIALS 材质与光照对比
同一个球体、同一盏光，换 5 种内置材质：Basic（不受光）、Normal（法线可视化）、Standard（PBR 金属度/粗糙度）、Physical（PBR + 清漆层）、Toon（卡通分级着色）。
拖拽旋转公共光源方向，观察每种材质的响应差异。
04 / PARTICLES 粒子系统 · Points
BufferGeometry + Points 一次性提交上万个顶点，GPU 并行更新位置 —— 星空、烟雾、数据云的通用底层。
05 / SHADER 自定义 ShaderMaterial
手写 GLSL 顶点 + 片元着色器：顶点按 sin 波形位移，片元按高度与 uTime 混色 —— Three.js 官网 Shader 示例的核心手法。
纯 GPU 计算，CPU 端每帧只传一个 uTime 数值。
06 / DEFORM 几何体顶点形变
遍历 IcosahedronGeometry 每个顶点，按多层正弦噪声沿法线方向位移，逐帧回写 position 属性并重算法线 —— 有机形变 / 液态效果的常见做法。
07 / INSTANCING InstancedMesh · 批量实例化
1,331 个立方体共享同一份几何体与材质，仅用一次 draw call 渲染 —— 每帧只更新每个实例的变换矩阵，是大规模重复对象的标准方案。
08 / LINES Line · 参数曲线与线框
THREE.Line 沿三角函数参数方程逐帧重算顶点，画出随时间演化的利萨如曲线；叠加一层 WireframeGeometry 展示网格拓扑。