babylon101

挑选碰撞


挑选碰撞

在使用鼠标拾取对象时,主要困难是单击3D对象,而屏幕是平面2D显示。

让我们来看看我们如何通过这个枪支射击示例将鼠标位置转换到3D场景中:

Picking

最后结果

我怎样才能做到这一点 ?

巴比伦引擎可以让您通过提供有用的功能轻松完成此任务。

首先,在创建代表墙的平面和具有影响图片的平面之后,我们必须检测UI(用户界面)上的点击。引发事件后,使用“选择”功能获取有关您的点击和场景之间关系的强大信息。

//When click event is raised
window.addEventListener("click", function () {
   // We try to pick an object
   var pickResult = scene.pick(scene.pointerX, scene.pointerY);
}),

pickResult对象主要由4条信息组成:

  1. hit «True»如果你的点击击中场景中的一个物体。
  2. distance 活动相机和你的命中之间的“距离”(如果没有命中网格则无限)
  3. pickedMesh 如果你碰到一个物体,这就是选定的网格物体。如果没有,则为空。
  4. pickedPoint 您点击的点,以3D坐标变换,具体取决于您单击的对象。如果没有命中则为空。

现在我们拥有构建场景所需的所有数据。当用户点击墙面时,我们只需要定位我们的枪的撞击图片(之前制作的飞机......称为撞击):

// if the click hits the wall object, we change the impact picture position
if (pickResult.hit) {
            impact.position.x = pickResult.pickedPoint.x;
            impact.position.y = pickResult.pickedPoint.y;
}

快速,简单,不是吗?

在我们的在线游乐场随意玩这个场景。

高级拣货功能

请注意,pickResult对象可以为您提供其他信息,详情如下:

  • faceId: 这是indices数组中拾取的面部索引的位置。这些可以像这样访问:

    var indices = pickResult.pickedMesh.getIndices();
    var index0 = indices[pickResult.faceId * 3];
    var index1 = indices[pickResult.faceId * 3 + 1];
    var index2 = indices[pickResult.faceId * 3 + 2];
    
  • submeshId: 拾取的网格内拾取的子网格的ID

  • bubv属性 这些是面部拾取点的重心坐标。拾取的面是由3个顶点组成的多边形,拾取的点是具有以下权重的三个顶点的重心

    • 1 - bu - bv对于顶点n。0
    • bu对于顶点n。1
    • bv对于顶点n。2
  • getTextureCoordinates(): 计算拾取点的纹理坐标; 这些将作为Vector2纹理空间返回,这意味着它的坐标将介于0和1之间。

可能的用途包括:

  • 使用DynamicTexture绘制纹理,
  • 修改被击中的面(删除,移动顶点,更改颜色......),
  • 更改子网格材质,
  • 等等

下一步

这种碰撞方法在很多情况下都很方便。一旦理解了鼠标选择事件,就可以开始使用该功能来推进应用程序的开发。现在是时候学习如何使用光线投影找到细线与网格碰撞或交叉的位置

Further Reading

进一步阅读