HTML5代码如何制作3D效果 HTML5代码中WebGL的入门实例-html教程-PHP中文网

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

看不見的法師

发布： 2025-11-05 18:04:02

原创

829人浏览过

最核心的技术是WebGL，通过HTML5的canvas结合JavaScript使用WebGL API渲染3D图形。首先创建包含canvas的HTML页面，获取WebGL上下文，编写GLSL着色器定义顶点位置与颜色，编译着色器并链接成程序，接着设置顶点缓冲区传入三角形坐标和颜色数据，引入gl-matrix库创建投影和模型视图矩阵实现3D视角与旋转动画，最后在绘制函数中绑定缓冲区、启用属性指针、传递矩阵并调用drawArrays绘制三角形，通过requestAnimationFrame循环渲染实现持续旋转。整个流程涵盖初始化、着色器管理、数据传输、矩阵变换与动画，展示了WebGL基本架构，适合进一步学习Three.js等高级库。

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！');
}

登录后复制

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

登录后复制