WebGL 用鼠标控制物体旋转

news2025/1/12 22:52:27

目录

鼠标控制物体旋转 

如何实现物体旋转

示例程序（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)) return
  var 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 drawing
    draw(gl, n, viewProjMatrix, u_MvpMatrix, currentAngle);
    requestAnimationFrame(tick, canvas);
  };
  tick();
}

function initVertexBuffers(gl) {
  //    v6----- v5
  //   /|      /|
  //  v1------v0|
  //  | |     | |
  //  | |v7---|-|v4
  //  |/      |/
  //  v2------v3
  var vertices = new Float32Array([   // Vertex coordinates
     1.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 front
     1.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 right
     1.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 down
     1.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 coordinates
      1.0, 1.0,   0.0, 1.0,   0.0, 0.0,   1.0, 0.0,    // v0-v1-v2-v3 front
      0.0, 1.0,   0.0, 0.0,   1.0, 0.0,   1.0, 1.0,    // v0-v3-v4-v5 right
      1.0, 0.0,   1.0, 1.0,   0.0, 1.0,   0.0, 0.0,    // v0-v5-v6-v1 up
      1.0, 1.0,   0.0, 1.0,   0.0, 0.0,   1.0, 0.0,    // v1-v6-v7-v2 left
      0.0, 0.0,   1.0, 0.0,   1.0, 1.0,   0.0, 1.0,    // v7-v4-v3-v2 down
      0.0, 0.0,   1.0, 0.0,   1.0, 1.0,   0.0, 1.0     // v4-v7-v6-v5 back
  ]);
  // Indices of the vertices
  var indices = new Uint8Array([
     0, 1, 2,   0, 2, 3,    // front
     4, 5, 6,   4, 6, 7,    // right
     8, 9,10,   8,10,11,    // up
    12,13,14,  12,14,15,    // left
    16,17,18,  16,18,19,    // down
    20,21,22,  20,22,23     // back
  ]);

  var indexBuffer = gl.createBuffer();
  if (!initArrayBuffer(gl, vertices, 3, gl.FLOAT, 'a_Position')) return -1; // Vertex coordinates
  if (!initArrayBuffer(gl, texCoords, 2, gl.FLOAT, 'a_TexCoord')) return -1;// Texture coordinates
  gl.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 pressed
    var 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 released

  canvas.onmousemove = function(ev) { // Mouse is moved
    var x = ev.clientX, y = ev.clientY;
    if (dragging) {
      var factor = 100/canvas.height; // The rotation ratio
      var 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_MvpMatrix
  g_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坐标
  // 激活纹理单元0
  gl.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传递到uSampler
  gl.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.coloradmin.cn/o/1030142.html

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

相关文章

数据通信——传输层TCP（超时时间选择）

数据通信——传输层TCP（超时时间选择）

引言 TCP每一次发送报文段&#xff0c;就会对这个报文段设置一次计时器。如果时间到了却没有收到确认报文&#xff0c;那么就要重传该报文。 这个之前在TCP传输的机制中提到过&#xff0c;这个章节就来研究一下超时时间问题。 关于加权的概念 有必要提及一下加权的概念&#x…
阅读更多...
天地一体化指挥！平战结合的应急感知云来了

天地一体化指挥！平战结合的应急感知云来了

面向智慧应急数字化转型需求&#xff0c;天翼物联基于感知云平台创新能力&#xff0c;为客户提供泛协议接入、感知云应急平台、应急感知数据治理、决策处置大屏等在内的应急感知云服务&#xff0c;构建应急感知神经系统新型数字化底座&#xff0c;实现应急感知、预警、决策、处…
阅读更多...
程序员必须掌握的算法系列之贪心算法

程序员必须掌握的算法系列之贪心算法

一&#xff1a;引言 在计算机科学中&#xff0c;贪心算法&#xff08;Greedy Algorithm&#xff09;是一种基于贪心策略的算法思想&#xff0c;它在每一步选择中都采取当前状态下最优的选择&#xff0c;以希望最终能够得到全局最优解。贪心算法通常可以在较短的时间内找到问题…
阅读更多...
springcloud3 分布式事务实现逻辑思想2

springcloud3 分布式事务实现逻辑思想2

一 分布式事务逻辑 1.1 CAP理论 CAP原则又称CAP定理&#xff0c;指的是在一个分布式系统中&#xff0c;Consistency&#xff08;一致性&#xff09;、 Availability&#xff08;可用性&#xff09;、Partition tolerance&#xff08;分区容错性&#xff09;这3个基本需求&…
阅读更多...
SPI在Java中的实现与应用 | 京东物流技术团队

SPI在Java中的实现与应用 | 京东物流技术团队

1 SPI的概念 API API在我们日常开发工作中是比较直观可以看到的&#xff0c;比如在 Spring 项目中&#xff0c;我们通常习惯在写 service 层代码前&#xff0c;添加一个接口层&#xff0c;对于 service 的调用一般也都是基于接口操作&#xff0c;通过依赖注入&#xff0c;可以…
阅读更多...
【深度学习实验】前馈神经网络（六）：自动求导

【深度学习实验】前馈神经网络（六）：自动求导

目录 一、实验介绍 二、实验环境 1. 配置虚拟环境 2. 库版本介绍 三、实验内容 0. 导入必要的工具包 1. 标量求导 2. 矩阵求导 3. 计算图 一、实验介绍 PyTorch提供了自动求导机制&#xff0c;它是PyTorch的核心功能之一&#xff0c;用于计算梯度并进行反向传播。自动求…
阅读更多...
C++流插入和流提取的重载！

C++流插入和流提取的重载！

C作为C语言的衍生&#xff0c;其弥补了C语言中的很多不足&#xff0c;也对C语言进行了一定的优化&#xff01;今日就来讲解一下C中输入/出流相关的知识&#xff01;以及对输入/出的重载&#xff01;&#xff0c;希望读完本篇文章&#xff0c;能让读者们对C中输入/出流有更深一步…
阅读更多...
Java之IO概述以及

Java之IO概述以及

1.1 什么是IO 生活中&#xff0c;你肯定经历过这样的场景。当你编辑一个文本文件&#xff0c;忘记了ctrls &#xff0c;可能文件就白白编辑了。当你电脑上插入一个U盘&#xff0c;可以把一个视频&#xff0c;拷贝到你的电脑硬盘里。那么数据都是在哪些设备上的呢&#xff1f;键…
阅读更多...
散列(哈希)查找的定义，常见的散列函数设计以及处理哈希冲突方法

散列(哈希)查找的定义，常见的散列函数设计以及处理哈希冲突方法

1.散列表 1.散列表的定义 散列表(Hash Table)&#xff0c;又称哈希表。 是一种数据结构&#xff0c;特点是:数据元素的关键字与其存储地址直接相关。 特点&#xff1a; 若不同的关键字通过散列函数映射到同一个值&#xff0c;则称它们为“同义词”。通过散列函数确定的位置…
阅读更多...
Maven 设置环境变量（Windows、Linux）

Maven 设置环境变量（Windows、Linux）

文章目录 Windows 配置 Maven 环境变量Linux 配置 Maven 环境变量 如果想在任意路径下都能通过 mvn 命令运行 Maven 程序&#xff0c;就需要将 Maven 程序路径设置到环境变量中&#xff0c; 否则使用 mvn 命令时每次都要加上 Maven 程序的全路径 核心就一句话&#xff0c;把 M…
阅读更多...
坚鹏：中国邮政储蓄银行金融科技前沿技术发展与应用场景第4期

坚鹏：中国邮政储蓄银行金融科技前沿技术发展与应用场景第4期

中国邮政储蓄银行金融科技前沿技术发展与应用场景第4期培训圆满结束 中国邮政储蓄银行拥有优良的资产质量和显著的成长潜力&#xff0c;是中国领先的大型零售银行。2016年9月在香港联交所挂牌上市&#xff0c;2019年12月在上交所挂牌上市。中国邮政储蓄银行拥有近4万个营业网点…
阅读更多...
学习记忆——英语篇——右脑记忆单词

学习记忆——英语篇——右脑记忆单词

文章目录 英语字母形象起源右脑记忆单词的原则四大步骤第一步&#xff1a;摄取信息第二步&#xff1a;处理信息第三步&#xff1a;储存信息第四步&#xff1a;提取信息 训练例子字母形象训练 右脑记忆单词5大方法字源法编码法字母编码法字母组合编码法 拼音法全拼法拼音组合 熟…
阅读更多...
springcloud3 分布式事务解决方案seata之XA模式4

springcloud3 分布式事务解决方案seata之XA模式4

一 seata的模式 1.1 seata的几种模式比较 Seata基于上述架构提供了四种不同的分布式事务解决方案&#xff1a; XA模式&#xff1a;强一致性分阶段事务模式&#xff0c;牺牲了一定的可用性&#xff0c;无业务侵入 TCC模式&#xff1a;最终一致的分阶段事务模式&#xff0c;有…
阅读更多...
操作系统：中断和异常

操作系统：中断和异常

1.中断的作用 CPU上会运行两种程序&#xff0c;一种是操作系统内核程序&#xff08;是整个系统的管理者&#xff09;&#xff0c;一种是应用程序。 1.中断的特点 在合适的情况下&#xff0c;操作系统内核会把CPU的使用权主动让给应用程序。“中断”是让操作系统内核夺回CPu使…
阅读更多...
java智慧园区系统源码 智慧园区小程序源码

java智慧园区系统源码 智慧园区小程序源码

java智慧园区系统源码 智慧园区小程序源码 技术框架&#xff1a; 核心框架&#xff1a;Spring Boot 2.4.0 安全框架&#xff1a;JwtPermission 3.1.1 前端&#xff1a;Ant Design Vue 1.6.2 持久层框架&#xff1a;MyBatis-Plus 3.4.1 关系型数据库: Mysql 8.0.22 数据库…
阅读更多...
【开发篇】一、热部署

【开发篇】一、热部署

文章目录 1、手工启动热部署2、自动启动热部署3、热部署范围配置4、关闭热部署功能 1、手工启动热部署 日常开发与调试&#xff0c;改几行代码想看效果就得手动点重启&#xff0c;很繁琐&#xff0c;接下来考虑启动热部署。首先引入springboot开发者工具&#xff1a; <dep…
阅读更多...
找视频背景音乐素材，就上这6个网站。

找视频背景音乐素材，就上这6个网站。

找背景音乐、BGM、音效素材&#xff0c;就上这6个网站&#xff0c;国内外都有&#xff0c;免费下载&#xff0c;还可以商用&#xff0c;建议收藏起来~ 1、菜鸟图库 https://www.sucai999.com/audio.html?vNTYwNDUx 菜鸟图库是一个综合性素材网站&#xff0c;站内涵盖设计、图…
阅读更多...
ceph分布式存储部署

ceph分布式存储部署

一、概述 是一个统一的分布式存储系统&#xff0c;设计初衷是提供较好的性能、可靠性和可扩展性。 特点 1、统一存储 虽然 ceph 底层是一个分布式文件系统&#xff0c;但由于在上层开发了支持对象和块的接口。所以在开源存储软件中&#xff0c;能够一统江湖。至于能不能千秋万…
阅读更多...
单片机学习---＞Keil多文件工程

单片机学习---＞Keil多文件工程

1、在文件夹中创建新的文件夹 目录&#xff1a; App 文件夹&#xff1a;用于存放外设驱动文件&#xff0c;如 LED、数码管、定时器等。 Obj 文件夹&#xff1a;用于存放编译产生的 c/汇编/链接的列表清单、调试信息、 hex 文件、预览信息、封装库等文件。 Public 文件夹&#x…
阅读更多...
D. Edge Split

D. Edge Split

Problem - D - Codeforces 思路&#xff1a;思路想到了&#xff0c;但是不知道用什么方法写。。首先我们先看只有一个树的情况&#xff0c;那么如果我们所有的边是一个颜色&#xff0c;那么答案是1n&#xff0c;如果我们将其中的一条边变色&#xff0c;那么产生的答案是2n-1&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023