Raycasting intersections in Three.js

After successfully creating geometry and functions to manipulate it, I integrated them into a javascript UI library . However, I encountered a problem where the raycaster function was detecting intersections with geometry even when not directly under the mouse. It seems like all the geometries have been displaced from their original positions and the rendering appears distorted.

To demonstrate this issue, I have provided an example at this url: . You can view the complete code in the browser console.

In the live example, you will notice that you can drag the cube even if clicking above it, illustrating the problem faced.

javascriptthree.jsdhtmlx

Answer №1

The reason why mouse coordinates may seem off is because they are based on document coordinates rather than the specific coordinates within your canvas area.

In my own projects, I typically calculate the accurate coordinates for rays in the following manner:

let mouseX = event.clientX - canvas.offsetLeft;
let mouseY = event.clientY - canvas.offsetTop;

let adjustedMouseX = (mouseX / canvas.width) * 2 - 1;
let adjustedMouseY = -(mouseY / canvas.height) * 2 + 1;

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

Steps for accessing a desktop folder using ElectronJS

Need assistance with a task involving opening data from the back-end in electron and displaying it as a desktop folder. https://i.sstatic.net/tCoHF.png Feeling a bit lost on how to accomplish this. For instance, I receive data like {id:1, foldername: &a ...

javascriptnode.jsreactjselectron

Avoiding unauthorized cookie access via browser console

Is it possible to prevent unauthorized access to the value of cookies using document.cookie from the browser's console? What security measures can be implemented to secure the cookies? https://i.sstatic.net/gUmSb.png ...

javascriptsecuritycookiesbrowserangular9

The input tag loses focus after its value is updated using a class method in Angular 8.x

Currently, I am working on integrating a credit card payment method and formatting its number through specific methods. Here is how it is done: HTML <div class="form-group" *ngFor="let formField of cardFields; let cardFieldIndex = index;"> ...

javascripthtmltypescriptinputangular8

Saving Data in an Angular Material Table: A How-to Guide

I have a basic angular material table and I am looking for a way to save the data displayed in each row when a button is clicked. Is it possible to save each row of data as an object and push it to an array? If so, how can I achieve this? <div class=& ...

javascripthtmlangulartypescriptangular-material

Tips for implementing RGB in custom fragment shader with THREE.js

I am currently developing a unique blur shader, "#include <common>", // defining blur samples "const int SAMPLES = 10;", "uniform float radius;", "uniform sampler2D tDiffuse;", "varying vec2 vUv;", ...

three.jsglslshader

Double Looping of Ajax on Shopify Order Form

I have an Ajax order form on a product page. Every time the #submit-table button is clicked, it should display a drop-down menu with updated cart information, such as quantities and prices, along with the newly added products. Here's an example of th ...

javascriptjqueryajaxshopify

The onWrite cloud function does not activate upon the creation of a new document

I have a collection called 'Users' that stores documents with user objects as well as a sub-collection named 'Notifications'. When a new notification is generated for a user, a corresponding document is created in the 'Notification ...

javascriptnode.jsfirebasegoogle-cloud-firestoregoogle-cloud-functions

Leverage a pair of conditions to display HTML content within a React component

I am attempting to display an HTML div based on whether a condition has one of two values. The wizard input is changing the responseType variable to either "textMessage" or "textToSpeech". I'm unsure if I have set up the condition correctly... const ...

javascriptreactjsreact-hook-form

Utilize Javascript or Jquery to intercept and handle both GET and POST requests

Is there a method to effectively intercept and capture both GET and POST requests as they are sent from the browser to the server? In my web application, full page refreshes occur after each request is submitted, however, some pages experience delays in r ...

javascriptjqueryhtmlasp.net-mvc

Automatically refreshing controller functionality in CodeIgniter

Greetings everyone, I'm looking for a way to automatically refresh a controller function every 5 seconds. Currently, I am using header('Refresh: 10.2'); within the controller function like this: public function delete() { heade ...

javascriptphpjqueryajaxcodeigniter

What is the best way to determine the width of the browser in JavaScript?

I'm attempting to create a JavaScript function that retrieves the current browser width. After searching, I came across this method: console.log(document.body.offsetWidth); However, it doesn't work well if the body width is set to 100%. Are ...

javascripthtmlcss

Preventing Button Click with JQuery Tooltip

I've implemented a JQuery tooltip plugin on my website and it's working great. However, I'm facing an issue where I cannot click on the input button that appears when hovering over the tooltip. It seems like the button is not truly part of t ...

javascriptjqueryhtmlcss

Transferring data from controller to repository in Laravel: a step-by-step guide

Looking for some assistance here! I need to pass an ID to my repository but keep getting the error message illegal offstring id. Any help is appreciated! Here's my controller: public function delete() { $response = ['status' => false ...

javascriptphpjqueryajaxlaravel

Unable to display response following the submission of a POST request

I'm encountering an issue when attempting to display the response of a post request using node and request. While I can see the response in the console within the service, it does not make its way to the controller. Any insights on why this may be hap ...

javascriptnode.js

Angular Material selectionChanged function is providing the previous step instead of the current step

I need to make a page with two columns: one for a vertical stepper and the other for step descriptions. I want the description to update based on the current step selected. However, I am running into an issue where the selectedIndex shows the previously ch ...

javascriptangularangular-material

Calculating the number of duplicate lines in a file with node.js

I am currently working on a project where I need to read a large .csv file line by line, extract the first column (which contains country names), and then count the number of duplicates for each country. For example, if the file contains: USA UK USA The ...

javascriptnode.jsstreamfsreadline

Exploring ways to connect my React application with a node backend on the local network?

On my MacBook, I developed a react app that I access at http://localhost:3000. In addition, I have a nodejs express mysql server running on http://localhost:5000. The issue arises when I try to open the IP address with port 3000 in the browser of my Window ...

javascriptnode.jsreactjsnetworking

What steps can be taken to expand the axis space in recharts to accommodate an additional label?

I'm struggling to display an additional label below my X-Axis label as it keeps getting clipped off. https://i.sstatic.net/ftI7w.png Below is the code snippet for my XAxis: <XAxis type="number" tick={<CustomizedNumberTick lang={props ...

javascriptreactjstypescriptrecharts

JavaScript's speciality - altering the Jquery fade in and fade out effect on Firefox browsers

Utilizing Jquery, I implemented a feature on a table where moving the mouse over a row changes its color. The Javascript code was specifically designed for IE7 and works flawlessly there. However, when tested in Firefox, the text fades along with the backg ...

javascriptjqueryfirefoxfadeinfadeout

Is it possible to modify a portion of the zod schema object according to the value of a

My form consists of several fields and a switch component that toggles the visibility of certain parts of the form, as shown below: <Field name="field1" value={value1} /> <Field name="field2" value={value2} /> &l ...

javascriptreactjstypescriptvalidationzod