Validating Object Visibility Using Three.js and Sphere Intersection

Question

Validating Object Visibility Using Three.js and Sphere Intersection

I have a spherical globe adorned with pins on its surface, each pin representing an object and labeled accordingly with DOM elements. These labels are calculated based on the positioning of the pin in the 2D world.

The issue arises when the pins move behind the globe either through mouse dragging or animation. In such cases, I need to ensure that the corresponding labels in the DOM are hidden, making them invisible without their associated pins.

To tackle this problem, my approach involves determining whether a pin in the 3D world is positioned behind the globe so I can then hide its label.

For a comprehensive view of the code, visit Codepen.

Here is the function I have been exploring:

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) {
            // ?
        }

    }
}

Despite delving into multiple resources, including:

ThreeJS: How to detect if an object is rendered/visible
Three.js - How to check if an object is visible to the camera

I have managed to make it work using mouse XY position as a ray, but a sustainable solution for continuous rendering of all pins still eludes me.

javascript three.js

Answer 1

Answer №1

Have you ever wondered which points on the surface of a sphere are within view of a camera?

Picture a line extending from the camera that just touches the sphere. Let's call the length of this line L.

The camera has visibility only to those points on the sphere that lie closer to it than L.

To calculate L, use the formula L = sqrt( D^2 - R^2 ), where D represents the distance between the camera and the center of the sphere, and R is the radius of the sphere.

Answer 2

Have you ever wondered which points on the surface of a sphere are within view of a camera?

Picture a line extending from the camera that just touches the sphere. Let's call the length of this line L.

The camera has visibility only to those points on the sphere that lie closer to it than L.

To calculate L, use the formula L = sqrt( D^2 - R^2 ), where D represents the distance between the camera and the center of the sphere, and R is the radius of the sphere.

Answer 3

Answer №2

WestLangley's coding solution is presented here. If you find it to be the most suitable answer, consider marking it as accepted.

function checkPinVisibility() {
    var cameraToEarth = earth.position.clone().sub(camera.position);
    var L = Math.sqrt(Math.pow(cameraToEarth.length(), 2) - Math.pow(earthGeometry.parameters.radius, 2));

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

        var cameraToPin = pins[i].position.clone().sub(camera.position);

        if(cameraToPin.length() > L) { 
            pins[i].domlabel.style.visibility = "hidden";
        } else { 
            pins[i].domlabel.style.visibility = "visible";
        }
    }
}

Surprisingly, this method still exhibits susceptibility to a camera pan error. The situation is peculiar, but it remains superior to my Projection-onto-LOOKAT approach.

MY PREVIOUS ANSWER:

I initially thought it might look something like this, yet its functionality didn't meet expectations.

if (intersects.length > 0) {
       pins[i].domlabel.style.visibility = "visible";
   } else {
       pins[i].domlabel.style.visibility = "hidden";
   }

This solution brought me closer to the desired outcome, albeit not flawlessly. The code snippet below calculates the distance along the LOOKAT direction from the camera to a pin (cameraToPinProjection), comparing it against the distance along said direction to the earth (cameraToEarthProjection). If cameraToPinProjection > cameraToEarthProjection, it indicates that the pin lies beyond the Earth's center along the LOOKAT line, prompting me to hide it.

Notice the factor "0.8" used in multiplying the cameraToEarth projection - it adjusts its length slightly. Experiment with it for variations.

The imperfection arises when rotating the Earth around, causing labels to behave unexpectedly. I am uncertain about resolving this issue.

I trust this information proves helpful.

function checkPinVisibility() {
    var LOOKAT = new THREE.Vector3( 0, 0, -1 );
    LOOKAT.applyQuaternion( camera.quaternion );

    var cameraToEarth = earth.position.clone().sub(camera.position);
    var angleToEarth = LOOKAT.angleTo(cameraToEarth);

    var cameraToEarthProjection = LOOKAT.clone().normalize().multiplyScalar(0.8 * cameraToEarth.length() * Math.cos(angleToEarth));

    var startPoint = camera.position.clone();

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

        var cameraToPin = pins[i].position.clone().sub(camera.position);
        var angleToPin = LOOKAT.angleTo(cameraToPin);

        var cameraToPinProjection = LOOKAT.clone().normalize().multiplyScalar(cameraToPin.length() * Math.cos(angleToPin));

        if(cameraToPinProjection.length() > cameraToEarthProjection.length()) {
            pins[i].domlabel.style.visibility = "hidden";
        } else { 
            pins[i].domlabel.style.visibility = "visible";
        }

    }
}

