最核心的技术是WebGL，通过HTML5的canvas结合JavaScript使用WebGL API渲染3D图形。首先创建包含canvas的HTML页面，获取WebGL上下文，编写GLSL着色器定义顶点位置与颜色，编译着色器并链接成程序，接着设置顶点缓冲区传入三角形坐标和颜色数据，引入gl-matrix库创建投影和模型视图矩阵实现3D视角与旋转动画，最后在绘制函数中绑定缓冲区、启用属性指针、传递矩阵并调用drawArrays绘制三角形，通过requestAnimationFrame循环渲染实现持续旋转。整个流程涵盖初始化、着色器管理、数据传输、矩阵变换与动画，展示了WebGL基本架构，适合进一步学习Three.js等高级库。
要用HTML5实现3D效果，最核心的技术是 WebGL。WebGL 是基于 OpenGL ES 的 JavaScript API，可以在网页中直接渲染高性能的 3D 图形，无需插件。下面是一个简单的 WebGL 入门实例，帮助你理解如何用 HTML5 和原生 JavaScript 创建一个旋转的彩色三角形。
1. 搭建基础 HTML 结构
创建一个包含 canvas 元素的 HTML 页面，WebGL 将在这个画布上绘制 3D 内容。<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>WebGL 3D 入门示例</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="webgl-canvas" width="800" height="600"></canvas>
<script>
// WebGL 代码将写在这里
</script>
</body>
</html>
2. 初始化 WebGL 上下文
获取 canvas 元素并初始化 WebGL 渲染上下文。const canvas = document.getElementById('webgl-canvas');
const gl = canvas.getContext('webgl');
<p>if (!gl) {
alert('浏览器不支持 WebGL！');
}
3. 编写着色器程序
WebGL 使用 GLSL（OpenGL 着色语言）编写顶点着色器和片元着色器。顶点着色器：定义每个顶点的位置和颜色。
const vsSource = `
attribute vec4 aVertexPosition;
attribute vec4 aVertexColor;
<p>uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;</p><p>varying lowp vec4 vColor;</p><p>void main() {
gl_Position = uProjectionMatrix <em> uModelViewMatrix </em> aVertexPosition;
vColor = aVertexColor;
}
`;
片元着色器：决定像素的颜色。
const fsSource = `
varying lowp vec4 vColor;
void main() {
gl_FragColor = vColor;
}
`;4. 创建并编译着色器
将 GLSL 代码编译成 WebGL 可执行的着色器程序。function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
<p>if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('Shader 编译失败:', gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}</p><p>return shader;
}</p><p>const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);</p><p>const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);</p><p>if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
console.error('着色器程序链接失败:', gl.getProgramInfoLog(shaderProgram));
}
5. 设置缓冲区与顶点数据
定义一个彩色三角形的顶点位置和颜色，并传入 GPU。const positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); <p>const positions = [ 0.0, 0.5, 0.0, // 顶点1 -0.5, -0.5, 0.0, // 顶点2 0.5, -0.5, 0.0 // 顶点3 ];</p><p>gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p>const colorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);</p><p>const colors = [ 1.0, 0.0, 0.0, 1.0, // 红 0.0, 1.0, 0.0, 1.0, // 绿 0.0, 0.0, 1.0, 1.0 // 蓝 ];</p><p>gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
6. 创建变换矩阵（模拟 3D 视角）
使用 gl-matrix 库简化矩阵运算（需引入库）。在 head 中引入：
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix.min.js"></script>
JavaScript 中创建投影和视图矩阵：
const projectionMatrix = mat4.create(); mat4.perspective(projectionMatrix, 45 * Math.PI / 180, canvas.width / canvas.height, 0.1, 100.0); <p>const modelViewMatrix = mat4.create(); mat4.translate(modelViewMatrix, modelViewMatrix, [0.0, 0.0, -6.0]); mat4.rotate(modelViewMatrix, modelViewMatrix, performance.now() * 0.001, [0, 1, 0]);
7. 绘制图形
连接着色器变量与缓冲区数据，执行绘制。function drawScene() {
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
<p>gl.useProgram(shaderProgram);</p><p>// 更新旋转矩阵
const rotateTime = performance.now() * 0.001;
mat4.rotateY(modelViewMatrix, modelViewMatrix, 0.01);</p><p>// 传递矩阵到着色器
const projectionMatrixLocation = gl.getUniformLocation(shaderProgram, 'uProjectionMatrix');
const modelViewMatrixLocation = gl.getUniformLocation(shaderProgram, 'uModelViewMatrix');
gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix);
gl.uniformMatrix4fv(modelViewMatrixLocation, false, modelViewMatrix);</p><p>// 配置顶点位置属性
const posAttrLocation = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(posAttrLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(posAttrLocation);</p><p>// 配置颜色属性
const colorAttrLocation = gl.getAttribLocation(shaderProgram, 'aVertexColor');
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.vertexAttribPointer(colorAttrLocation, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(colorAttrLocation);</p><p>// 执行绘制
gl.drawArrays(gl.TRIANGLES, 0, 3);
}</p><p>// 动画循环
function render() {
drawScene();
requestAnimationFrame(render);
}
requestAnimationFrame(render);
总结
这个例子展示了如何从零开始使用 WebGL 在 HTML5 中绘制一个带颜色、会旋转的 3D 三角形。虽然代码较底层，但能帮助理解 WebGL 的核心流程：- 准备 canvas 和 WebGL 上下文
- 编写并编译顶点/片元着色器
- 创建缓冲区并传入顶点数据
- 使用矩阵实现 3D 变换
- 在动画循环中持续渲染
如果想进一步开发复杂 3D 场景，推荐使用 Three.js 这样的高级库，它封装了 WebGL 的复杂性，让 3D 开发更高效。
基本上就这些，不复杂但容易忽略细节。多练习几次就能掌握基本结构。
