A sophisticated method for retrieving the source object that Box3 was initialized with, to facilitate straightforward camera collision detection in Three.js

Question

A sophisticated method for retrieving the source object that Box3 was initialized with, to facilitate straightforward camera collision detection in Three.js

Is there a more efficient method to retrieve the original object used to set a Box3 (using Box.setFromObject) once the Box3 detects a collision?

Currently, I am storing the Box3 in an array and then adding the object that was initially used to create the Box3 into a separate array:

var cube = new THREE.Mesh( geometry, material );
cube.name = "box0";
scene.add( cube );
var bbox = new THREE.Box3();
bbox.setFromObject( cube );
bboxList.push(bbox);
bboxObjectNameList.push(cube.name);

I then iterate through both arrays each frame:

for(i=0;i<bboxList.length;i++)
{
  if(bboxList[i].containsPoint(camera.position)) {
    hitName = bboxObjectNameList[i];
    hitObj = scene.getObjectByName(hitName);
  }
}

If anyone has suggestions on a better approach to identify the object associated with the Box3, please share.

Using Three.js r84

javascript three.js

Answer 1

Answer №1

What makes the three.js javascript objects stand out is their nature as, well... javascript objects. This enables you to easily assign any property to a Box3, such as specifying the "object they are set from".

To adhere to the conventions of three.js, it would be advisable to utilize a .userData wrapper property for any additional properties you introduce. By doing this, you prevent potential naming conflicts with internal three.js properties that may be introduced in upcoming updates.

In practical terms, your code could resemble something like this:

var bbox = new THREE.Box3();
bbox.setFromObject( cube );
bbox.userData = { sourceObject: cube };

...

if (bboxList[i].containsPoint(camera.position)) {
  hitObj = bboxList[i].userData.sourceObject;
}

Answer 2

What makes the three.js javascript objects stand out is their nature as, well... javascript objects. This enables you to easily assign any property to a Box3, such as specifying the "object they are set from".

To adhere to the conventions of three.js, it would be advisable to utilize a .userData wrapper property for any additional properties you introduce. By doing this, you prevent potential naming conflicts with internal three.js properties that may be introduced in upcoming updates.

In practical terms, your code could resemble something like this:

var bbox = new THREE.Box3();
bbox.setFromObject( cube );
bbox.userData = { sourceObject: cube };

...

if (bboxList[i].containsPoint(camera.position)) {
  hitObj = bboxList[i].userData.sourceObject;
}

A sophisticated method for retrieving the source object that Box3 was initialized with, to facilitate straightforward camera collision detection in Three.js

Answer №1

Similar questions

Utilizing Multiple MongoDB Connections in a Node.js Application

Tips on preventing a lone track in Laravel for Server Sent Events

Identifying when an element hovers over a particular section

Reverting Vue Draggable Components to Their Original Position Upon Dropping Them

Encountering a "Module not found" error when trying to integrate NextJs 13.4 with React Query and the

Is it possible to incorporate a fadein animation into a function?

Is it possible to precisely position multiple children in a relative manner?

Setting a displacement/normal map for only one face of a cylinder

Error: Uncaught object in AngularJS ngRoute

Transforming a canvas into a div element

Error: Attempting to access the 'name' property of an undefined variable is resulting in a TypeError in Material UI

What is the best way to retain data after clicking a button?

Showing hidden errors in specific browsers via JavaScript

The sendKeys() method is malfunctioning in Selenium WebDriver

Deleting an ID from an array within a document using Node.js Mongoose

A guide on adding an onClick listener to a span element dynamically and then saving it to MongoDB

Incorrectly modifying the _locals property while rendering a MySQL result in Express/Node.js leads to the error: "Cannot assign to read only property '_

Transform incoming AJAX response into Backbone model

My script was functioning just fine until suddenly I started receiving the dreaded "No 'Access-Control-Allow-Origin' error" repeatedly

Code-behind not functioning properly for Bootstrap Modal