javascript - 无法确定性地拾取导入的网格

Question

我有简单创建的圆柱体网格

var tile = BABYLON.MeshBuilder.CreateCylinder("tile-" + i, { tessellation: 6, height: 0.1 }, scene);

然后我有以下事件回调

window.addEventListener("click", function (evt) {
    // try to pick an object
    var pickResult = scene.pick(evt.clientX, evt.clientY);
    if (pickResult.pickedMesh != null){
         alert(pickResult.pickedMesh.name)
});

然后在其中一个 tiles 上鼠标单击会出现带有正确 tile 名称的消息框。

当我通过

添加一些新的网格( .babylon 文件中的 3D 模型)时

var house;
BABYLON.SceneLoader.ImportMesh("", "../Content/"
                              , "house.babylon"
                              , scene
                              , function (newMeshes) 
                                { house = newMeshes[0]; });

为了更好地想象，它是由四个不同的网格创建的房屋纹理，这些网格放置在 cylinder 瓷砖的 grid 上。

它显示正常，但是当 鼠标点击 时，它经常表现得完全忽略有这样一个网格，所以 pickResult.pickedMesh 要么是 null 或 pickResult.pickedMesh.name 指向在我单击的位置放置我导入的网格的平铺。

只有大约 5% 的网格区域正确对应于鼠标点击(假设在屋顶中间，在墙壁中间)。

我试过设置一些虚拟的(隐藏的)house.parent mesh 来设置那些不会通过导入网格创建但似乎是死胡同的东西。

您是否知道以某种方式执行 scene.pick(evt.clientX, evt.clientY); 会尊重网格层次结构并会考虑叠加纹理的所有可见部分？

为了完整起见，我正在处理这个 3D 的中间部分模型(从中移除左右房屋)。

编辑:演示 BabylonJS playground

Answer 1

你可以尝试改变

var pickResult = scene.pick(evt.clientX, evt.clientY);

到

var pickResult = scene.pick(scene.pointerX, scene.pointerY);

因为 evt 对应于整个页面。