WebGL 用鼠标控制物体旋转

目录

鼠标控制物体旋转 

如何实现物体旋转

示例程序（RotateObject.js）

代码详解

示例效果

鼠标控制物体旋转 

有时候，WebGL程序需要让用户通过鼠标操作三维物体。这一节来分析示例程序RotateObject，该程序允许用户通过拖动（即按住左键移动）鼠标旋转三维物体。为了简单，示例程序中的三维物体是一个立方体，但拖曳鼠标旋转物体的方法却适用于所有物体。下图显示了程序的运行效果，立方体上贴有纹理图像。

如何实现物体旋转

我们已经知道如何旋转二维图形或三维物体了：就是使用模型视图投影矩阵来变换顶点的坐标。现在需要使用鼠标来控制物体旋转，就需要根据鼠标的移动情况创建旋转矩阵，更新模型视图投影矩阵，并对物体的顶点坐标进行变换。 

我们可以这样来实现：在鼠标左键按下时记录鼠标的初始坐标，然后在鼠标移动的时候用当前坐标减去初始坐标，获得鼠标的位移，然后根据这个位移来计算旋转矩阵。显然，我们需要监听鼠标的移动事件，并在事件响应函数中计算鼠标的位移、旋转矩阵，从而旋转立方体。下面看一下示例程序。

示例程序（RotateObject.js）

如下显示了示例程序的代码，如你所见，着色器部分没什么特别的。顶点着色器使用模型视图投影矩阵变换顶点坐标（第7行），并向片元着色器传入纹理坐标以映射纹理（第8行）。

