Three.js - 如何检查对象是否在球体后面(不可见)

Question

我有一个球体(球体),表面上有物体(针脚),DOM元素(标签)是从针位置到2d世界的计算结果.

我的问题是,当引脚位于地球后面时(使用鼠标拖动或动画),我需要隐藏DOM中的标签,以便在没有引脚的情况下看不到文本标签.

我的逻辑是,如果我能得到3D世界中的引脚告诉我它是否在地球后面,那么我可以隐藏与引脚相关的标签.

Codepen与整个代码.

我一起研究的功能:

function checkPinVisibility() {

    var startPoint = camera.position.clone();

    for (var i = 0; i < pins.length; i++) {

        var direction = pins[i].position.clone();
        var directionVector = direction.sub(startPoint);

        raycaster.set(startPoint, directionVector.clone().normalize());

        var intersects = raycaster.intersectObject(pins[i]);

        if (intersects.length > 0) {
            // ?
        }

    }
}

我已经通过很多帖子进行了研究,但无法真正得到所需的结果:

• ThreeJS:如何检测对象是否呈现/可见
• Three.js - 如何检查对象是否对相机可见
• http://soledadpenades.com/articles/three-js-tutorials/object-picking/

我已经通过鼠标XY位置作为光线工作,但是无法真正获得所有引脚的恒定渲染的工作解决方案.

Answer 1

您想知道相机可以看到球体表面上的哪些点.

想象一下相机中与球体相切的一条线.让我们L从相机到切点的线的长度.

相机只能看到球体上比相机更近的点L.

公式为Lis L = sqrt( D^2 - R^2 ),其中D是从相机到球心的距离,R是球半径.