Can the ThreeJS element be seen?

Question

Can the ThreeJS element be seen?

I am facing a challenge in my ThreeJS application where the view automatically centers on an object if it is close to the center of the view and closer than a specified distance. While I have information about the latitude and longitude of all objects and the viewer (camera), I am unsure if there are obstacles like walls blocking the view.

Is there a way for ThreeJS to indicate if an object is visible from the camera?

I came across a potential solution in an older version of ThreeJS that referenced a webglObjects array, but I am unable to locate its equivalent in newer versions: https://github.com/mrdoob/three.js/issues/3627#issuecomment-20763458

While ThreeJS Frustum culling is available, it only confirms if the camera is correctly aligned and does not address potential obstructions in the view of the object.

Raycaster solutions are not suitable as the target object has dimensions, unlike a point.

Developing my own occlusion culling system seems daunting without any sample resources to guide me.

Are there any recommendations or suggestions to overcome this issue?

javascript 3d three.js

Answer 1

Answer №1

Hey there, I've come up with a solution that takes into account the possibility of an object being blocked from view if it's not directly in the camera's line of sight. Any feedback or suggestions are more than welcome! Hopefully, this code will be useful for someone down the road.

// This function determines whether a specific object obstructs the view of another object's origin point
// The variables threeScene and threeCamera are assumed to be initialized elsewhere in the script:
// threeScene = new THREE.Scene();
// threeScene.add(mesh);
// ...
// threeCamera = new THREE.PerspectiveCamera(...
// ...
var checkIfObjectBlocksView = function(objectName) {
  if (threeScene) {
    var obj = threeScene.getObjectByName(objectName);
    if (obj) {
      var dirVector = new THREE.Vector3();
      dirVector.subVectors(obj.position, threeCamera.position); 
      dirVector.normalize();                                      
      var raycaster = new THREE.Raycaster(threeCamera.position, dirVector);
      var intersections = raycaster.intersectObjects(threeScene.children, false); 

      if (intersections.length > 0) {
        for (var k=0; k<intersections.length; k++) {
          if ((intersections[k].object !== undefined) && (intersections[k].object['name'] !== objectName) &&
              (intersections[k].object['name'] !== '')) {
            // Object blocks the view of the target object
            return true;
          }
        }
      }

      // No obstructions found between the target object and the camera's view
      return false;
    }
  }

  // Scene is empty or specified object cannot be located
  return true;
};

Answer 2

Hey there, I've come up with a solution that takes into account the possibility of an object being blocked from view if it's not directly in the camera's line of sight. Any feedback or suggestions are more than welcome! Hopefully, this code will be useful for someone down the road.

// This function determines whether a specific object obstructs the view of another object's origin point
// The variables threeScene and threeCamera are assumed to be initialized elsewhere in the script:
// threeScene = new THREE.Scene();
// threeScene.add(mesh);
// ...
// threeCamera = new THREE.PerspectiveCamera(...
// ...
var checkIfObjectBlocksView = function(objectName) {
  if (threeScene) {
    var obj = threeScene.getObjectByName(objectName);
    if (obj) {
      var dirVector = new THREE.Vector3();
      dirVector.subVectors(obj.position, threeCamera.position); 
      dirVector.normalize();                                      
      var raycaster = new THREE.Raycaster(threeCamera.position, dirVector);
      var intersections = raycaster.intersectObjects(threeScene.children, false); 

      if (intersections.length > 0) {
        for (var k=0; k<intersections.length; k++) {
          if ((intersections[k].object !== undefined) && (intersections[k].object['name'] !== objectName) &&
              (intersections[k].object['name'] !== '')) {
            // Object blocks the view of the target object
            return true;
          }
        }
      }

      // No obstructions found between the target object and the camera's view
      return false;
    }
  }

  // Scene is empty or specified object cannot be located
  return true;
};

Can the ThreeJS element be seen?

Answer №1

Similar questions

Converting a JavaScript function to CoffeeScript, accepting jQuery's .map function and Selectors as parameters

Maximizing Efficiency: Using a Single Prototype-Instance Across Multiple HTML Pages

Steps to restrict input in a text area to only backspace and cursor movements

Transferring data from an Angular 2 component to a service

The server is unable to process the .get() request for the file rendering

Passing an array through ajax from PHP to JavaScript using a properly formatted JSON structure

Start up a server using Angular along with Node.js and Express framework

Having issues with AJAX and .change() function not functioning correctly?

Obtain the refined information from a UiGrid table

What is the best way to ensure the initial item in an accordion group remains open by default when using NextJS?

Gathering information in a non-blocking manner with $.ajax() in rails version 3.2.2

What steps do I need to take to successfully implement a $.fn. function that runs automatically when it is called?

What is the process of transforming this jQuery script into AngularJS code?

How to stop Mouseenter event from bubbling up in an unordered list of hyperlinks using Vue 3

Showing Div content from AngularJS response

Align elements on the left side with some space between them

Typescript having issues compiling to commonjs/es2015 accurately

What is the best way to maintain the toggleClass event state once an ajax call has been made?

"An issue has arisen in MongoDB when attempting to save data, resulting in an error message

Chrome is throwing a syntax error with an unexpected token in jQuery replaceWith