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