代码改变世界

WebGL学习笔记(十三):拾取

2019-09-06 12:13 阿诚de窝 阅读(...) 评论(...) 编辑 收藏

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

简单拾取实现

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

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

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

拾取指定的面

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

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

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