如何使用HTML5的Canvas绘制接口模拟具有动态光影的网页版3D模型

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

直接用 Canvas 2D 上下文无法真正渲染 3D 模型，它不支持深度测试、透视投影或 GPU 加速的光照计算。要实现“动态光影的网页版 3D 模型”，必须借助 WebGL（Canvas 的 webgl 上下文），或使用封装了 WebGL 的高级库（如 Three.js）。纯 2D Canvas 只能做伪 3D 投影+手工模拟光照，效果有限且难以维护。

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

这是最贴近“Canvas 绘制接口”又具备真实光影能力的方式——本质是把 Canvas 当作 WebGL 的渲染目标：

• 获取 webgl 上下文而非 2d： const gl = canvas.getContext('webgl');，检查是否可用
• 编写顶点着色器（处理位置+法向量）和片元着色器（计算光照）： 光源方向、物体法向量需传入着色器，用点乘（dot(normal, lightDir)）算漫反射强度
• 为每个顶点提供位置 vec3 aPosition 和法向量 vec3 aNormal： 法向量决定光照响应，必须随模型旋转实时归一化并变换到世界/视图空间
• 在 JavaScript 中动态更新光源位置（例如绕模型旋转）： 每帧重算 lightPos，传给着色器 uniform 变量
• 启用深度测试：gl.enable(gl.DEPTH_TEST)，避免前后遮挡错误

用 Three.js 快速实现带光照的旋转 3D 模型

更推荐此方案——它基于 WebGL，但屏蔽底层复杂性，仍运行在 Canvas 元素上：

• 引入库：<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
• 创建场景、相机、WebGL 渲染器（绑定到你的 <canvas>）
• 添加基础光照：至少一个 THREE.DirectionalLight（模拟太阳）和一个 THREE.AmbientLight（防止背光全黑）
• 加载或生成几何体（如 BoxGeometry），赋予带光照响应的材质（如 MeshStandardMaterial）
• 动画循环中更新模型旋转，并调用 renderer.render(scene, camera)

仅用 2D Canvas “模拟”光影的适用场景

适用于轻量、风格化、非物理精确的需求（如数据可视化标签云、简易球面文字）：

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

• 预设一组光源方向（如 [0, 0, 1] 表示正面光），对每个 3D 点手动计算其在球面/曲面上的法向量
• 用 ctx.fillStyle 根据点乘结果动态设置 RGB 值（如 rgb(255 * intensity, 255 * intensity, 200 * intensity)）
• 逐点绘制（fillRect 或 beginPath + arc），配合 globalAlpha 或渐变模拟高光
• 性能差、无深度、不能交互旋转——仅适合固定视角的静态或缓动动画

关键细节提醒

无论选哪种路径，以下三点直接影响光影真实感：

• 法向量必须准确：导入模型时确保包含法线；自建几何体（如球体）需按球坐标公式生成单位法向量
• 光源与视角需统一空间：所有向量（法线、光源、视线）应在同一坐标系（通常为视图空间）下运算
• Canvas 分辨率适配设备像素比：否则模糊，影响光影边缘精度：
  canvas.width = canvas.offsetWidth * window.devicePixelRatio;
canvas.height = canvas.offsetHeight * window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);