No results found when attempting to intersect mouse click raycast on point cloud in Three JS (empty array returned)

I've been working on rendering a point cloud and attempting to select a single point, but unfortunately, the method raycaster.intersectObjects(scene.children, true) is returning an empty array. I've tried various methods to calculate the pointer.x and pointer.y without success.

Take a look at my CodePen here: https://codepen.io/joshua-holly-fraunhofer/pen/VwyGBVO

Any ideas on what could be going wrong?

function onMouseUp(event) {
  event.preventDefault();
  const raycaster = new THREE.Raycaster();
  const pointer = new THREE.Vector2();
  pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
  pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(pointer, camera);

  const intersections = raycaster.intersectObjects(scene.children, true);
  console.log(intersections); // Returns an empty array
}

Answer №1

The code you've written is functional, but the camera distance from the point cloud is quite significant at 1800 units, resulting in very small individual points. This means that users would need to click extremely close to a point for an intersection to be detected, which might even be impossible given the default raycast threshold of 1 unit (refer to Raycaster.params). In simpler terms, clicking within 0.2 pixels of the point on a 1080p screen is required, but clicks are only measured in 1-pixel increments.

To address this issue, considering that your points are represented by 60-unit shapes in the material, increasing the threshold to match this size will yield the anticipated results. Simply add the following line after initializing the raycaster:

raycaster.params.Points.threshold = 60;

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

Transmit information to the client-side webpage using Node.js

One of the main reasons I am diving into learning Node.js is because I am intrigued by the concept of having the server send data to the client without the need for constant querying from the client side. While it seems achievable with IM web services, my ...

Retrieving JSON data from a PHP file through a standalone JavaScript script

I am in need of creating a JavaScript file that will assign values to two variables within a PHP file. The PHP file should then construct a JSON structure and display some data. My goal is to have a form written in JavaScript with two input fields that wi ...

Is the tab not displaying correctly when using Bootstrap 5 button functionality?

With Bootstrap 5, I have a modal that contains two tabs for login and register. However, I am facing an issue where the tab is not displaying correctly based on the button click. The desired behavior is that clicking on the login button should activate th ...

Prevent the button from being enabled until the file input is updated

I want to create a form with an input file for uploading photos, but I need the submit button to be disabled until the input file has a value. Additionally, there are other validations that will also disable the button. Here is the structure of my HTML fi ...

In a Custom Next.js App component, React props do not cascade down

I recently developed a custom next.js App component as a class with the purpose of overriding the componentDidMount function to initialize Google Analytics. class MyApp extends App { async componentDidMount(): Promise<void> { await initia ...

Navigate through the elements of an Ext.form.CheckboxGroup using Ext JS

Currently, I am working with an Ext.form.CheckboxGroup that contains multiple items of Ext.form.Checkbox. I am wondering if there is a way to iterate through each item within the Ext.form.CheckboxGroup? I attempted the code below without success: for ( ...

What is the best way to update and add data with just one click using jQuery?

Trying to dynamically add text to textboxes by clicking an "add" button. The code allows for adding/removing textboxes that save values to and delete from a database. Upon page load, a function called showitem creates textboxes dynamically and populates th ...

Troubleshooting Date Problems in Angular

When using the HTML5 date picker, I have encountered an issue where after choosing a date, the ng-model displays an older date instead of the current one selected. <input type="date" ng-model="dateModel" /> For example, when selecting the current d ...

Use jQuery in MVC 5 to remove each cloned div individually starting from the last one, excluding the default div

My default setting is as shown below. https://i.stack.imgur.com/m8Hpr.png The add button functions correctly, but I am having trouble removing cloned divs. I can only remove the last one, instead of each cloned div individually starting from the last, exc ...

The Angular service/value is failing to retrieve the updated variable from the $(document).ready() function

Currently, I'm facing an issue with my Angular service/value. It seems to be grabbing the original variable instead of the new one that is supposed to be inside $(document).ready(). Here's the relevant code snippet: var app = angular.module("app ...

Retrieving search results in JSON format from a website with NodeJs

I recently started learning Node and attempted to retrieve a website's search result in JSON format using Node. I experimented with the HTTP chunk method and Express GET, but unfortunately, was unable to find a solution. The specific URL I was working ...

Directive customization through comprehension expressions

Python is where I spend a lot of my time, so I'm really drawn to the comprehension_expression syntax within Angular's ngOptions. However, I would love to see this syntax extend to other inputs, such as with an ng-list. For instance, let's s ...

What is the reason behind having to refresh my ReactJS page despite it being built with ReactJS?

I have developed a task management application where users can input notes that should automatically update the list below. However, I am facing an issue where the main home page does not display the updated todos from the database unless I manually refres ...

What is the reason for utilizing the object name in the object's method rather than using "this"?

Looking at the code snippet above, you can see that store.nextId and store.cache are used in the add method. It makes me wonder why not use this instead? var store = { nextId: 1, cache: {}, add: function(fn) { if (!fn.id) { fn.id = this. ...

When you set the href attribute, you are essentially changing the destination of the link

UPDATE: I'm not referring to the status bar; instead, I'm talking about the clickable text that leads to a link. /UPDATE I've gone through a few similar posts but couldn't find a solution. I have a link that needs to be displayed. www ...

HTML, JavaScript, and PHP elements combine to create interactive radio buttons that trigger the appearance and disappearance of mod

On my page, I have multiple foreach loops generating divs with different information. These divs are displayed in modals using Bootstrap. However, I am encountering an issue where if I select a radio button and then close the modal and open another one, th ...

Guide on accessing Azure Configuration Application settings in a Node application with JavaScript

Currently, I have a node.js application named "myClient" deployed on Azure as an App Service. Within this setup, I utilize several configuration files that contain specific values tailored to their respective runtime environments: appconfig.json is used f ...

Transform the Hue or Color of a PNG using ASP.Net, VB.Net, and jQuery

I am currently developing a web page that can combine multiple PNG images into one flat image for users to download. I am looking to incorporate a feature that allows for hue or color adjustments, similar to the color balance functionality in Photoshop. ...

Could there be any issues with the structure of my mongoose schema?

I've been stuck for 3 hours trying to solve this problem. I can't seem to retrieve any data from my document. var mongoose = require('mongoose'); var Schema = mongoose.Schema; var accountSchema = mongoose.Schema({ username: String ...

Avoiding the use of numbers in v-if in Vue.js

My website features a left menu that displays different content based on the selected menu's ID. However, I currently have === 0 and === 1 in the v-if statement, and I'm looking for a way to avoid manually inputting these numbers. <template& ...