Answer 4

WestLangley's coding solution is presented here. If you find it to be the most suitable answer, consider marking it as accepted.

function checkPinVisibility() {
    var cameraToEarth = earth.position.clone().sub(camera.position);
    var L = Math.sqrt(Math.pow(cameraToEarth.length(), 2) - Math.pow(earthGeometry.parameters.radius, 2));

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

        var cameraToPin = pins[i].position.clone().sub(camera.position);

        if(cameraToPin.length() > L) { 
            pins[i].domlabel.style.visibility = "hidden";
        } else { 
            pins[i].domlabel.style.visibility = "visible";
        }
    }
}

Surprisingly, this method still exhibits susceptibility to a camera pan error. The situation is peculiar, but it remains superior to my Projection-onto-LOOKAT approach.

MY PREVIOUS ANSWER:

I initially thought it might look something like this, yet its functionality didn't meet expectations.

if (intersects.length > 0) {
       pins[i].domlabel.style.visibility = "visible";
   } else {
       pins[i].domlabel.style.visibility = "hidden";
   }

This solution brought me closer to the desired outcome, albeit not flawlessly. The code snippet below calculates the distance along the LOOKAT direction from the camera to a pin (cameraToPinProjection), comparing it against the distance along said direction to the earth (cameraToEarthProjection). If cameraToPinProjection > cameraToEarthProjection, it indicates that the pin lies beyond the Earth's center along the LOOKAT line, prompting me to hide it.

Notice the factor "0.8" used in multiplying the cameraToEarth projection - it adjusts its length slightly. Experiment with it for variations.

The imperfection arises when rotating the Earth around, causing labels to behave unexpectedly. I am uncertain about resolving this issue.

I trust this information proves helpful.

function checkPinVisibility() {
    var LOOKAT = new THREE.Vector3( 0, 0, -1 );
    LOOKAT.applyQuaternion( camera.quaternion );

    var cameraToEarth = earth.position.clone().sub(camera.position);
    var angleToEarth = LOOKAT.angleTo(cameraToEarth);

    var cameraToEarthProjection = LOOKAT.clone().normalize().multiplyScalar(0.8 * cameraToEarth.length() * Math.cos(angleToEarth));

    var startPoint = camera.position.clone();

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

        var cameraToPin = pins[i].position.clone().sub(camera.position);
        var angleToPin = LOOKAT.angleTo(cameraToPin);

        var cameraToPinProjection = LOOKAT.clone().normalize().multiplyScalar(cameraToPin.length() * Math.cos(angleToPin));

        if(cameraToPinProjection.length() > cameraToEarthProjection.length()) {
            pins[i].domlabel.style.visibility = "hidden";
        } else { 
            pins[i].domlabel.style.visibility = "visible";
        }

    }
}

Validating Object Visibility Using Three.js and Sphere Intersection

Answer №1

Answer №2

Similar questions

What is the best way to manage the loading and unloading of JavaScript within dynamically loaded partial pages?

How can I adjust the vertical position of Material-UI Popper element using the popper.js library?

Getting the string value from a table row using JavaScript

Model is updated by checkbox only on the second click

Retrieving a compilation of items found within text selected by the user on a website

PHP: AJAX request triggers 500 Internal Server Error

Leveraging AJAX responses to reduce additional requests in single-page applications

Issues encountered with anchor scrolling upon clicking

Tips for implementing FontAwesome in Nuxt3

Aggregating and organizing all TypeScript files within the project while preserving the file hierarchy

Combining two geometries with indexes into a BufferGeometry

Hold on for the querySelectorAll function

When I request the value of a JavaScript object, I am met with 'undefined'

The process of matching the full names of the source and destination Strings in Node.js

Is there a way to successfully integrate a JavaScript file that has been downloaded from `npm` or `yarn` into a web client or

How can I optimize the performance of JS-heavy pages on mobile devices?

Fixing Firebase and React errors in JavaScript functions

creating divs inside a parent div with varying heights and using auto margins

What is the best way to update the video source upon clicking a link with JQuery?

Making sure the checkbox stays selected in an angular environment