13. 选中整个物体或它的某一个面

本教程翻译自官方教程Picking Collisions,各位也可以进入本站镜像站点查看

本文目录

  1. 鼠标选中碰撞
    1. 我该怎么做?
    2. 选中功能的高级应用
    3. 下一步
  2. 延伸阅读
  3. 贡献者

鼠标选中碰撞

    用鼠标选中一个物体感觉有点难度,因为你点击的是一个3D物体,而电脑屏幕确实一个2D平面。

    让我们看一个开枪射击的例子,由此来学习如何在3D场景中得到一个变换后的鼠标位置。

1-11
最后结果

我该怎么做?

    其实Babylon引擎提供了有用的功能,可以非常轻松地完成上述操作。

    首先,创建一个代表墙壁的平面,再准备一个代表击中墙壁的弹痕,然后需要检测到用户对屏幕的点击事件。一旦点击事件被触发,使用一个 pick函数,就能够获取到有关单击事件和场景之间关系的完整信息。

//当点击事件被处罚时
window.addEventListener("click", function () {
   // We try to pick an object
   var pickResult = scene.pick(scene.pointerX, scene.pointerY);
});

    结果对象 pickResult 主要由4个信息部分组成:

  • hit(bool):如果点击击中了场景中的一个对象,则为true。
  • distance(float):当前活动相机与命中点之间的距离(如果未命中任何物体,则为infinite无限)。
  • pickMesh(BABYLON.Mesh):如果击中一个物体,则这就是这个物体的实例对象。 如果不是,则为空。
  • pickPoint(BABYLON.Vector3):单击的点,已经转换为3D坐标,具体取决于单击的对象。 如果未命中,则为Null。
        现在,构建示例场景所需的数据已经齐全。 当用户单击墙平面时,我们只需要放置弹痕图片即可:
// 假如点击了墙体对象,就改变弹痕图片impact的位置即可
if (pickResult.hit) {
     impact.position.x = pickResult.pickedPoint.x;
     impact.position.y = pickResult.pickedPoint.y;
}

    快速,简单,不是吗?
    刚才的讲解已经做成了一个实例,请尽情体验Playground 鼠标模拟射击示例

选中功能的高级应用

    pickResult对象还可以提供更多的信息,如下所示:

  • faceId:关于所选物体的面的索引数据,这个索引数据是该面在物体面数组中的位置。可以这样访问:
//得到物体的顶点信息
var indices = pickResult.pickedMesh.getIndices();
//因为3d物体的面facet是一个三角形,所以由3个顶点决定。
var index0 = indices[pickResult.faceId * 3];
var index1 = indices[pickResult.faceId * 3 + 1];
var index2 = indices[pickResult.faceId * 3 + 2];
  • submeshId: 选中物体如果存在子物体,则这个参数就是子物体的索引。

  • bu和bv属性:这是在物体的面上,所拾取点的重心坐标。 选取的面facet是由3个顶点组成的三角形,选取的点是这3个顶点的重心,其权重如下:

    • 1 - bu - bv :第N个面Facet的第1个顶点坐标
    • bu : 第N个面Facet的第2个顶点坐标
    • bv : 第N个面Facet的第3个顶点坐标
  • getTextureCoordinates(): 计算选取点的纹理坐标;将返回在纹理空间中的Vector2坐标,坐标值将在0到1之间。

    以上功能可能的用途包括:

  • 根据选择纹理坐标,使用DynamicTexture绘制一个新的纹理
  • 修改被选中的面(删除、移动顶点、更改颜色等),如果可能的话,可以造一个web建模工具哦
  • 更改子物体的材质,例如一把枪,单独更改瞄准镜的材质
  • 还有太多用途了...

下一步

    这个鼠标选取的碰撞方法非常方便,一旦你理解了鼠标pick事件,就可以使用这些功能来优化你的应用程序开发。现在是时候学习如何找到一条线与物体碰撞或相交时的位置了,请阅读下一章14. 光投射-用于射击游戏、选中多个物体

延伸阅读

相机概述

贡献者

翻译/校对: Cow&Sheep
Playground: 天才
技术支持: Dushusir github

参与贡献? 联系alexads@foxmail.com