在BABYLONJS中对具有透明通道的mesh实现Drag和Drop操作

在BABYLONJS中对具有透明通道的mesh实现Drag和Drop操作

BABYLONJS中的mesh往往具有透明通道,当这些具有透明背景的mesh互相交叠时,鼠标的pick操作往往会选中最上面一层的透明部分。

而直观来说,我们希望仅对当前点击处不透明的部分所属的对象进行操作。因此,问题来了:

  1. 如何在鼠标点击时,忽略选中mesh中的透明部分?
  2. 如何获取texture中指定UV坐标的RGB颜色值?

可惜的是,BABYLONJS并没有提供获取当前坐标点的像素值的API。因此,为了测试图片的一部分是否透明,我最终做了以下工作:

  1. 创建一个不在当前屏的canvas元素,并将图像绘制到它上面。
    通过context.getImageData获取图像数据,从而访问原始像素数据。
  1. 当选中mesh的非透明区域时,需要做一个循环判断:
  • 将选中的所有mesh设置为isPickable
  • 根据当前选中的pickMesh的texture的UV坐标,判断选中部分是否透明(通过pickInfo.getTextureCoordinates
  • 如果透明,则将该mesh的“isPickable”标记为false并进行递归。
    最终我们会获得一个在当前选中点不透明的mesh或者没有mesh。我们将isPickable设置为true,然后返回pickInfo。

实例代码如下:

pick non-transparent mesh

通过上面的demo可以解决选中当前坐标处第一层不透明的mesh这个问题,那么接下来只需要对选中的mesh进行操作即可,官方示例如下:

drag and drop demo

但在我们项目的2d场景中,使用的是正交相机。那么在没有上例中的ground做坐标移动的参考对象时,我们更改获取当前选中点的相对坐标。如下面的例子:

drag and drop in freecamera
这样就可以实现在2d场景中对具有透明通道的mesh实现Drag和Drop操作

坚持原创技术分享,您的支持将鼓励我继续创作!