HTML5 Canvas动态光影3D模型绘制教程

无法用Canvas 2D上下文真正渲染带动态光影的3D模型，必须使用WebGL或Three.js等封装库；纯2D仅支持有限伪3D光照模拟。

直接使用HTML5 Canvas的2D上下文来渲染具有真实动态光影效果的3D模型是不可行的。其根本原因在于，Canvas 2D API缺乏对三维深度测试、透视投影以及GPU加速光照计算的核心支持。若要在网页中实现逼真的动态光影3D模型，正确的技术路径是采用WebGL（通过Canvas的webgl上下文）或直接使用Three.js等高级图形库。而纯粹的2D Canvas仅能实现基于投影变换和手动计算的伪3D光照效果，不仅效果受限，代码复杂度也较高。

使用WebGL原生API实现动态光影的核心步骤

这是最接近“使用Canvas绘制接口”初衷且能实现真实光影的方案——本质是将Canvas作为WebGL的渲染载体。具体实现流程可分解为以下关键环节：

• 获取WebGL渲染上下文：使用 const gl = canvas.getContext('webgl'); 获取上下文对象，务必进行兼容性检测。
• 编写着色器程序：这是实现光影效果的核心。需要分别编写顶点着色器（处理顶点坐标与法线向量）和片元着色器（负责最终颜色与光照计算）。需将光源方向、物体法线等数据传入，核心光照强度计算通常依赖于法线与光向量的点积：dot(normal, lightDir)。
• 准备并绑定顶点数据：为每个顶点提供位置属性（vec3 aPosition）和关键的法线属性（vec3 aNormal）。法线决定了模型表面对光照的反射方式，必须在模型变换后进行归一化处理，并转换到统一的视图或世界坐标系中。
• 实现光源动态更新：要实现动态光影，需要在JavaScript的动画循环中实时更新光源位置（例如使其环绕模型移动），并通过uniform变量将新的 lightPos 传递给着色器程序。
• 启用深度缓冲区测试：必须调用 gl.enable(gl.DEPTH_TEST) 来启用深度测试，以确保三维物体间正确的前后遮挡关系，否则渲染结果将出现视觉错乱。

使用Three.js高效创建带光影的交互式3D模型

对于大多数实际网页开发项目，更推荐采用此方案。Three.js底层基于WebGL，但封装了复杂的图形学细节，让开发者能更专注于效果与交互逻辑，它同样以Canvas元素作为最终输出目标。

• 引入Three.js库：通过CDN链接引入核心库：。
• 初始化三维场景：创建场景（Scene）、透视相机（PerspectiveCamera），并实例化一个绑定到目标Canvas的WebGL渲染器（WebGLRenderer）。
• 配置场景光照：至少添加一个方向光（THREE.DirectionalLight，模拟平行光源）和一个环境光（THREE.AmbientLight，用于提亮阴影区域，避免纯黑色块）。
• 创建几何体与材质：加载或内置一个几何体（如BoxGeometry），并为其应用一个对光照有反应的材质，例如MeshStandardMaterial或MeshPhongMaterial。
• 驱动动画循环：在requestAnimationFrame循环中更新模型的旋转等变换，并调用 renderer.render(scene, camera) 进行绘制。一个具备动态光影的旋转3D模型即可呈现。

纯2D Canvas模拟伪3D光影的应用场景

那么，2D Canvas的伪3D光影模拟是否毫无价值？并非如此。它适用于对物理精度要求不高、追求风格化或需要极轻量级实现的场景，例如三维数据可视化标签云、简单的球面文字特效或低多边形风格插图。

立即学习“前端免费学习笔记（深入）”；

• 设定固定光源方向：预先手动定义一个光源方向向量，例如 [0, 0, 1] 代表从屏幕正前方照射。
• 手动计算光照强度：针对每个三维点，根据其所在曲面（如球面）的数学公式手动计算法向量，然后与预设光源方向进行点乘运算，得到该点的明暗强度值。
• 基于强度值动态绘制：根据计算出的强度值，动态设置 ctx.fillStyle 的颜色（例如 rgb(255 * intensity, 255 * intensity, 200 * intensity)），随后通过 fillRect、arc 等方法进行逐点或逐形状绘制。还可结合 globalAlpha 或径向渐变来模拟高光与衰减效果。
• 明确技术局限性：此方式渲染性能较低，缺乏真正的Z-Buffer深度管理，难以实现流畅的交互式旋转。它更适合固定视角下的静态展示或简单的补间动画。

实现逼真光影效果的关键细节提醒

无论选择WebGL原生开发还是使用Three.js库，以下三个细节都将直接影响最终光影效果的真实度与专业性，需要重点关注：

• 确保法线数据准确：若从外部导入3D模型（如glTF、OBJ格式），必须确认模型文件包含正确的法线信息。如果是程序化生成几何体（如球体、圆柱），则需要依据数学公式计算并归一化每个顶点的法线向量。
• 统一向量计算坐标系：所有参与光照计算的向量，包括顶点法线、光源方向、视线方向，都必须在同一个坐标空间（通常选择视图空间或世界空间）中进行运算，否则会导致光照错位或失真。
• 适配高分辨率显示屏：为确保Canvas渲染内容清晰、光影边缘锐利，必须针对设备像素比进行适配。核心代码如下：
  canvas.width = canvas.offsetWidth * window.devicePixelRatio;
canvas.height = canvas.offsetHeight * window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);