当前位置：首页 > 文章列表 > 文章 > 前端 > HTML5制作3D效果入门教程

HTML5制作3D效果入门教程

2026-04-06 10:50:15 0浏览收藏

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);