Ray intersections not being generated by Three.js Raycaster

I am struggling to generate a list of intersections for an object using raycasting. Despite the ray intersecting the object, I keep receiving an empty array from intersectObjects(). Any assistance would be greatly appreciated. Please refer to the provided fiddle and code snippet below: https://jsfiddle.net/4dcfsvL6/

var rayStart = {
  x: 1180.0475900351605,
  y: 900.491932895052,
  z: 50.01035975094526,
 };
var rayEnd = {
  x: 1162.0475900351605,
  y: 930.491932895052,
  z: 15.01035975094526,
 };
const rayStartV = new THREE.Vector3(
  rayStart.x - xMin - (xRange / 2),
  rayStart.y - yMin - (yRange / 2),
  rayStart.z - zMin - (zRange / 2),
);
const rayEndV = new THREE.Vector3(
  rayEnd.x - xMin - (xRange / 2),
  rayEnd.y - yMin - (yRange / 2),
  rayEnd.z - zMin - (zRange / 2),
);
const directionV = new THREE.Vector3(
  rayEnd.x - rayStart.x,
  rayEnd.y - rayStart.y,
  rayEnd.z - rayStart.z,
);
scene.updateMatrixWorld();
var raycaster = new THREE.Raycaster(rayStartV, directionV);
scene.add(new THREE.ArrowHelper(raycaster.ray.direction, raycaster.ray.origin, 300, 0xff0000) );
var intersects = raycaster.intersectObjects( [obj], true );
console.log(intersects)

Answer №1

One critical detail was overlooked in the Raycaster documentation:

direction — The direction vector that must be normalized before use. It has to be normalized.

Make sure to normalize the direction vector:

var raycaster = new THREE.Raycaster(rayStartV, directionV);

var raycaster = new THREE.Raycaster(rayStartV, directionV.normalize());

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 create a delay in user hover activation before triggering a slideDown

In my current code snippet, I have implemented the functionality to perform a slideDown action when a user hovers over an element. However, I would like this slide down effect to only occur if the user has hovered for at least 2 seconds. If the user does n ...

Decoding Azure table results in Node.js: A comprehensive guide

I need guidance on how to properly parse a query result in Azure using Easy API. I have encountered difficulties with creating an object inside the function(results) since it causes an endless loop and eventually results in a httpcode 500 error. I'm s ...

What is the best way to extract values from promises that are still pending?

Having some issues with the code below and unable to achieve the desired output. Any help in identifying what's wrong would be greatly appreciated. Thanks! Here is the code: // Making http requests const getJSON = require('get-json'); ...

The Bootstrap datetimepicker is malfunctioning, displaying an error in the console stating that '$' is not defined

I'm currently using the bootstrap datetimepicker but it doesn't seem to be working correctly. Can someone please point out what I might be doing wrong? Here are the links that I have provided: <script src="{{ asset ('css/sidebar/p ...

Preventing Time Limit Reset on Page Refresh with Jquery/Javascript

I'm encountering an issue with the time limit on my online quiz program. Whenever the page is reloaded or refreshed, the time limit resets. I have implemented this time limit in my online quiz program using a PHP header('Location:') to prog ...

Encountering a 500 error in production when making a call to the Next.js API

I have a dedicated API folder within my next.js application to handle server-side endpoints: import { NextApiRequest, NextApiResponse } from 'next' import Cors from 'cors' // Setting up the CORS middleware const cors = Cors({ method ...

issue with HTML forms not triggering correct function when submitted

UPDATE: I have encountered an issue with my HTML page containing two forms, each with a single submit button. I attempted to call a specific function when the submit button is pressed. To achieve this, I included two <script> tags to handle the butto ...

Eliminate screen flickering during initial page load

I've been developing a static website using NuxtJS where users can choose between dark mode and default CSS media query selectors. Here is the code snippet for achieving this: <template> <div class="container"> <vertical-nav /> ...

Code snippet for a click event in JavaScript or jQuery

I initially wrote the code in JavaScript, but if someone has a better solution in jQuery, I'm open to it. Here's the scenario: I have multiple questions with corresponding answers. I want to be able to click on a question and have its answer dis ...

What steps can be taken to enable CORS on an existing server that was created with createServer function?

The following code snippet is what I currently have: var gqlServer =require('./server.js') var server=gqlServer() var port = process.env.PORT||5000 server.listen({port:port}, ()=> console.log(` ...

The server is indicating that the validation for the user has failed due to the required field "foo" not being provided in the Node.js

An error message was received with the following details: "User validation failed: email: Path email is required., display_name: Path display_name is required." The error name returned is: ValidationError. The AJAX call code snippet is as follows: f ...

Is utilizing the correct use case for a Bunyan child logger?

I've recently started exploring bunyan for logging in my nodejs application. After giving it a try, everything seems to be functioning quite smoothly. Initially, I overlooked a section on log.child, but now I am eager to understand its usage. It appea ...

What event gets triggered in the Google search bar?

When we type something in the Google search box, auto-complete results appear. After selecting one, it automatically executes without needing to trigger focusout() or any click(). How is this functionality created? ...

Showcasing unique <div> content after a delay with setTimeout()

Within this code snippet, I am utilizing a setTimeout() function to make an API call to my backend node.js application every 5 seconds. The AJAX success section determines when to display divContent1 and divContent2 based on specific conditions that must b ...

What is the best Bootstrap component to implement?

Can anyone provide guidance on utilising Bootstrap to design the upcoming page? I am interested in understanding which components are suitable for this particular scenario. ...

Generating a hyperlink to a specific user ID within a data table

I'm facing an issue with the formatting of my simple table when trying to navigate to user.id. Is there a better approach to this or should I consider moving LinkToUser? All styling has been removed to avoid any conflicts. import styled from 'st ...

"Using JavaScript to find and manipulate objects within an array by either removing them or adding

I'm struggling to manipulate an array by either removing or adding an object based on its existence. I've attempted using both a for if loop and forEach loop but haven't been successful. Here's my current approach: // Object in ...

Tips for utilizing rest parameters in JavaScript/Typescript: Passing them as individual parameters to subsequent functions, rather than as an array

Question about Typescript/JavaScript. I made my own custom log() function that allows me to toggle logging on and off. Currently, I am using a simple console.log(). Here is the code: log(message: any): void { console.log(message) } Recently, I decid ...

Passing props to a click event in React JS: A comprehensive guide

I have two color circles displayed below. When a circle is clicked, the color of that circle should update the bottom icon with the same color. However, this functionality is currently not working. Is there a way to pass the addcolor props to the handleCl ...

Discover the concealed_elem annotations through the power of JavaScript

As I work on my new website, I am struggling with narrowing down the web code. I came across a solution that seems fitting for what I need, but unfortunately, I can't seem to make it work: I attempted the non-jQuery solution, however, I must be missi ...