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

最新推荐文章于 2024-04-30 09:30:00 发布

置顶

coder_路远

最新推荐文章于 2024-04-30 09:30:00 发布

阅读量9.1k

点赞数 5

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

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

版权

学习交流欢迎加群：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;

最低0.47元/天解锁文章

coder_路远

关注

5
点赞
踩
25

收藏

觉得还不错? 一键收藏
10
评论
第五节 WebGL绘制、鼠标与键盘交互实例

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

扫一扫

专栏目录