var VSHADER_SOURCE ='attribute vec4 a_Position;\n' +'attribute vec2 a_TexCoord;\n' +'uniform mat4 u_MvpMatrix;\n' +'varying vec2 v_TexCoord;\n' +'void main() {\n' +'  gl_Position = u_MvpMatrix * a_Position;\n' +'  v_TexCoord = a_TexCoord;\n' +'}\n';
var FSHADER_SOURCE ='#ifdef GL_ES\n' +'precision mediump float;\n' +'#endif\n' +'uniform sampler2D u_Sampler;\n' +'varying vec2 v_TexCoord;\n' +'void main() {\n' +'  gl_FragColor = texture2D(u_Sampler, v_TexCoord);\n' +'}\n';function main() {var canvas = document.getElementById('webgl');var gl = getWebGLContext(canvas);if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) returnvar n = initVertexBuffers(gl);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.enable(gl.DEPTH_TEST);var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');var viewProjMatrix = new Matrix4();viewProjMatrix.setPerspective(30.0, canvas.width / canvas.height, 1.0, 100.0);viewProjMatrix.lookAt(3.0, 3.0, 7.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);// 注册事件处理函数var currentAngle = [0.0, 0.0]; // 绕z轴旋转角度，绕y轴旋转角度initEventHandlers(canvas, currentAngle);if (!initTextures(gl)) return  // 设置纹理var tick = function() {   // Start drawingdraw(gl, n, viewProjMatrix, u_MvpMatrix, currentAngle);requestAnimationFrame(tick, canvas);};tick();
}function initVertexBuffers(gl) {//    v6----- v5//   /|      /|//  v1------v0|//  | |     | |//  | |v7---|-|v4//  |/      |///  v2------v3var vertices = new Float32Array([   // Vertex coordinates1.0, 1.0, 1.0,  -1.0, 1.0, 1.0,  -1.0,-1.0, 1.0,   1.0,-1.0, 1.0,    // v0-v1-v2-v3 front1.0, 1.0, 1.0,   1.0,-1.0, 1.0,   1.0,-1.0,-1.0,   1.0, 1.0,-1.0,    // v0-v3-v4-v5 right1.0, 1.0, 1.0,   1.0, 1.0,-1.0,  -1.0, 1.0,-1.0,  -1.0, 1.0, 1.0,    // v0-v5-v6-v1 up-1.0, 1.0, 1.0,  -1.0, 1.0,-1.0,  -1.0,-1.0,-1.0,  -1.0,-1.0, 1.0,    // v1-v6-v7-v2 left-1.0,-1.0,-1.0,   1.0,-1.0,-1.0,   1.0,-1.0, 1.0,  -1.0,-1.0, 1.0,    // v7-v4-v3-v2 down1.0,-1.0,-1.0,  -1.0,-1.0,-1.0,  -1.0, 1.0,-1.0,   1.0, 1.0,-1.0     // v4-v7-v6-v5 back]);var texCoords = new Float32Array([   // Texture coordinates1.0, 1.0,   0.0, 1.0,   0.0, 0.0,   1.0, 0.0,    // v0-v1-v2-v3 front0.0, 1.0,   0.0, 0.0,   1.0, 0.0,   1.0, 1.0,    // v0-v3-v4-v5 right1.0, 0.0,   1.0, 1.0,   0.0, 1.0,   0.0, 0.0,    // v0-v5-v6-v1 up1.0, 1.0,   0.0, 1.0,   0.0, 0.0,   1.0, 0.0,    // v1-v6-v7-v2 left0.0, 0.0,   1.0, 0.0,   1.0, 1.0,   0.0, 1.0,    // v7-v4-v3-v2 down0.0, 0.0,   1.0, 0.0,   1.0, 1.0,   0.0, 1.0     // v4-v7-v6-v5 back]);// Indices of the verticesvar indices = new Uint8Array([0, 1, 2,   0, 2, 3,    // front4, 5, 6,   4, 6, 7,    // right8, 9,10,   8,10,11,    // up12,13,14,  12,14,15,    // left16,17,18,  16,18,19,    // down20,21,22,  20,22,23     // back]);var indexBuffer = gl.createBuffer();if (!initArrayBuffer(gl, vertices, 3, gl.FLOAT, 'a_Position')) return -1; // Vertex coordinatesif (!initArrayBuffer(gl, texCoords, 2, gl.FLOAT, 'a_TexCoord')) return -1;// Texture coordinatesgl.bindBuffer(gl.ARRAY_BUFFER, null);gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);return indices.length;
}function initEventHandlers(canvas, currentAngle) {var dragging = false;         // 是否在拖动var lastX = -1, lastY = -1;   // 鼠标的开始位置canvas.onmousedown = function(ev) {   // Mouse is pressedvar x = ev.clientX, y = ev.clientY;// 如果鼠标在canvas内就开始拖动var rect = ev.target.getBoundingClientRect();if (rect.left <= x && x < rect.right && rect.top <= y && y < rect.bottom) {lastX = x; lastY = y;dragging = true;}};canvas.onmouseup = function(ev) { dragging = false;  }; // Mouse is releasedcanvas.onmousemove = function(ev) { // Mouse is movedvar x = ev.clientX, y = ev.clientY;if (dragging) {var factor = 100/canvas.height; // The rotation ratiovar dx = factor * (x - lastX);var dy = factor * (y - lastY);// 将x轴旋转角度限制为-90到90度currentAngle[0] = Math.max(Math.min(currentAngle[0] + dy, 90.0), -90.0);currentAngle[1] = currentAngle[1] + dx; // 拿y轴举例，鼠标水平移动，物体会以Y轴旋转，所以水平的移动距离直接影响y轴要转动角度}lastX = x, lastY = y;};
}var g_MvpMatrix = new Matrix4(); // 模型视图投影矩阵
function draw(gl, n, viewProjMatrix, u_MvpMatrix, currentAngle) {// 计算模型视图投影矩阵并将其传递给u_MvpMatrixg_MvpMatrix.set(viewProjMatrix);g_MvpMatrix.rotate(currentAngle[0], 1.0, 0.0, 0.0); // 绕x轴旋转g_MvpMatrix.rotate(currentAngle[1], 0.0, 1.0, 0.0); // 绕y轴旋转gl.uniformMatrix4fv(u_MvpMatrix, false, g_MvpMatrix.elements);gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);     // 清除颜色|深度缓冲gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);   // 画画
}function initArrayBuffer(gl, data, num, type, attribute) {var buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, buffer);gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);var a_attribute = gl.getAttribLocation(gl.program, attribute);gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);gl.enableVertexAttribArray(a_attribute);return true;
}function initTextures(gl) {var texture = gl.createTexture(); // 创建温丽丽对象var u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler'); // 获取uSampler的存储位置（_S）var image = new Image();image.onload = function(){ loadTexture(gl, texture, u_Sampler, image); };image.src = '../resources/sky.jpg';return true;
}function loadTexture(gl, texture, u_Sampler, image) {gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);  // 翻转图像Y坐标// 激活纹理单元0gl.activeTexture(gl.TEXTURE0);// 将纹理对象绑定到2维目标（先绑定到纹理单元）gl.bindTexture(gl.TEXTURE_2D, texture);// 设置纹理参数gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);// 将图像设置为纹理，设置图像参数gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);// 将纹理单元0传递到uSamplergl.uniform1i(u_Sampler, 0);
}

