首页 > 文章 > 前端

HTML5制作3D效果入门教程

时间：2026-04-06 10:50:15 481浏览收藏

本文深入浅出地讲解了如何利用HTML5原生能力实现3D图形渲染，核心聚焦于WebGL这一无需插件、高性能的JavaScript图形API；通过从搭建canvas画布、获取WebGL上下文，到编写GLSL着色器、管理顶点与颜色缓冲区、引入gl-matrix进行投影与模型视图矩阵变换，再到驱动requestAnimationFrame实现流畅旋转动画，完整呈现了一个可运行的彩色3D三角形实例——不仅清晰拆解了WebGL底层工作流（初始化→着色器编译→数据上传→矩阵计算→循环绘制），更以实践为桥梁，为读者打下坚实基础，自然过渡到Three.js等高级3D库的学习之路。

HTML5代码如何制作3D效果 HTML5代码中WebGL的入门实例

要用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！');
}</p>

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;
}
`;</p>

片元着色器：决定像素的颜色。

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));
}</p>

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

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]);</p>

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

总结

这个例子展示了如何从零开始使用 WebGL 在 HTML5 中绘制一个带颜色、会旋转的 3D 三角形。虽然代码较底层，但能帮助理解 WebGL 的核心流程：

准备 canvas 和 WebGL 上下文
编写并编译顶点/片元着色器
创建缓冲区并传入顶点数据
使用矩阵实现 3D 变换
在动画循环中持续渲染

如果想进一步开发复杂 3D 场景，推荐使用 Three.js 这样的高级库，它封装了 WebGL 的复杂性，让 3D 开发更高效。

基本上就这些，不复杂但容易忽略细节。多练习几次就能掌握基本结构。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

HTML5代码

资料下载

编程学习资料下载

精选编程（Golang、Python、Java、C++、JavaScript等）教程、电子书与示例源码，一键打包本地下载学习。

立即下载