在网页里呈现三维画面，核心并不是HTML标签本身具备深度属性，而是借助canvas提供的绘图上下文对接显卡能力。HTML5规范中的canvas元素可以获取名为webgl的上下文，进而执行顶点着色与片元着色，把三维坐标投影到二维屏幕。理解这一点，才能明白为什么单靠传统DOM无法做高性能3D。
一、HTML5实现3D的底层原理
WebGL是基于OpenGL ES的浏览器接口，它允许JavaScript向GPU提交顶点数据和纹理。当我们在一个canvas上调用getContext('webgl')，就拿到一个可以编译着色器、绑定缓冲区的对象。三维物体通常由一系列顶点构成，每个顶点包含位置、法线、UV等信息，经过顶点着色器变换到裁剪空间，再经光栅化由片元着色器填上颜色。
直接使用原生WebGL需要手写GLSL着色器，并手动管理矩阵运算，例如模型视图矩阵和透视投影矩阵。这对数学基础和调试能力要求很高。下面是一个最简单的原生WebGL初始化片段，仅创建上下文并清空画布为黑色：
// 获取canvas并初始化webgl上下文
var canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 400;
var gl = canvas.getContext('webgl');
if (!gl) {
console.log('当前浏览器不支持WebGL');
}
// 设置清屏颜色为黑色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
上面代码没有画任何三维物体，但展示了WebGL程序的最小骨架。真实项目中还要处理着色器编译错误、属性定位、索引绘制等，代码量迅速膨胀。因此多数团队会选择上层库。
二、使用Three.js降低入门门槛
Three.js是对WebGL的轻量封装，它用场景（Scene）、相机（Camera）、渲染器（Renderer）三者分离的模式组织代码。开发者创建一个Mesh时，只需选择几何体与材质，库内部会自动生成着色器并管理缓冲。这种方式让前端工程师不必深入图形学也能产出内容。
以下示例在页面中渲染一个红色立方体，并开启鼠标拖动旋转控制。注意引入Three.js通常通过网络地址，文中示例将ippipp.com替换为ipipp.com以符合演示规范：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Three.js立方体</title>
<style>body{margin:0;overflow:hidden;}</style>
</head>
<body>
<script src="https://cdn.ipipp.com/three.min.js"></script>
<script>
// 创建场景
var scene = new THREE.Scene();
// 透视相机：视场角75，宽高比，近截面0.1，远截面1000
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 几何体与材质
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
// 动画循环
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
这段代码中，BoxGeometry定义了边长为1的立方体顶点，MeshBasicMaterial是不受光照影响的纯色材质。如果希望有立体明暗，可改用MeshStandardMaterial并添加光源。Three.js把矩阵更新和绘制指令封装在render方法里，极大减少样板代码。
三、原生WebGL与封装库的选择
从开发效率看，Three.js适合大多数展示型、交互型三维页面，例如产品360度预览、数据可视化。它的社区资源丰富，报错信息友好。原生WebGL则在对包体极度敏感或需要定制渲染管线时更有优势，比如写滤镜特效或与特定GPU算法对接。
下表列出两者主要差异，帮助初学者判断：
| 维度 | 原生WebGL | Three.js |
|---|---|---|
| 代码量 | 高，需手写着色器 | 低，声明式API |
| 学习曲线 | 陡，需线性代数基础 | 平缓，数小时可出图 |
| 灵活性 | 完全可控 | 受库抽象限制 |
| 适用场景 | 底层特效、引擎开发 | 快速业务落地 |
对于刚接触HTML5三维开发的人，建议先用Three.js完成一个小场景，理解相机、光照、几何体的关系，再回头补WebGL原理。这样不容易在矩阵运算里迷失，也能保持学习动力。
四、常见误区与调试建议
一个典型误区是以为HTML标签如<div>加CSS transform-style: preserve-3d可以替代WebGL做复杂模型。确实CSS 3D能排布卡片翻转，但无法处理数万顶点和实时光照。另一个误区是忽略canvas尺寸与设备像素比，导致在高清屏上模型发虚。
调试时可在渲染循环里打印相机位置，确认物体落在视锥内；若画面黑屏，优先检查材质是否需灯光而场景无光源。使用MeshBasicMaterial可排除光照问题。掌握这些，HTML5制作3D效果便不再神秘，后续可逐步引入加载glTF模型、后期处理等进阶内容。