鼠标与键盘交互实例"/>
第五节 WebGL绘制、鼠标与键盘交互实例
学习交流欢迎加群：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按钮交互
更多推荐
第五节 WebGL绘制、鼠标与键盘交互实例
发布评论