intersectionObjects malfunctioning

I've been struggling with this issue for a few days now, and I finally gave up and decided to reach out for help. My goal is to implement a simple object detection feature, but since the intersectScene method was replaced with intersectObjects (which is not recursive), I'm creating a new array to store all the objects I want to interact with. I've tried using pure mesh and Object3D, but it's not working for either of them. When I pass my array to the intersectObjects function, the returned array is always empty.

Here's some code:

// Translate page coordinates to element coordinates

var offset = $(this.renderer.domElement).offset();

var eltx = pagex - offset.left;

var elty = pagey - offset.top;

// Translate client coordinates into viewport x,y

var vpx = (eltx / this.container.offsetWidth) * 2 - 1;

var vpy = -(elty / this.container.offsetHeight) * 2 + 1;


var vector = new THREE.Vector3(vpx, vpy, 0.5);

this.projector.unprojectVector(vector, this.camera);

var ray = new THREE.Ray(this.camera.position, 
vector.subSelf(this.camera.position).normalize());

//console.log(ray);

var intersects = ray.intersectObjects(this.intersectedList);

console.log(intersects.length);

Any suggestions?

Answer №1

The reason your code isn't functioning properly is due to the fact that your camera is a descendant of multiple objects, one of which has undergone translation adjustments.

this.camera.parent.parent.position.y

will result in -249.

Therefore, this.camera.position does not reflect the actual camera position in the world.

Consider using

this.camera.matrixWorld.getPosition().clone()
instead.

Here's an example:

var cpos = this.camera.matrixWorld.getPosition().clone();
var ray = new THREE.Ray( cpos, vector.subSelf( cpos ).normalize() );

Version three.js r.53

Answer №2

intersectObjects is equipped with a recursive flag option:

var hits = ray.intersectObjects(this.listOfIntersects, true);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to link options from a select directive with a different array?

Update: the working jsfiddle can be found here: http://jsfiddle.net/robertyoung/jwTU2/9/ I'm in the process of developing a webpage/app using AngularJS. The specific functionality I aim to achieve involves allowing users to add a row to the timecard ...

Executing a PHP function every second using JS/Ajax: A step-by-step guide

Currently, I am utilizing the Highcharts API from http://www.highcharts.com/demo/dynamic-update to create a dynamic graph that reflects server load on my web panel. I have developed a PHP function called get_server_cpu_usage() which retrieves the current ...

Tips for meeting a JavaScript door unlocking condition with an HTML button

In this tutorial, the https://www.w3schools.com/nodejs/nodejs_raspberrypi_webserver_websocket.asp link demonstrates an event handler that works based on an HTML checkbox. I am interested in achieving a similar functionality, but with a button instead, to t ...

transferring information from Facebook to a web address through ZAPIER

Looking for guidance on sending data from Zapier to FB lead fetch. Is there a direct way to do this or is an external PHP file necessary? I need to extract name and email and send it to my CRM that is not supported by Zapier, but can receive data through U ...

JavaScript Time and Amount Formatting

My issue involves the formatting of returned data. I am looking to compile all values into a list with adjustments made to the time format and fare amount as indicated. Specifically, I need to remove commas from fare amounts and AM/PM from departure and ar ...

How can I ensure that the form submit event is delayed until the onChange event is completed when using jQuery?

Imagine a scenario where a textbox on a webpage has a 'change' event attached to it using jQuery. $('.myFormClass').on('change', '.amount', function () { // An AJAX call is made here, and the respons ...

Switching between nested lists with a button: A simple guide

I have successfully created a nested list with buttons added to each parent <li> element. Here is how the list is structured: $("#pr1").append("<button id='bnt-cat13' class='buttons-filter'>expnd1</button>"); $("#pr ...

Adding an object to a document's property array based on a condition in MongoDB using Mongoose

I have a situation where I need to push an object with a date property into an array of objects stored in a MongoDB document. However, I only want to push the object if an object with the same date doesn't already exist in the array. I've been e ...

React Material-UI is notorious for its sluggish performance

I recently started using React Material-ui for the first time. Whenever I run yarn start in my react app, it takes quite a while (approximately 25 seconds) on my setup with an i5 8400 + 16 GB RAM. Initially, I suspected that the delay might be caused by e ...

Obtaining JSON data from a PHP script using AngularJS

I've been exploring an AngularJS tutorial on a popular website called w3schools. Check out the tutorial on w3schools After following the tutorial, I modified the script to work with one of my PHP scripts: <!DOCTYPE html> <html > <sty ...

`Error encountered when attempting to use the if else route on ajax data`

Within the given JavaScript code snippet, the like_add function is following the else route instead of the expected if route, even though it receives a success response. I am curious as to why this is happening. The data returns success, but instead of m ...

Keep some table columns locked in place on your webpage while others are located off-screen, requiring a scroll to access

I have a question regarding an HTML table. There is a windows application that features a vertical scrollable table where some columns are fixed on the page while others remain outside the page. Here is an example: The black border represents the responsi ...

A variable that can be changed is available within a closure in Angular services

Currently, I am working with the Angular UI grid library and facing an issue while populating a custom dropdown filter. This filter is only meant to be applied to specific columns, which is why I have implemented a for loop to dynamically access these colu ...

The dreaded "fatal error: JavaScript heap out of memory" message struck once again while using npx

My attempt at setting up a boilerplate for a React app involved using the command npx create-react-app assessment D:\React>create-react-app assessment Creating a new React app in D:\React\assessment. Installing packages. This might take ...

datetimepicker in bootstrap 5 experiencing issues

Recently, I delved into the world of JS and attempted to implement a datetimepicker in my web-demo. Everything was running smoothly with bootstrap 3.3.7, but as soon as I upgraded to version 5, the calendar disappeared. Below is the minimal working html c ...

Locate data objects using JavaScript keys

My object looks like this: { sunday: {status: "open", opening_time: "11:30 am", closing_time: "12:00 pm"}, monday: {status: "close", opening_time: "", closing_time: ""}, tuesday: {status: "close", opening_time: "", closing_time: ""}, wednesday: {st ...

Unauthorized Access with Ajax jQuery

While working on an ajax request using Jquery, I encountered a dilemma. Even though the page is only accessible to logged in users, my cookies are not being sent along with the request. This results in a 401 error. I am already logged in, so why aren' ...

Loading static assets in Express.js

I am currently utilizing express for developing a web application. However, I am encountering issues with my routes and static files. I have included a reference to static files: app.use(express.static(path.join(__dirname, 'public'))); and conf ...

Creating dynamic "floating divs" with consistent width but varying heights, alignment challenge

Seeking assistance to solve the following challenge: Description of Issue: We are dealing with dynamically generated "floating divs" that have equal width but varying heights based on their content. The "Parent container" will have different width parame ...

Issue with Backbone collection not being updated despite making a JSONP request

Recently, I delved into the world of Backbone.js and currently, I am immersed in developing an app using Brunch that makes a JSONP request to an external API for populating my collection and models. Despite following guidance from previous posts (here and ...