微信登录

画布元素 - 3D 绘图 - 3D 场景的交互

前端 - HTML5 《画布元素 - 3D 绘图 - 3D 场景的交互》

引言

在现代前端开发中，HTML5 的画布元素（<canvas>）为我们提供了强大的绘图能力，不仅可以进行 2D 绘图，借助 WebGL 还能实现 3D 绘图。而 3D 场景的交互则能让用户与 3D 世界进行更自然、更有趣的互动，提升用户体验。本文将深入探讨如何在 HTML5 画布上实现 3D 绘图，并添加交互功能。

3D 绘图基础

在 HTML5 中，我们主要使用 WebGL 来进行 3D 绘图。WebGL 是一种基于 OpenGL ES 2.0 的 JavaScript API，它允许我们在网页上创建和操作 3D 图形。下面是一个简单的创建 3D 立方体的示例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>3D Cube</title>
  8.     <style>
  9.         canvas {
  10.             display: block;
  11.             width: 100%;
  12.             height: 100%;
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  18.     <canvas id="glCanvas"></canvas>
  19.     <script>
  20.         // 获取 canvas 元素
  21.         const canvas = document.getElementById('glCanvas');
  22.         // 获取 WebGL 上下文
  23.         const gl = canvas.getContext('webgl');
  25.         if (!gl) {
  26.             alert('Unable to initialize WebGL. Your browser or machine may not support it.');
  27.             return;
  28.         }
  30.         // 顶点着色器代码
  31.         const vertexShaderSource = `
  32.             attribute vec4 a_position;
  33.             void main() {
  34.                 gl_Position = a_position;
  35.             }
  36.         `;
  38.         // 片段着色器代码
  39.         const fragmentShaderSource = `
  40.             precision mediump float;
  41.             void main() {
  42.                 gl_FragColor = vec4(1, 0, 0, 1);
  43.             }
  44.         `;
  46.         // 创建着色器函数
  47.         function createShader(gl, type, source) {
  48.             const shader = gl.createShader(type);
  49.             gl.shaderSource(shader, source);
  50.             gl.compileShader(shader);
  51.             const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  52.             if (success) {
  53.                 return shader;
  54.             }
  55.             console.log(gl.getShaderInfoLog(shader));
  56.             gl.deleteShader(shader);
  57.         }
  59.         // 创建着色器程序函数
  60.         function createProgram(gl, vertexShader, fragmentShader) {
  61.             const program = gl.createProgram();
  62.             gl.attachShader(program, vertexShader);
  63.             gl.attachShader(program, fragmentShader);
  64.             gl.linkProgram(program);
  65.             const success = gl.getProgramParameter(program, gl.LINK_STATUS);
  66.             if (success) {
  67.                 return program;
  68.             }
  69.             console.log(gl.getProgramInfoLog(program));
  70.             gl.deleteProgram(program);
  71.         }
  73.         // 创建顶点和片段着色器
  74.         const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
  75.         const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
  77.         // 创建着色器程序
  78.         const program = createProgram(gl, vertexShader, fragmentShader);
  80.         // 获取属性位置
  81.         const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
  83.         // 创建缓冲区
  84.         const positionBuffer = gl.createBuffer();
  85.         gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  87.         // 立方体顶点数据
  88.         const positions = [
  89.             -0.5, -0.5, 0.5,
  90.             0.5, -0.5, 0.5,
  91.             0.5, 0.5, 0.5,
  92.             -0.5, 0.5, 0.5,
  93.             -0.5, -0.5, -0.5,
  94.             0.5, -0.5, -0.5,
  95.             0.5, 0.5, -0.5,
  96.             -0.5, 0.5, -0.5
  97.         ];
  99.         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
  101.         // 调整画布大小
  102.         function resizeCanvasToDisplaySize(canvas) {
  103.             const displayWidth = canvas.clientWidth;
  104.             const displayHeight = canvas.clientHeight;
  105.             if (canvas.width!== displayWidth || canvas.height!== displayHeight) {
  106.                 canvas.width = displayWidth;
  107.                 canvas.height = displayHeight;
  108.             }
  109.         }
  111.         resizeCanvasToDisplaySize(canvas);
  112.         gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  114.         // 启用属性
  115.         gl.enableVertexAttribArray(positionAttributeLocation);
  116.         const size = 3;
  117.         const type = gl.FLOAT;
  118.         const normalize = false;
  119.         const stride = 0;
  120.         const offset = 0;
  121.         gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset);
  123.         // 使用着色器程序
  124.         gl.useProgram(program);
  126.         // 绘制立方体
  127.         const primitiveType = gl.TRIANGLES;
  128.         const offsetDraw = 0;
  129.         const count = 36;
  130.         gl.drawArrays(primitiveType, offsetDraw, count);
  131.     </script>
  132. </body>
  134. </html>

代码解释

  1. 获取 WebGL 上下文：通过 canvas.getContext('webgl') 获取 WebGL 上下文，用于后续的 3D 绘图操作。
  2. 创建着色器和着色器程序：WebGL 使用顶点着色器和片段着色器来处理图形的顶点和颜色。顶点着色器负责处理顶点的位置，片段着色器负责处理每个像素的颜色。
  3. 创建缓冲区：缓冲区用于存储顶点数据，通过 gl.createBuffer() 创建缓冲区，并使用 gl.bufferData() 将顶点数据存储到缓冲区中。
  4. 绘制图形：使用 gl.drawArrays() 方法绘制图形。

3D 场景的交互

实现 3D 场景的交互通常涉及到鼠标和键盘事件的处理。下面是一个添加鼠标交互功能的示例代码，允许用户通过鼠标拖动来旋转立方体：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>3D Cube Interaction</title>
  8.     <style>
  9.         canvas {
  10.             display: block;
  11.             width: 100%;
  12.             height: 100%;
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  18.     <canvas id="glCanvas"></canvas>
  19.     <script>
  20.         const canvas = document.getElementById('glCanvas');
  21.         const gl = canvas.getContext('webgl');
  23.         if (!gl) {
  24.             alert('Unable to initialize WebGL. Your browser or machine may not support it.');
  25.             return;
  26.         }
  28.         // 顶点着色器代码
  29.         const vertexShaderSource = `
  30.             attribute vec4 a_position;
  31.             uniform mat4 u_modelViewMatrix;
  32.             uniform mat4 u_projectionMatrix;
  33.             void main() {
  34.                 gl_Position = u_projectionMatrix * u_modelViewMatrix * a_position;
  35.             }
  36.         `;
  38.         // 片段着色器代码
  39.         const fragmentShaderSource = `
  40.             precision mediump float;
  41.             void main() {
  42.                 gl_FragColor = vec4(1, 0, 0, 1);
  43.             }
  44.         `;
  46.         // 创建着色器和着色器程序
  47.         function createShader(gl, type, source) {
  48.             const shader = gl.createShader(type);
  49.             gl.shaderSource(shader, source);
  50.             gl.compileShader(shader);
  51.             const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  52.             if (success) {
  53.                 return shader;
  54.             }
  55.             console.log(gl.getShaderInfoLog(shader));
  56.             gl.deleteShader(shader);
  57.         }
  59.         function createProgram(gl, vertexShader, fragmentShader) {
  60.             const program = gl.createProgram();
  61.             gl.attachShader(program, vertexShader);
  62.             gl.attachShader(program, fragmentShader);
  63.             gl.linkProgram(program);
  64.             const success = gl.getProgramParameter(program, gl.LINK_STATUS);
  65.             if (success) {
  66.                 return program;
  67.             }
  68.             console.log(gl.getProgramInfoLog(program));
  69.             gl.deleteProgram(program);
  70.         }
  72.         const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
  73.         const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
  74.         const program = createProgram(gl, vertexShader, fragmentShader);
  76.         // 获取属性和统一变量位置
  77.         const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
  78.         const modelViewMatrixUniformLocation = gl.getUniformLocation(program, 'u_modelViewMatrix');
  79.         const projectionMatrixUniformLocation = gl.getUniformLocation(program, 'u_projectionMatrix');
  81.         // 创建缓冲区
  82.         const positionBuffer = gl.createBuffer();
  83.         gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  85.         // 立方体顶点数据
  86.         const positions = [
  87.             -0.5, -0.5, 0.5,
  88.             0.5, -0.5, 0.5,
  89.             0.5, 0.5, 0.5,
  90.             -0.5, 0.5, 0.5,
  91.             -0.5, -0.5, -0.5,
  92.             0.5, -0.5, -0.5,
  93.             0.5, 0.5, -0.5,
  94.             -0.5, 0.5, -0.5
  95.         ];
  97.         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
  99.         // 调整画布大小
  100.         function resizeCanvasToDisplaySize(canvas) {
  101.             const displayWidth = canvas.clientWidth;
  102.             const displayHeight = canvas.clientHeight;
  103.             if (canvas.width!== displayWidth || canvas.height!== displayHeight) {
  104.                 canvas.width = displayWidth;
  105.                 canvas.height = displayHeight;
  106.             }
  107.         }
  109.         resizeCanvasToDisplaySize(canvas);
  110.         gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  112.         // 启用属性
  113.         gl.enableVertexAttribArray(positionAttributeLocation);
  114.         const size = 3;
  115.         const type = gl.FLOAT;
  116.         const normalize = false;
  117.         const stride = 0;
  118.         const offset = 0;
  119.         gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset);
  121.         // 创建投影矩阵
  122.         const fieldOfView = 45 * Math.PI / 180;
  123.         const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  124.         const zNear = 0.1;
  125.         const zFar = 100.0;
  126.         const projectionMatrix = mat4.create();
  127.         mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
  129.         // 创建模型视图矩阵
  130.         const modelViewMatrix = mat4.create();
  131.         mat4.translate(modelViewMatrix, modelViewMatrix, [0.0, 0.0, -6.0]);
  133.         // 鼠标交互变量
  134.         let isDragging = false;
  135.         let lastX = 0;
  136.         let lastY = 0;
  137.         let rotationX = 0;
  138.         let rotationY = 0;
  140.         // 鼠标事件处理函数
  141.         canvas.addEventListener('mousedown', (event) => {
  142.             isDragging = true;
  143.             lastX = event.clientX;
  144.             lastY = event.clientY;
  145.         });
  147.         canvas.addEventListener('mousemove', (event) => {
  148.             if (isDragging) {
  149.                 const dx = (event.clientX - lastX) * 0.01;
  150.                 const dy = (event.clientY - lastY) * 0.01;
  151.                 rotationX += dy;
  152.                 rotationY += dx;
  153.                 lastX = event.clientX;
  154.                 lastY = event.clientY;
  155.             }
  156.         });
  158.         canvas.addEventListener('mouseup', () => {
  159.             isDragging = false;
  160.         });
  162.         // 渲染函数
  163.         function render() {
  164.             // 清除画布
  165.             gl.clearColor(0.0, 0.0, 0.0, 1.0);
  166.             gl.clearDepth(1.0);
  167.             gl.enable(gl.DEPTH_TEST);
  168.             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  170.             // 更新模型视图矩阵
  171.             mat4.identity(modelViewMatrix);
  172.             mat4.translate(modelViewMatrix, modelViewMatrix, [0.0, 0.0, -6.0]);
  173.             mat4.rotateX(modelViewMatrix, modelViewMatrix, rotationX);
  174.             mat4.rotateY(modelViewMatrix, modelViewMatrix, rotationY);
  176.             // 设置统一变量
  177.             gl.useProgram(program);
  178.             gl.uniformMatrix4fv(projectionMatrixUniformLocation, false, projectionMatrix);
  179.             gl.uniformMatrix4fv(modelViewMatrixUniformLocation, false, modelViewMatrix);
  181.             // 绘制立方体
  182.             const primitiveType = gl.TRIANGLES;
  183.             const offsetDraw = 0;
  184.             const count = 36;
  185.             gl.drawArrays(primitiveType, offsetDraw, count);
  187.             // 请求下一帧动画
  188.             requestAnimationFrame(render);
  189.         }
  191.         // 开始渲染
  192.         render();
  193.     </script>
  194.     <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.3.0/gl-matrix-min.js"></script>
  195. </body>
  197. </html>

代码解释

  1. 添加统一变量：在顶点着色器中添加 u_modelViewMatrix 和 u_projectionMatrix 统一变量，用于处理模型视图变换和投影变换。
  2. 鼠标事件处理：通过监听 mousedown、mousemove 和 mouseup 事件，实现鼠标拖动旋转立方体的功能。
  3. 更新模型视图矩阵：在渲染函数中，根据鼠标拖动的偏移量更新模型视图矩阵，实现立方体的旋转效果。

总结

通过本文的介绍，我们了解了如何在 HTML5 画布上使用 WebGL 进行 3D 绘图，并添加交互功能。以下是一个简单的总结表格：

功能 描述
3D 绘图 使用 WebGL 创建 3D 图形，包括顶点着色器、片段着色器、缓冲区等
3D 场景交互 通过监听鼠标和键盘事件，实现 3D 场景的交互，如旋转、缩放等

希望本文能帮助你更好地理解和实现 HTML5 画布上的 3D 绘图和交互功能。

精彩教程

.bat程序教程
python入门基础教程
Pandas教程
Pygame教程
Django3.2.9教程
Flask1.1.1教程
python3.X - 区块链教程
Java教程
Spring教程
C#教程
PHP教程
R教程
Node.js教程
mysql数据库教程
Redis数据库教程
MongoDB数据库教程
RabbitMQ教程
Lua教程
FindBI教程
HTML5教程
CSS教程
Javascript教程
jQuery教程
微信小程序教程
微信小游戏教程
Vue.js教程
服务器教程
TensorFlow教程
PyTorch教程
Unity教程
Objective-C教程
Android教程
AppleScript教程
Mac - SHELL教程
算法教程
Python教程
数据库教程
运维工具教程
Nginx教程
Docker教程
粤ICP备19057273号-3