The raycaster's intersectObjects function consistently results in an empty array

I've been working on implementing a raycaster to find intersections, but no matter what I do, it always gives back an empty array.

Here's how I add objects to my objects array:

var obstructionGeom = new THREE.BoxGeometry(6,5,0.5);
var obstructionMaterial = new THREE.MeshBasicMaterial( {color: 0x000000} );
var obstruction1 = new THREE.Mesh(obstructionGeom, obstructionMaterial);
obstruction1.position.set(-10,0,-15);
obstruction1.name = "obstruction";
scene.add(obstruction1);
obstructions.push(obstruction1);

Then, when I call intersectObjects like this:

let raycaster = new THREE.Raycaster();
raycaster.set(new THREE.Vector3(), obstruction1.position);
let intersections = raycaster.intersectObjects(obstructions);

Even though I've aimed the raycaster at the mesh's position, it still returns an empty result. Any idea what could be causing this unexpected behavior?

Answer №1

Experiment with the code snippets below to track the modifications.

for ( let i = 0; i < intersections.length; i++ ) {

            intersections[ i ].object.material.color.set( 0xff0000 );
            console.log(intersections[i].object)

        }

Additionally, try updating the spelling of the following: obstruccionGeom, obstruccionMaterial to obstructionGeom , obstructionMaterial

Answer №2

After some trial and error, I managed to resolve the issue by moving the intersection logic outside of the componentDidMount() method, where the scene is actually rendered. It seems obvious now - you can't intersect something that isn't even there yet. Lesson learned! Thank you to everyone who pitched in to help.

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

The server is failing to provide the requested data in JSON format

I am struggling with making a simple API call using Node.js as the backend and React in the frontend. My Node.js file is not returning data in JSON format, and I'm unsure of the reason behind this issue. I need assistance with two main things: Why is ...

Generating random numbers within specified character limits using Javascript and Selenium

Just starting to learn javascript - I am working on creating random user IDs for my selenium test scenarios. The line of code I am using for the value is as follows: javascript{Math.floor(Math.random()*11111)} However, there is a specific field that need ...

Sign in a user post-registration with the help of AWS Amplify and React

After a user successfully signs up using the withAuthenticator component, they are immediately logged in upon email confirmation. Is there a way to automatically log them in using a custom sign-in process and the Auth object instead? If so, what steps wo ...

Using PHP to pass values from a MySQL database to JavaScript

hello, $i=0; while($row = $result->fetch_assoc()) { echo " <tr><td>".$row["Number"]."</td><td>".$row["MusikName"]." ".$row["MusikURL"]."</td></tr>"; This portion is successful...it displays -&g ...

Issue with jQuery 'on' event not triggering following 'load' event

I am facing an issue on a page where similar events occur but when new content is loaded halfway through, most of the jQuery functionalities stop working. The scenario involves answering questions in a 'game' format using AJAX calls. Once all que ...

Locating specific text within an <li> element using the provided value

So, I have this set of words: <li>name</li> <li>myname</li> <li>yourname</li> Then there's also an input box input type="text" value="name" id="the_value" with the value "name", along with a submit button identif ...

Addressing the Summer Note Problem within a Bootstrap Popup

I am currently facing an issue with the functionality of the Summernote Text plugin in my project. The text inside the Summernote editor does not display what I am typing until I resize the browser window. Below is the code snippet for reference: <%-- ...

"Error encountered while attempting to make the entire row in AngularJS UI-Grid editable simultaneously

I am currently facing an issue while trying to make a whole row editable using ui-grid with AngularJs. If you could take a look at the coding in the provided plnkr link and let me know where I might have gone wrong, that would be really helpful. Click her ...

Solving the Problem of Input Values with Jquery and Javascript

I am facing a challenge in making a div vanish with the class 'backarea' while simultaneously displaying another div with the class 'successLog' on the screen. The catch here is that I want this transition to occur only when specific us ...

504 error when attempting to access HTTPS with Node.js

I have encountered an issue with making an https request in my backend node.js web app. The code I am using is as follows: const express = require('express'); const https = require('https'); const app = express(); app.get("/", functio ...

How to eliminate spaces while preserving line breaks in a textarea using JS or jQuery

I have been trying to figure out how to remove extra spaces from the beginning and end of lines while keeping the line breaks intact. Here's what I attempted: function removeSpaces(string) { return string.split(' ').join(''); } ...

"Encountering an issue with AngularJS where the selected ng-model value is

I'm utilizing plain options for the select tag because I only need to display a few options when they meet a certain condition. In order to perform other operations, I require the value of the selected dropdown in the controller. However, the issue is ...

ng-repeat dysregulating the binding of directive models

<input-directive model="config.shared.product.whatevers[0]"></input-directive> <!-- This code is functioning correctly, however the following does not bind properly --> <td ng-repeat="whatever in config.shared.product.whatevers trac ...

Tips for effectively highlighting search text within HTML content without causing any issues

I am in search of a solution that can assist me in searching for specific terms within an HTML string while also highlighting them. I have the ability to remove the HTML content from the string, but this poses the problem of losing the context of the origi ...

Guide to activating the 'Next' button on WP Forms using JavaScript code when certain conditions are fulfilled

Is there a way to adjust the JavaScript code provided so that the visibility of the "Next" button is dependent on whether at least one item in the 'wpforms-icon-choices-item' class has the '.wpform-selected' class on the current page or ...

Implementing jQuery UI toggleClass method to seamlessly alternate between two distinct CSS classes

My goal is to toggle between two CSS classes on a selector click using Jquery UI .toggleClass(), but unfortunately, it's not producing the desired toggle effect. $(".toggle").click(function () { $(".archivePosts .columns").removeClass( "l ...

Customizing File Size and Dimensions in Form Submission with Dropzone.js in JavaScript

I am currently experimenting with some sample code for Dropzone.js and am interested in finding a way to include the file size as a form field when submitting: var KTFormsDropzoneJSDemos = { init: function(e) { new Dropzone("#kt_dropzonejs_exam ...

Tips for efficiently updating state in recompose by utilizing setTimeout?

Curious to learn more about recompose, my journey began with a basic component: const timer: React.SFC<MyProps | any> = ({ seconds }) => ( <span>{ seconds }</span> ); I wanted to find a way to pass the seconds prop using recompose, ...

How about connecting functions in JavaScript?

I'm looking to create a custom function that will add an item to my localStorage object. For example: alert(localStorage.getItem('names').addItem('Bill').getItem('names')); The initial method is getItem, which retrieves ...

Click the mouse to create a unique path from the list items within the <ul> <li> using jQuery

My current listing contains various files and folders: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fon ...