检测可能被对象隐藏的网格的可见性

t98cgbkg  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(237)

我有一个场景,包括 Object3D 表示球体和表示该球体上的点的多个网格元素。我用 OrbitControls 允许交互。此外,我附上 HTMLElements 到地球上的各个点。由于球体基本上是一个球体,因此当将点放在背面时,相机可能看不到这些点。
如何检测这样一个点对于相机是否可见/是否被对象隐藏?这样做,我想隐藏 HTMLElement 相对于网格的可见性。这个 HTMLElement 的位置在渲染时更新,因此此检查也应在渲染时进行,我假设:

private render() {
   this.renderer.render(this.scene, this.camera);

   this.points.forEach(({ label, mesh }) => {
      const screen = this.toScreenPosition(mesh);
      label.style.transform = `translate3d(${screen.x - 15}px, ${screen.y}px, 0)`;

      const direction = new Vector3();
      direction.copy(mesh.position).sub(this.camera.position).normalize();
      this.raycaster.set(this.camera.position, direction);
      const intersections = this.raycaster.intersectObject(mesh);

      if (intersections.length > 0) {
           console.log(intersections);
      }
   });

   this.requestId = window.requestAnimationFrame(this.render.bind(this));
}
k4ymrczo

k4ymrczo1#

我推荐一个简单的算法,包括两个步骤:
首先,检查给定点是否在视锥中。实现此功能的代码共享于:three.js-检查对象是否仍在相机的视野中。
如果测试通过,则必须验证该点是否被三维对象遮挡。检查这一点的典型方法是视线测试。这意味着您可以从相机的位置和从相机指向给定点的方向设置光线投射器。然后测试场景中的三维对象是否与该光线相交。如果没有交点,则该点不被遮挡。否则,它是,您可以隐藏相应的标签。

相关问题