代码详解

首先，main（）函数计算出了初始的模型视图投影矩阵（第29～31行）。程序将根据鼠标位移来实时更新该矩阵。 

然后，鼠标移动事件响应函数实现了用鼠标旋转三维物体的逻辑。currentAngle变量表示当前的旋转角度，它是一个数组，因为物体的旋转需要被分解为绕x轴旋转和绕y轴旋转两步，因此需要两个角度值（第34行）。真正注册事件响应函数的过程发生在initEventHandlers（）函数中（第35行）。真正绘制的过程发生在tick（）函数中（第37行）。

initEventHandler（）函数的任务是注册鼠标响应事件函数（第87行），包括：鼠标左键按下事件（第91行）、鼠标左键松开事件（第101行），以及鼠标移动事件（第103行）。

当鼠标左键被按下时，首先检查鼠标是否在＜canvas＞元素内部（第95行），如果是，就将鼠标左键按下时的位置坐标保存到lastX和lastY变量中（第96行），并将dragging变量赋值为true，表示拖曳操作（即按住鼠标左键移动）开始了。

鼠标左键被松开时，表示拖曳操作结束了，将dragging变量赋值为false（第101行）。

鼠标移动事件响应函数最为重要（第103行）：首先检查dragging变量，判断当前是否处于拖动状态。如果不在拖曳状态，说明是鼠标的正常移动（左键松开状态下的移动），那就什么都不做。如果处于拖曳状态，就计算出当前鼠标（相对于上次鼠标移动事件触发时）的移动距离，即位移值，并将结果保存在dx和dy变量中（第107～108行）。注意，位移值在存入变量前按比例缩小了，这样dx和dy的值就与＜canvas＞自身的大小无关了。有了鼠标当前的位移dx和dy，就可以根据这两个值计算出当前三维物体（相对于上次鼠标移动事件触发时）在x轴和y轴上的旋转角度值（第110和111行）。而且，程序还将物体在y轴上的旋转角度限制在正负90度之间，这样做的原因仅仅是为了展示技巧，你也可以将其删掉。最后，把当前鼠标的位置坐标赋值给lastX和lastY。

一旦成功地将鼠标的移动转化为旋转矩阵，我们就可以用旋转矩阵更新物体的状态（第121～122行）。当程序再次调用tick（）函数进行绘制时，就绘制出了旋转后的物体。

示例效果

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/84270.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

DC/DC开关电源学习笔记（十）Buck降压电路仿真及工程应用实例

DC/DC开关电源学习笔记（十）Buck降压电路仿真及工程应用实例

（十）Buck降压电路仿真及工程应用实例 1. 仿真应用实例1.1 案例一1.2 案例二2. 工程应用实例2.1 数字DC/DC应用实例2.2 模拟DC/DC应用实例1. 仿真应用实例 1.1 案例一 仿真技术要求输入：输入电压30~90V，输出电压28V，输出电流最大10A，开关频率100KHz。我们按照参数极限工…
阅读更多...
一、八大排序（sort）

一、八大排序（sort）

文章目录 一、时间复杂度&#xff08;一&#xff09;定义&#xff1a;常数操作 二、空间复杂度&#xff08;一&#xff09;定义&#xff1a; 三、排序&#xff08;一&#xff09;选择排序1.定义2.代码3.特性 &#xff08;二&#xff09;冒泡排序1.定义2.代码3.特性 &#xff08…
阅读更多...
雷龙CS SD NAND(贴片式TF卡)性能体验及应用

雷龙CS SD NAND(贴片式TF卡)性能体验及应用

