No result returned by IntersectObjects function

Recently, I've been delving into the world of three.js to determine if a ray intersects with an object.

My scene is all set up and looking great!

I tried clicking on the sphere that I created using the following code:

var intersected_objects = [];

//Setting up the scene, objects, and events

scene = new THREE.Scene();
group = new THREE.Object3D();
sphere = new THREE.SphereGeometry(23.8, 60, 60);

//Adding meshes, textures, etc.

intersected_objects.push(group);

function onDocumentMouseUp(event) {

    event.preventDefault();

    var mouseX = (event.clientX / window.innerWidth)*2-1;
    var mouseY = -(event.clientY /window.innerHeight)*2+1;

    var vector = new THREE.Vector3(mouseX, mouseY, 0.5);
    projector.unprojectVector(vector, camera);

    var ray = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

    var intersections = ray.intersectObjects(intersected_objects);

    console.log(intersections.length); //Always returning 0

}

Despite my efforts, the length of intersections array always remains at 0. Isn't it supposed to intersect with the sphere?

Answer №1

The code for checking the intersection appears to be correct. Have you made sure that the "group" has been properly added to the "scene" and the "sphere" to the "group"? It's hard to pinpoint the error without examining the entirety of your code. I recommend creating a jsfiddle with all the necessary code included.

Furthermore, you could test by using ray.intersectObjects(scene.children) to check if any collisions are being detected at all.

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

Ways to alter the typography style if the text exceeds a certain length

I need some assistance with using Material UI in my ReactJs project with TypeScript. I am trying to decrease the font size of typography when the text exceeds 3 lines. Here is a snippet of my code: const checkFontSize =() => { if(text.leng ...

The unusual behavior of the :to attribute on @click in Vue

I have a specific element: Hashtag.vue: <template> <router-link :to="getTo" custom v-slot="{ navigate }"> <div role="link" @click="navigate"> {{text}}</div> </rout ...

What is the best way to incorporate a three.js image from a different source into an HTML document?

Just beginning to explore the new features of HTML5. Any tips on embedding an existing WebGL page into my own? Am I on the right track? <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> < ...

Adding a jPlayer on the fly

I've been working on a code snippet to dynamically add jPlayers through a function. Here is the code I have so far: function audio_player(audio, title, type) { var id = $('.audio').length; $('#audio').append('<di ...

Issue with updating data variable from watcher on computed property in Vue.js with Vuex

Snippet: https://jsfiddle.net/mjvu6bn7/ I have a watcher implemented on a computed property in my Vue component. This computed property depends on a Vuex store variable that is set asynchronously. Despite trying to update the data variable of the Vue comp ...

"Exploring the Power of Angular Change Detection with Promises in a Hybrid

We are currently in the process of upgrading an AngularJS project to Angular 7 by following the recommended "hybrid" approach where both frameworks coexist. However, we have encountered some issues with change detection when dealing with native promises. T ...

Tips for making sure the Button component in material-ui consistently gives the same ID value for onClick events

Issue arises when trying to log the ID of the Button component, as it only logs correctly when clicked on the edges of the button (outside the containing class with the button label). This problem is not present in a regular JavaScript button where text is ...

Issue with the alphabetical ordering of subpages

My PageSidebar.js component lists child pages alphabetically. https://i.sstatic.net/DZro1.png However, when I navigate to a child page, the alphabetical order is not maintained. https://i.sstatic.net/fRVgO.png I've tried multiple solutions but hav ...

Ways to retrieve the content from a textfield

Is there a way to retrieve text from a textfield in material UI without using the onChange method? It just seems odd that I would need to constantly track the value with onChange in order to use it for any other purpose. I decided to search for solutions ...

Exclude the use of ':any' in React component

Currently, I am new to React and facing a challenge in sending a variable and function to my component. I understand that using :any is not the best practice, so I am seeking a better solution. I am working on creating a modal and passing data to my compo ...

How can you determine the HTML element where a mouse click took place?

Is it possible in JavaScript to identify the HTML element where a mouse click occurs without having an event listener attached to the elements? Essentially, I want to be able to capture the mouse click event and determine the specific element on the page ...

Error: Uncaught object in AngularJS ngRoute

I keep encountering an uncaught object error in my browser console while trying to load my AngularJS application. I am unsure if this issue is related to ng-route.js or if it's something else, as the error message only says 'uncaught object' ...

What are some solutions for troubleshooting a rapid-moving Selenium web driver?

My code is not functioning correctly and I need a better solution. The fast speed of execution makes it difficult for me to detect where the issue lies. Below is my current code: public static void main(String[] args) { //**************************** ...

Transferring data between two "Data" elements using Jquery Datatable

Utilizing the JQuery datatable, I have made the first column of my table clickable, which is labeled as RequestNo. Here's the code snippet: "ajax": { "url": "/Request/Search/LoadData", "type": "POST", "datatype": "j ...

Using XSL variables in JavaScript code

I've noticed that there have been similar questions asked, but none of the solutions seem to help in my case. So, I have this variable named 'var': <xsl:variable name="var"> val </xsl:variable> Now, I want to use it like thi ...

What is the best way to dynamically search and retrieve data from a JSON object in Angular?

I am facing a challenge with my Angular (v. 1.6.3) app where I have fetched a JSON object containing stock price data. The structure of the JSON object only allows querying using brackets, with each key being a string that may include spaces, parentheses, ...

Revolutionary Approach to Efficiently Handle Multiple rows with Jquery

Greetings to everyone, I am currently in the process of developing an application that retrieves data from a database via AJAX by calling a .php file. Within this app, I have a table with 4 columns. The first two columns consist of dropdown menus, the thi ...

Finding a date from a calendar with a readonly property in Playwright

Just starting out with the playwright framework after working with Protractor before. I'm trying to figure out the correct method for selecting a date in Playwright. selector.selectDate(date) //having trouble with this ...

Unable to isolate segments of a string

Looking for a way to extract two different IDs from the following string: SPList:6E5F5E0D-0CA4-426C-A523-134BA33369D7?SPWeb:C5DD2ADA-E0C4-4971-961F-233789297FE9: using Javascript. The regular expression being used is : ^SPList\:(?:[0-9A-Za-z\-]+ ...

Choosing a combination of classes

For my web application, I created checkboxes that control the visibility of windows by toggling classes on elements. My JavaScript code successfully achieves this functionality. $(document).ready(function(){ $('#field').change(function(){ ...