Webgl

HTML-in-Canvas 是由 Chrome 团队发起、在 WICG 下孵化的 Web 标准提案——让 <canvas> 的子元素从"不可见的 fallback"变成"可布局、可绘制、可交互的离屏 HTML 图层"。这意味 …

上节课用 GLSL 数学函数画出了形状和渐变。本节课进入着色器的"灵魂工具"——噪声函数：从 random 的雪花到 Perlin 的连续云雾，从单层噪声到 FBM 的分形细节，最终用噪声驱动云雾、地形、火焰和顶点变形。

上节课掌握了 GLSL 基础语法和 ShaderMaterial 的数据通道。本节课深入数学函数——mix / step / smoothstep 控制渐变与边界，sin / cos 制造波浪，dot / cross 做光照和 Fresnel，fract / mod 生成重复图 …

前 9 课用的都是 Three.js 内置材质（MeshStandardMaterial、MeshBasicMaterial……）。本节课开始写自定义 shader —— 直接用 GLSL 和 GPU 对话，让渐变、波浪、Fresnel 这些效果完全由代码生成，不再依赖内置材质 …

本文复刻 moeru.ai 落地页中两个最具沉浸感的交互模块：波点网格物理交互和3D 挂牌 Verlet 弹性吊绳系统。不涉及可变字体压力动画和 GitHub 成员头像加载。 01 整体架构与技术选型 原站是一个单页面沉浸式落地页，核心交互由 4 个模块组成。本文聚焦其中两个： …

前 8 课的动画都是在 requestAnimationFrame 循环里手动写位移和旋转。本节课引入 GSAP 补间动画和 Three.js 原生关键帧系统，让动画控制更优雅、更强大。 01 学习目标 本节课聚焦 Three.js 动画系统：

前 7 课我们一直在用代码创建几何体。真实项目中，3D 模型通常由美术在 Blender/Maya 中制作，导出为 GLTF/GLB 格式后加载到场景中。本节课掌握模型加载的完整流程：加载 → 压缩 → 缩放 → 动画。

场景图是 Three.js 的骨架系统。理解父子关系、变换继承和坐标系转换，就能用简单的几何体拼出复杂的 3D 结构。本节课通过太阳系模型和积木小动物拼装，深入理解场景图的树形结构。

纹理是给 3D 物体「穿衣服」的过程。理解 UV 坐标、学会加载和控制纹理、掌握环境贴图的反射原理，就能让场景从「素模」变成「有质感的世界」。 01 学习目标 本节课聚焦 Three.js 纹理与贴图系统：

相机决定了用户「从哪里看」和「看到多大范围」。掌握透视相机和正交相机的区别，理解视锥体和裁剪面，就能精确控制 3D 场景的视觉呈现。

灯光是 3D 场景的灵魂。掌握 5 种灯光类型和阴影三要素，就能让场景从「扁平感」变成「有层次的真实世界」。 从左到右：Ambient、Hemisphere、Directional、Point、Spot 五种灯光效果对比，下方为不同分辨率的阴影质量展示

材质决定了物体表面如何与光线交互。掌握 6 种材质类型和 PBR 参数，就能让 3D 物体从"塑料感"变成"照片级真实"。

几何体是 3D 世界的积木。掌握 5 种基础图元，就能组合出几乎任何形状。 从左到右：Wireframe 球体（低分段）、Box、Sphere、Cylinder、Torus，底部为棋盘格纹理的 Plane 地面

Three.js 的一切始于三个对象：Scene（舞台）、Camera（镜头）、Renderer（投影仪）。掌握这三件套，就掌握了 3D 世界的入场券。 法线材质立方体在黑色背景上旋转浮动，不同面呈现不同颜色（法线方向映射为 RGB）