《Canvas修仙传·第四重天元婴境（上集）》 ——WebGL虚空造物与Three.js破碎虚空之法
诸位道友，历经三重天劫的锤炼，今日我们终于触摸到前端修仙的至高境界——在浏览器中开辟三维宇宙！(๑˃̵ᴗ˂̵)و
章前虚空词典
🔍 元婴境术语表：
- 顶点(Vertex)：三维生物的基因序列
- 着色器(Shader)：操控物质法则的仙术
- 矩阵(Matrix)：空间变换的推背图
- 法线(Normal)：决定光影轨迹的引力线
- UV坐标：给三维生物纹身的定位系统
第一转：虚空初开·WebGL筑基
从Canvas 2D到WebGL的维度跃迁
🔄 维度差异对比表：
| 2D世界 | 3D宇宙 | |
|---|---|---|
| 坐标系 | 屏幕像素(x,y) | 三维空间(x,y,z) |
| 绘制单位 | 图形API（矩形/圆形） | 三角形（三个顶点构成面） |
| 渲染方式 | 立即模式 | 保留模式 |
| 操控级别 | 高级API | 接近硬件的底层API |
<!-- 开启虚空之门的法阵 -->
<canvas id="glCanvas" width="800" height="600"></canvas>
<script>
// 连接虚空通道
const canvas = document.getElementById('glCanvas')
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl')
// 检测灵力波动（WebGL支持）
if (!gl) {
alert('道友的浏览器尚未打通WebGL任督二脉！')
}
</script>
第二转：创世法则·三界初始化
WebGL三大核心要素
1. 顶点数据：创世基因库
// 创世之砖——三角形顶点数据
const vertices = new Float32Array([
// 前三角形
-0.5, -0.5, 0.0, // 左下
0.5, -0.5, 0.0, // 右下
0.0