前段时间有幸得到了雷龙出品的贴片式的TF卡的芯片及转接板&#xff0c;从而对其产品进行了相应的了解和测评。 从获得的相关资料看&#xff0c;雷龙出品的贴片式芯片分为两类&#xff0c;即BOW型和AOW型&#xff0c;其中BOW型为第一代产品&#xff0c;属商业级&#xff1b;AOW…
阅读更多...
【网络协议】Http-中

【网络协议】Http-中

搜索引擎&#xff1a;搜索引擎是指根据一定的策略、运用特定的计算机程序从互联网上采集信息&#xff0c;在对信息进行组织和处理后&#xff0c;为用户提供检索服务&#xff0c;将检索的相关信息展示给用户的系统。搜索引擎是工作于互联网上的一门检索技术&#xff0c;它旨在提…
阅读更多...
简明 SQL 组合查询指南：掌握 UNION 实现数据筛选

简明 SQL 组合查询指南：掌握 UNION 实现数据筛选

在SQL中&#xff0c;组合查询是一种将多个SELECT查询结果合并的操作&#xff0c;通常使用UNION和UNION ALL两种方式。 UNION 用于合并多个查询结果集&#xff0c;同时去除重复的行&#xff0c;即只保留一份相同的数据。UNION ALL 也用于合并多个查询结果集&#xff0c;但不去除…
阅读更多...
XSS跨站脚本攻击

XSS跨站脚本攻击

XSS全称&#xff08;Cross Site Scripting&#xff09;跨站脚本攻击,XSS属于客户端攻击&#xff0c;受害者最终是用户&#xff0c;在网页中嵌入客户端恶意脚本代码&#xff0c;最常用javascript语言。&#xff08;注意&#xff1a;叠成样式表CSS已经被占用所以叫XSS&#xff09…
阅读更多...
Mac使用sz/rz

Mac使用sz/rz

从使用体验上说,sz/rz要比scp要好得多.但Mac上使用这两个命令需要进行相应配置. sz&#xff1a;将选定的文件发送&#xff08;send&#xff09;到本地机器 rz&#xff1a;运行该命令会弹出一个文件选择窗口&#xff0c;从本地选择文件上传到Linux服务器 下载安装lrzsz brew i…
阅读更多...
探索智能应用的基石：多模态大模型赋能文档图像处理

探索智能应用的基石：多模态大模型赋能文档图像处理

目录 0 写在前面1 文档图像分析新重点2 token荒&#xff1a;电子文档助力大模型3 大模型赋能智能文档分析4 文档图像大模型应用可能性4.1 专有大模型4.2 多模态模型4.3 设计思路 总结 0 写在前面 中国智能产业高峰论坛(CIIS2023)旨在为政企研学各界学者专家提供同台交流的机会…
阅读更多...
rom修改----安卓系列机型如何内置app 如何选择so文件内置

rom修改----安卓系列机型如何内置app 如何选择so文件内置

系统内置app的需求 在与各工作室对接中操作单中&#xff0c;很多需要内置客户特定的有些app到系统里&#xff0c;这样方便客户刷入固件后直接调用。例如内置apk 去开机引导 去usb调试 默认开启usb安全设置等等。那么很多app内置有不同的反应。有的可以直接内置。有的需要加so…
阅读更多...
基于 Socket 网络编程

基于 Socket 网络编程

基于 Socket 网络编程 前言一、基于Socket的网络通信传输&#xff08;传输层&#xff09;二、UDP 的数据报套接字编程1、UDP 套接字编程 API2、使用 UDP Socket 实现简单通信 三、TCP 流套接字编程1、TCP 流套接字编程 API2、使用 TCP Socket 实现简单通信3、使用 Tcp 协议进行…
阅读更多...
【实战案例】技术转项目经理容易踩的坑，我都踩了

【实战案例】技术转项目经理容易踩的坑，我都踩了

“带团队容易&#xff0c;带好团队难。” 这是身边一位项目经理近期在团队管理方面的深刻感悟。目前&#xff0c;他手上的一个项目被迫暂停了&#xff0c;项目团队也散了。下面给大家简要分享下这个项目案例。 【案例分享】 小李负责的是一个二次开发的项目&#xff0c;所涉及…
阅读更多...
ULID 在 Java 中的应用: 使用 `getMonotonicUlid` 生成唯一标识符

