WebGL学习笔记(十三):拾取
目前为止,我们还没有涉及到交互相关的内容,实际上,我们是需要知道我们点击的地方下面的第一个物体的信息,这个过程称为拾取。
简单拾取实现
我们可以通过颜色来获取是否成功点击,具体方式如下:
- 场景中有一个立方体;
- 鼠标点击之后,立方体变成红色的立方体;
- 判断鼠标点击的像素颜色是否是红色,如果是则表示点中了立方体,不是则表示没有点中;
- 恢复立方体的颜色为原来的颜色;
示例请点击:https://hammerc.github.io/dou3d-ts/learning/learningNotes/lesson_14/PickObject.html
拾取指定的面
上面的例子已经可以实现拾取整个立方体,我们希望可以拾取指定的一个面,采用的方式仍然同上,有一点区别如下:
- 场景中有一个立方体;
- 鼠标点击之后,立方体变成每个面都有不同透明度的立方体;
- 判断鼠标点击的像素透明度,可以知道点中了立方体的哪个面;
- 被点中的立方体的那个面绘制为白色;
示例请点击:https://hammerc.github.io/dou3d-ts/learning/learningNotes/lesson_14/PickFace.html
WebGL学习笔记(十三):拾取的更多相关文章
- python3.4学习笔记(十三) 网络爬虫实例代码,使用pyspider抓取多牛投资吧里面的文章信息,抓取政府网新闻内容
python3.4学习笔记(十三) 网络爬虫实例代码,使用pyspider抓取多牛投资吧里面的文章信息PySpider:一个国人编写的强大的网络爬虫系统并带有强大的WebUI,采用Python语言编写 ...
- OpenGL学习笔记:拾取与选择
转自:OpenGL学习笔记:拾取与选择 在开发OpenGL程序时,一个重要的问题就是互动,假设一个场景里面有很多元素,当用鼠标点击不同元素时,期待作出不同的反应,那么在OpenGL里面,是怎么知道我当 ...
- java之jvm学习笔记十三(jvm基本结构)
java之jvm学习笔记十三(jvm基本结构) 这一节,主要来学习jvm的基本结构,也就是概述.说是概述,内容很多,而且概念量也很大,不过关于概念方面,你不用担心,我完全有信心,让概念在你的脑子里变成 ...
- Go语言学习笔记十三: Map集合
Go语言学习笔记十三: Map集合 Map在每种语言中基本都有,Java中是属于集合类Map,其包括HashMap, TreeMap等.而Python语言直接就属于一种类型,写法上比Java还简单. ...
- webgl学习笔记五-纹理
写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标 ...
- webgl学习笔记四-动画
写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...
- webgl学习笔记三-平移旋转缩放
写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation ...
- webgl学习笔记二-绘图多点
写在前面 建议先看下第一篇webgl学习笔记一-绘图单点 第一篇文章,介绍了如何用webgl绘图一个点.接下来本文介绍的是如何绘制多个点.形成一个面. webgl提供了一种很方便的机制,即缓冲区对象, ...
- WebGL学习笔记二——绘制基本图元
webGL的基本图元点.线.三角形 gl.drawArrays(mode, first,count) first,代表从第几个点开始绘制即顶点的起始位置 count,代表绘制的点的数量. mode,代 ...
- WebGL学习笔记(2)
根据上一篇学习笔记,理解WebGL的工作原理及基本调用代码后,可以开始研究3D顶点对象的缩放.旋转.以及对对象进行可交互(鼠标或键盘控制)的旋转或者缩放. 要理解对象的旋转/缩放需要首先学习矩阵的计算 ...
随机推荐
- zabbix3.4配置客户端配置
上篇文章已经搭建好了zabbix_sever端,现在需要在192.168.200.200机器上配置监控项. 1.yum -y install zabbix zabbix-agent 2.配置zabbi ...
- Python 字符集
什么是字符? 1.在Python中,字符串中的内容都是字符. 2.什么是字符编码(encode)和字符集(charset)? 计算机只能识别数值,而字符不能识别,为了让计算机能处理字符,必须将字符和数 ...
- Java自动化环境搭建笔记(2)
Java自动化环境搭建笔记(2) 自动化测试 在笔记一中已经完成了一键构建项目.xml指定规划测试集.数据解耦与allure报告生成的开发.接下来便是: 浏览器驱动通过配置启动 页面元素定位解耦,通过 ...
- 洛谷 P1522 牛的旅行 Cow Tours
题目链接:https://www.luogu.org/problem/P1522 思路:编号,然后跑floyd,这是很清楚的.然后记录每个点在这个联通块中的最远距离. 然后分连通块,枚举两个点(不属于 ...
- iOS App开发那些事:如何选择合适的人、规范和框架?
http://www.cocoachina.com/ios/20141202/10386.html 自从做Team Leader之后,身上权责发生了变化,于是让我烦恼的不再是具体某个功能,某个界面的实 ...
- WGS84与CGCS2000坐标系
1.WGS84,WGS是世界大地测量系统World Geodetic System的缩写,84是说此坐标系是1984年建立的: 2.自上世纪60年代,美国军方相继推出WGS60.WGS66.WGS ...
- Linux OOM一二三
Linux开发一般会遇到“/proc/sys/vm/overcommit_memory”,即文件/etc/sysctl.conf中的vm.overcommit_memory,Overcommit的意思 ...
- 如何高效的阅读uni-app框架?(建议收藏)
作者 | Jeskson来源 | 达达前端小酒馆 uni-app的框架,配置:page.json,manifest.json,package.json,vue.config.js.脚本,应用程序,ma ...
- npm link 的用法
npm link 的用法 先到对应的自定义包下执行 npm link 会读取对应的 packagejson 中的名称 然后到对应的目录下执行 npm link your/own/npm/name 就会 ...
- 第08组 Alpha冲刺(6/6)
队名:955 组长博客:https://www.cnblogs.com/cclong/p/11913269.html 作业博客:https://edu.cnblogs.com/campus/fzu/S ...