目前为止,我们还没有涉及到交互相关的内容,实际上,我们是需要知道我们点击的地方下面的第一个物体的信息,这个过程称为拾取。

简单拾取实现

我们可以通过颜色来获取是否成功点击,具体方式如下:

  1. 场景中有一个立方体;
  2. 鼠标点击之后,立方体变成红色的立方体;
  3. 判断鼠标点击的像素颜色是否是红色,如果是则表示点中了立方体,不是则表示没有点中;
  4. 恢复立方体的颜色为原来的颜色;

示例请点击:https://hammerc.github.io/dou3d-ts/learning/learningNotes/lesson_14/PickObject.html

拾取指定的面

上面的例子已经可以实现拾取整个立方体,我们希望可以拾取指定的一个面,采用的方式仍然同上,有一点区别如下:

  1. 场景中有一个立方体;
  2. 鼠标点击之后,立方体变成每个面都有不同透明度的立方体;
  3. 判断鼠标点击的像素透明度,可以知道点中了立方体的哪个面;
  4. 被点中的立方体的那个面绘制为白色;

示例请点击:https://hammerc.github.io/dou3d-ts/learning/learningNotes/lesson_14/PickFace.html

WebGL学习笔记(十三):拾取的更多相关文章

  1. python3.4学习笔记(十三) 网络爬虫实例代码,使用pyspider抓取多牛投资吧里面的文章信息,抓取政府网新闻内容

    python3.4学习笔记(十三) 网络爬虫实例代码,使用pyspider抓取多牛投资吧里面的文章信息PySpider:一个国人编写的强大的网络爬虫系统并带有强大的WebUI,采用Python语言编写 ...

  2. OpenGL学习笔记:拾取与选择

    转自:OpenGL学习笔记:拾取与选择 在开发OpenGL程序时,一个重要的问题就是互动,假设一个场景里面有很多元素,当用鼠标点击不同元素时,期待作出不同的反应,那么在OpenGL里面,是怎么知道我当 ...

  3. java之jvm学习笔记十三(jvm基本结构)

    java之jvm学习笔记十三(jvm基本结构) 这一节,主要来学习jvm的基本结构,也就是概述.说是概述,内容很多,而且概念量也很大,不过关于概念方面,你不用担心,我完全有信心,让概念在你的脑子里变成 ...

  4. Go语言学习笔记十三: Map集合

    Go语言学习笔记十三: Map集合 Map在每种语言中基本都有,Java中是属于集合类Map,其包括HashMap, TreeMap等.而Python语言直接就属于一种类型,写法上比Java还简单. ...

  5. webgl学习笔记五-纹理

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标 ...

  6. webgl学习笔记四-动画

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放   下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...

  7. webgl学习笔记三-平移旋转缩放

    写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation ...

  8. webgl学习笔记二-绘图多点

    写在前面 建议先看下第一篇webgl学习笔记一-绘图单点 第一篇文章,介绍了如何用webgl绘图一个点.接下来本文介绍的是如何绘制多个点.形成一个面. webgl提供了一种很方便的机制,即缓冲区对象, ...

  9. WebGL学习笔记二——绘制基本图元

    webGL的基本图元点.线.三角形 gl.drawArrays(mode, first,count) first,代表从第几个点开始绘制即顶点的起始位置 count,代表绘制的点的数量. mode,代 ...

  10. WebGL学习笔记(2)

    根据上一篇学习笔记,理解WebGL的工作原理及基本调用代码后,可以开始研究3D顶点对象的缩放.旋转.以及对对象进行可交互(鼠标或键盘控制)的旋转或者缩放. 要理解对象的旋转/缩放需要首先学习矩阵的计算 ...

随机推荐

  1. 攻防世界高手进阶之Web_python_block_chain(2018年DDCTFmini blockchain)

    打开题目大概看了一下,是有关区块链的题目, 感觉代码要格式化一下,不然没法看 代码格式化站点:https://www.html.cn/tool/js_beautify/ hash of genesis ...

  2. 石子合并问题--直线版 HRBUST - 1818

    t题目链接:https://vjudge.net/problem/HRBUST-1818 思路:一段已经合并的区间,分成两段区间,遍历所有能分开的区间. 代码有注释,基本就这样一个简单是思路. #in ...

  3. 为什么使用正则RegExp.test( )方法时第一次是 true,第二次是false?

    今天朋友问我一个问题,我现在需要多次匹配同一个内容,但是为什么我第一次匹配,直接是 true,而第二次匹配确实 false 呢? var s1 = "MRLP"; var s2 = ...

  4. 2017icpc beijing-I题-Colored Nodes

    题意 给定一个n个点m条边的无向图,一开始点i的颜色为i,在第i+kn秒开始时,与节点i相邻的节点会被染成i的颜色(k为自然数) 定义D(i,j)第j秒结束时颜色为i的节点个数,求: $F(i)=\l ...

  5. vuex传递数据的流程

    当组件修改数据的时候必须通过store.dispatch来调用actions中的方法,当actions中的方法被触发的时候通过调用commit的方法来触发mutations里面的方法,mutation ...

  6. JavaScript代码笔记重点:

    JavaScript的基本特点:JavaScript是基本对象和事件驱动,具有实时性,动态性,跨平台性和安全性等. JavaScript是对大小写敏感的. <!DOCTYPE html> ...

  7. Android编程权威指南笔记3:Android Fragment讲解与Android Studio中的依赖关系,如何添加依赖关系

    Android Fragment 当我在学习时,了解了Fragment词汇 Fragment是一种控制器对象,我就把所了解的简单说一下.activity可以派fragment完成一些任务,就是管理用户 ...

  8. JavaScript sort函数

    默认排序法则: 按照String类型ASCII码大小排序 如果要倒序排序,我们可以把大的数放前面: var arr = [10, 20, 1, 2]; arr.sort(function (x, y) ...

  9. 如果要对一些数据做处理,可以直接用自定义fliter

    {{[offer.brand, offer.series, offer.model] | carFilter}} filters里面写 carFilter ([brand, series, model ...

  10. xcode7: Undefined symbols for architecture i386: "_iconv_open", referenced from:

    在整合cocos和quick时,出现这个错误,我按照以前的方法 link binary with libraries 中add libiconv.2.dylib ,发现已经没有了这个库. 网上找了一下 ...