最核心的技术是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 内容。WebGL 3D 入门示例
2. 初始化 WebGL 上下文
获取 canvas 元素并初始化 WebGL 渲染上下文。const canvas = document.getElementById('webgl-canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('浏览器不支持 WebGL！');
}
3. 编写着色器程序
WebGL 使用 GLSL（OpenGL 着色语言）编写顶点着色器和片元着色器。顶点着色器：定义每个顶点的位置和颜色。
const vsSource = ` attribute vec4 aVertexPosition; attribute vec4 aVertexColor;uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix;
varying lowp vec4 vColor;
void main() { gl_Position = uProjectionMatrix uModelViewMatrix 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);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('Shader 编译失败:', gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
console.error('着色器程序链接失败:', gl.getProgramInfoLog(shaderProgram));
}
5. 设置缓冲区与顶点数据
定义一个彩色三角形的顶点位置和颜色，并传入 GPU。const positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);const positions = [ 0.0, 0.5, 0.0, // 顶点1 -0.5, -0.5, 0.0, // 顶点2 0.5, -0.5, 0.0 // 顶点3 ];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
立即学习“前端免费学习笔记（深入）”；
const colorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
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 // 蓝 ];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
6. 创建变换矩阵（模拟 3D 视角）
使用 gl-matrix 库简化矩阵运算（需引入库）。在 head 中引入：
JavaScript 中创建投影和视图矩阵：
const projectionMatrix = mat4.create(); mat4.perspective(projectionMatrix, 45 * Math.PI / 180, canvas.width / canvas.height, 0.1, 100.0);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);
gl.useProgram(shaderProgram);
// 更新旋转矩阵
const rotateTime = performance.now() * 0.001;
mat4.rotateY(modelViewMatrix, modelViewMatrix, 0.01);
// 传递矩阵到着色器
const projectionMatrixLocation = gl.getUniformLocation(shaderProgram, 'uProjectionMatrix');
const modelViewMatrixLocation = gl.getUniformLocation(shaderProgram, 'uModelViewMatrix');
gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix);
gl.uniformMatrix4fv(modelViewMatrixLocation, false, modelViewMatrix);
// 配置顶点位置属性
const posAttrLocation = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(posAttrLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(posAttrLocation);
// 配置颜色属性
const colorAttrLocation = gl.getAttribLocation(shaderProgram, 'aVertexColor');
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.vertexAttribPointer(colorAttrLocation, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(colorAttrLocation);
// 执行绘制
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
// 动画循环
function render() {
drawScene();
requestAnimationFrame(render);
}
requestAnimationFrame(render);
总结
这个例子展示了如何从零开始使用 WebGL 在 HTML5 中绘制一个带颜色、会旋转的 3D 三角形。虽然代码较底层，但能帮助理解 WebGL 的核心流程：- 准备 canvas 和 WebGL 上下文
- 编写并编译顶点/片元着色器
- 创建缓冲区并传入顶点数据
- 使用矩阵实现 3D 变换
- 在动画循环中持续渲染
如果想进一步开发复杂 3D 场景，推荐使用 Three.js 这样的高级库，它封装了 WebGL 的复杂性，让 3D 开发更高效。
基本上就这些，不复杂但容易忽略细节。多练习几次就能掌握基本结构。
