19 深坑 不同摄像头下的世界坐标转换

问题描述

为了统一一些物体的位置，我们往往会使用setWorldPosition来直接设定一个物体的位置。

但是假如我们想要把一些UI组件的位置设置到对应游戏物体的位置的时候，往往会出现一些问题。

比如在这里，我就出现了问题

由于ui摄像机的高度和物体摄像机的高度不同，所以如果他们的组件处于同一个位置的时候，就会出现实际上看起来位置不同的情况

比如我在这里使用这个代码，来让某个ui组件处于某个物体的位置上

/**呼唤单位选定窗口 */
  CallUnitSelectWin(unitCom: BasicUnit) {
    console.log('监察一下')
    let unit = unitCom.node;
   let pos = unit.getWorldPosition()
    this.node.setWorldPosition(pos)
    
  }

然后就会出现这样的情况

这个半透明白色是一个正方形方块，可以看到他的位置和我想放在的炮塔位置冲突。

这个时候他们实际上世界坐标是一样的，但是实际上屏幕上的位置是不一样的。

红色和蓝色方块是我用来做确认和取消按钮的，还没放进去。

如何解决

我们需要知道，某些物体究竟要投影到哪里，才合适。毕竟世界坐标只是提供了位置，但是摄像机才是把他们显现出来的东西。

所以我们需要加一些坐标转换的代码，来转换。

 /**呼唤单位选定窗口 */
  CallUnitSelectWin(unitCom: BasicUnit) {
    
    let unit = unitCom.node;
    //获取物体的实际世界坐标
   let pos = unit.getWorldPosition()
   //坐标转换，获取正确的ui位置
    pos = GameManager.getInstance().WorldPosToUICameraWorldPos(pos);
    //把ui位置上升，防止ui挡住物体
    pos.y+=150
    //设置位置
    this.node.setWorldPosition(pos)
    
    
  }

  /**将普通世界坐标转换为基于ui摄像机的世界坐标 */
  WorldPosToUICameraWorldPos(pos: Vec3):Vec3 {
  //将物体坐标转换成屏幕坐标，基于物体摄像机
    let pos2 = new Vec3();
    this.GetMainCamera().camera.worldToScreen(pos2, pos);
    //将屏幕坐标转换成ui坐标，基于ui摄像机
    let pos3= new Vec3();;
    this.GetUICamera().camera.screenToWorld(pos3, pos2);
    return pos3;
  }

处理结果

ui处于正上方，完成需求

点击其他位置也能正常