javascript - 我如何确定小物体何时位于大物体前面并且相机可见？

Question

我是 three.js 和 WebGL 的新手。

在我的应用程序中，有两个对象所在的 3D 场景。

1. object - 它是一个大球体；
2. 对象 - 一个较小的球体，位于第一个对象的表面。

大球体绕其轴旋转。并且还可以围绕球体旋转相机。

所以作为一个大球体表面上的一个小球体，它也随之旋转。当大球体转向相机时，我们会看到小球体，而当大球体在它前面时，我们将看不到它。

问题是，我如何确定一个小球体何时对相机可见，何时不可见？

此外，我需要获取可见的小球体的二维坐标。我该怎么做？

Answer 1

这可以通过 three.js 的内置 raycaster 和 projector 功能来实现。首先，请尝试查看 this demo及其源代码。这是 another example .通过这种方式，您可以确定哪些对象更接近从相机位置发出的不可见线。

否则，如果您只是对两个对象中的哪个更接近相机感兴趣，您可以简单地检查它们的哪个位置值与相机坐标的距离更小。三维距离公式会派上用场:

bigSphereDistance = Math.sqrt( Math.pow(camera.position.x - big.position.x,2) +
                               Math.pow(camera.position.y - big.position.y,2) +
                               Math.pow(camera.position.z - big.position.z,2) );
smallSphereDistance = Math.sqrt( Math.pow(camera.position.x - small.position.x,2) +
                                 Math.pow(camera.position.y - small.position.y,2) +
                                 Math.pow(camera.position.z - small.position.z,2) );
//then check...
bigSphereDistance > smallSphereDistance ? /*case*/ : /*case*/;

直观上，当小球体的距离小于大球体的距离时，小球体可见，并带有小球体半径的缓冲区。

要回答你的第二个问题，找到任何对象的二维坐标 can accomplished like this .