当前位置：首页 > 文章列表 > 文章 > 前端 > HTML53D效果入门，WebGL教程详解

HTML53D效果入门，WebGL教程详解

2025-11-10 23:41:48 0浏览收藏

了解WebGL是什么

WebGL（Web Graphics Library）是一种JavaScript API，可在HTML5的canvas元素中绘制3D图形。它基于OpenGL ES，能利用用户的GPU进行硬件加速渲染。

关键点：

WebGL运行在浏览器中，兼容主流现代浏览器（Chrome、Firefox、Edge等）
直接操作顶点、着色器和纹理，控制底层渲染流程
原生使用JavaScript编写，但语法接近C语言风格

搭建第一个WebGL场景

从零开始创建一个简单的3D立方体，步骤如下：

1. 创建HTML结构

2. 获取WebGL上下文

const canvas = document.getElementById('myCanvas'); const gl = canvas.getContext('webgl'); if (!gl) { alert("不支持WebGL"); }

3. 编写着色器代码

WebGL需要两个着色器：顶点着色器和片元着色器。

// 顶点着色器 const vsSource = ` attribute vec4 aVertexPosition; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; void main() { gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition; } `;

// 片元着色器 const fsSource = void main() { gl_FragColor = vec4(1.0, 0.8, 0.0, 1.0); // 橙色 } ;

4. 初始化着色器程序并链接到上下文

你需要编译着色器、创建程序、绑定属性和uniform变量。这部分代码较固定，可封装成初始化函数。

5. 定义几何数据（如立方体顶点）

const vertices = [ // 前面四个顶点... ]; const positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

6. 设置视图和投影矩阵

使用mat4类（通常借助gl-matrix库）创建模型视图和透视投影矩阵。

7. 渲染循环

function render() { gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// 绑定缓冲、设置矩阵、绘制 gl.drawArrays(gl.TRIANGLES, 0, vertexCount);

requestAnimationFrame(render); } render();

使用Three.js简化开发

直接使用原生WebGL编码复杂且容易出错。推荐初学者使用Three.js——一个流行的WebGL封装库。

Three.js的优势：

提供Scene、Camera、Mesh等直观对象
内置几何体（立方体、球体等）、材质、光源
简化矩阵变换和动画处理

示例：用Three.js创建一个旋转立方体

import * as THREE from 'three';

const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('myCanvas') });

const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0xff8800 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube);

camera.position.z = 5;

function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate();