第五节 WebGL绘制、鼠标与键盘交互实例

最新推荐文章于 2024-06-19 23:52:03 发布

置顶

coder_路远

最新推荐文章于 2024-06-19 23:52:03 发布

阅读量9.2k

点赞数 5

分类专栏： WebGL入门文章标签： webgl交互鼠标交互键盘交互 webgl绘制

本文链接：https://blog.csdn.net/qq_37338983/article/details/78556125

版权

本文通过一个实例演示了如何使用WebGL绘制彩色立方体，并实现鼠标（shift+左键/中键/右键）和键盘（shift+滚轮）的交互操作，包括旋转、平移和缩放。详细介绍了HTML文档结构、interactiveCube.js文件内容以及着色器代码。

摘要由CSDN通过智能技术生成

学习交流欢迎加群：789723098，博主会将一些demo整理共享

前几篇一直在讲一些基础性的内容，之前的介绍一直都是理论上的解释，理论总要与实际相结合，才能有所收获，知识也才能得到有效的应用。下面，就从一个实例开始讲解，这个实例绘制了一个彩色立方体，且实现了键盘与鼠标的交互，shift+鼠标左键或中建是旋转立方体，shift+鼠标右键是平移立方体，shift+鼠标滚轮缩放立方体，其效果图如下：

这里写图片描述

接下来就详细地附上程序和注释。

1 HTML文档

其中，MV.js与cuon-matrix.js是相关地矩阵运算库，button用于添加底部地交互按。

interactiveCube.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webgl-interactive-cube</title>
    <script type="text/javascript" src="libs/initShader.js"></script>
    <script type="text/javascript" src="libs/webgl-utils.js"></script>
    <script type="text/javascript" src="libs/MV.js"></script>
    <script type="text/javascript" src="libs/cuon-matrix.js"></script>
    <script type="text/javascript" src="js/cube/interactiveCube.js"></script>
</head>
<body>
<canvas id="WebGL-mouseCube" width="1000" height="680"></canvas>

<br/>
<p><strong>鼠标操作: “shift+左键和中键旋转” “shift+右键平移” “shift+滚轮缩放”</strong></p>
<button id ="xRotate">绕x轴旋转</button>
<button id ="yRotate">绕y轴旋转</button>
<button id ="zRotate">绕z轴旋转</button>
<button id ="sRotate">开始/停止旋转</button>
</body>
</html>

2 interactiveCube.js文件

/**
 * Created by wjh on 2017/10/31.
 */

//定义变量

//用于绘制模型
var canvas, gl;
var numVertices = 36;
var points = [], colors = [];

//用于HTML按钮交互
var xAixs = 0;
var yAixs = 1;