I'm currently working on figuring out the exact location (x, y, z coordinates) of an object (a BoxGeometry) in the world in reference to the screen (frustum) rather than the world itself. While the frustum.intersectsObject(…) method provides a Boolean result, I am interested in determining the quadrant ([-x,y],[x,y],[x,-y],[-x,-y]) where a box is situated relative to the camera (the red lines in the provided screenshot follow the camera, not the scene). The current setup functions well as long as the camera remains unrotated (room.children[i].position.x
), but fails when the camera undergoes rotation.
It seems that elements are being detected in
if (frustum.intersectsObject(room.children[i])) {
that shouldn't be. (Refer to the image below for clarification)
Since I'm relatively new to three.js, it's likely there's a straightforward method to achieve this which I haven't discovered yet. If such a solution doesn't exist, what would be the simplest approach to implement this functionality? Thanks for your help!
function onDocumentKeyDown(event) {
event.preventDefault();
var frustum = new THREE.Frustum();
frustum.setFromMatrix(new THREE.Matrix4().multiply(camera.projectionMatrix));
for (var i = 0; i < room.children.length; i++) {
if (frustum.intersectsObject(room.children[i])) {
var XYZ=new THREE.Vector4();
XYZ.copy(room.children[i].position).applyMatrix4(camera.matrixWorldInverse);
console.log(i, 'left', frustum.intersectsObject(room.children[i]), XYZ.x,XYZ.y,XYZ.z,XYZ.w, room.children[i].material.emissive.getHex());
if (XYZ.x < 0 && XYZ.y > 0 && (event.keyCode === 103 || event.keyCode === 13) ) {
if (room.children[i].material.emissive.getHex() !== 255) {
$('#score').text(score++);
room.children[i].material.emissive.setHex(0x00ff00);
console.log(frustum);
console.log(i, 'WHAT ARE THE BOUNDING BOX COORDINATES OF THIS BOX????');
}
}
}
}
}