ULID 在 Java 中的应用: 使用 `getMonotonicUlid` 生成唯一标识符

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…
阅读更多...
python MP4视频转GIF动图

python MP4视频转GIF动图

python MP4视频转GIF动图 引言一、转换代码二、PyQt界面编写2.1 效果展示2.2 源码 三、打包成可执行文件(.exe) 一个相当于原视频三倍速的GIF动图 引言 将MP4格式的视频转为GIF动图可以方便地向他人展示动画效果。GIF是网络上广泛使用的图像格式之一&#xff0c;几乎所有的网…
阅读更多...
C#-WinForm-发送邮件

C#-WinForm-发送邮件

登录QQ邮箱——设置——开启“POP3/SMTP服务” 登陆QQ邮箱→打开设置→开启“POP3/SMTP服务”&#xff0c;获取“授权码” 简单总结一下&#xff1a; 1、使用SmtpClient发送电子邮件是很简单的&#xff0c;只要正确创建了MailMessage对象和SmtpClient就可以很容易的发送出去电…
阅读更多...
大二层—多链接透明互联协议如何工作

大二层—多链接透明互联协议如何工作

大二层就引入了 TRILL&#xff08;Transparent Interconnection of Lots of Link&#xff09;&#xff0c;即多链接透明互联协议。它的基本思想是&#xff0c;二层环有问题&#xff0c;三层环没有问题&#xff0c;那就把三层的路由能力模拟在二层实现。 运行 TRILL 协议的交换…
阅读更多...
【计算机网络】深入理解TCP协议二（连接管理机制、WAIT_TIME、滑动窗口、流量控制、拥塞控制）

【计算机网络】深入理解TCP协议二（连接管理机制、WAIT_TIME、滑动窗口、流量控制、拥塞控制）

TCP协议 1.连接管理机制2.再谈WAIT_TIME状态2.1理解WAIT_TIME状态2.2解决TIME_WAIT状态引起的bind失败的方法2.3监听套接字listen第二个参数介绍 3.滑动窗口3.1介绍3.2丢包情况分析 4.流量控制5.拥塞控制5.1介绍5.2慢启动 6.捎带应答、延时应答 1.连接管理机制 正常情况下&…
阅读更多...
Vulnhub系列靶机-Hackadmeic.RTB1

Vulnhub系列靶机-Hackadmeic.RTB1

文章目录 Vulnhub系列靶机-Hackadmeic.RTB11. 信息收集1.1 主机扫描1.2 端口扫描1.3 目录爆破 2. 漏洞探测3. 漏洞利用3.1 反弹Shell 4. 内核提权 Vulnhub系列靶机-Hackadmeic.RTB1 1. 信息收集 1.1 主机扫描 arp-scan -l1.2 端口扫描 nmap -A -p- 192.168.188.184扫描到了…
阅读更多...
传统的经典问题 Java 的 Interface 是干什么的

传统的经典问题 Java 的 Interface 是干什么的

传统的经典问题 Java 的 Interface 是干什么 解答 上面的这个问题应该还是比较好回答的吧。 只要你做过 Java &#xff0c;通常 Interface 的问题多多少少会遇到&#xff0c;而且可能会遇到一大堆。 在JAVA编程语言中是一个抽象类型&#xff08;Abstract Type&#xff09;&…
阅读更多...
SkyWalking快速上手（一）——安装单机版SkyWalking、使用SkyWalking

SkyWalking快速上手（一）——安装单机版SkyWalking、使用SkyWalking

文章目录 什么是SkyWalking为什么选择SkyWalking安装步骤前置条件环境要求下载 SkyWalking 配置 SkyWalkingSkywalking 使用Agent 配置Collector 配置 启动 SkyWalking配置SkyWalking代理 SkyWalking的监控功能分布式调用链追踪性能指标监控告警和报警 总结 什么是SkyWalking …
阅读更多...
javabean项目专项练习(1) 文字格斗游戏

javabean项目专项练习(1) 文字格斗游戏

main中是这样写的 如下是character类的描述 总结一下(个人) : 这是一题面向对象的编程, 个人编程后感是: 核心就是在于自己会不会取定义一个类, 如果是多个对象(同一个类),能不能捋顺类的方法的关系,个人觉得黑马程序员up主给出来的分析方法特别好用. 步骤: 先把在类里该该…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023