《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