第五节 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按钮交互
var xAixs = 0;
var yAixs = 1;
  • 5
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值