The challenge of intersecting with large coordinates in THREE.JS

Currently, I am using THREE.js to develop a game.

At the moment, there is an object positioned here:

(-83645, 476450, 412912)

I am working on implementing click detection on this object. However, the raycaster I am using from the THREE.js example site seems to be producing skewed rays. By adjusting all the coordinates down by 100, the raycasting functions correctly.

I suspect there might be an issue with division during normalization or possibly an overflow error occurring with certain divisions. Right now, I am compensating by reducing the coordinates, but we ultimately want to keep the coordinates intact.

Does anyone have insights into why the large coordinates are causing the ray skewing? Thank you in advance!

UPDATE: Here's a quick fiddle: http://jsfiddle.net/88ehm1yf/

javascriptthree.jsraycasting

Answer №1

To solve the issue of mouse coordinates becoming irrelevant after zooming in, refer to this helpful explanation that suggests adjusting the camera's near plane distance for improved precision.

Additionally, ensure your CSS includes body { margin: 0 } and consider checking out this valuable tip on accounting for canvas offsets when using the Raycaster.

Version: three.js r.73

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

Combining broken down values within a loop

https://i.sstatic.net/PI3NI.png Take a look at this image, then review the code I've provided: function addNumbers() { var inputList = document.getElementById("listInput").value.split(" "); for(i = 0; i <= inputList.length; i+=1) { ...

javascripthtml

What is the best way to assign default values when destructuring interfaces within interfaces in TypeScript?

My goal here is to create a function that can be used with or without arguments. If arguments are provided, it should work with those values; if not, default values should be used. The issue I'm facing is that although there are no TypeScript errors ...

javascripttypescriptdefault-value

Why aren't my cookies being successfully created on the frontend of my application when utilizing express-session and Node.js?

Having trouble setting cookies while using express-session in my MERN stack project. When accessing endpoints from frontend localhost:3000 to backend localhost:8080, the cookies do not set properly. However, everything works fine when both frontend and b ...

javascriptnode.jsmongodbexpressexpress-session

Discover the steps to inserting an icon into a tab using AngularJS

Hello, I am a beginner in angular js. Can someone please guide me on how to include an icon in a tab using angular js? Here is my current code: <tabset panel-tabs="true" panel-class="{{demoTabbedPanelClass}}" heading="{{demoTabbedPanelHeading}}"> ...

javascriptangularjsangular-ui-bootstrap

Code snippets to reduce excess white space on a website using HTML and CSS

On my website, there are multiple tabs, each containing content from an HTML file. When a user clicks on Tab1, boxes with images are displayed. The layout can be seen in the following Code Demo: Code Demo here There seems to be extra space before and afte ...

javascripthtmlcss

Guide on showing a dropdown menu depending on the data in the current array index within a table

I am working with an object array that I want to display in a table. My goal is to have a dropdown select if the 'validvalues' field is not empty. How can I achieve this so that each row in the table has different options from the array? When &ap ...

javascripthtmlangulartypescript

Maintaining the active status of section 1 after the page is refreshed using Javascript and CSS

I have a total of 3 buttons and 3 hidden sections available, which can be seen in the image below: click here for image description Whenever one of the buttons is clicked, the respective section transitions from being hidden to becoming visible: click he ...

javascripthtmlcss

Tips for creating a Vue component that triggers the select dropdown to open when the entire div or wrapper is clicked

I have a custom-designed select dropdown with unique symbols for the select arrow. To achieve this look, I've hidden the default select arrow/triangle and placed our symbol on top as an image file. <div class="select-wrapper"> < ...

javascripthtmlcssvue.js

Sending files asynchronously using Angular and ng-file-upload through a RESTful API

I have a form with multiple file upload fields. Here is the process: User fills out the form User selects the files to upload User clicks submit Now, here is what I would like to achieve: Submit the form to the server and receive an ID in return Uploa ...

javascriptphpangularjsng-file-upload

"Encountering an error when trying to access undefined property in templates

The content displayed in my component template is not what I expected when using @Output to pass an object from a parent container. While attempting to bind {{selectedMovDetail|json}} in the template, the output shows as { "name": "The Walking Dead","rati ...

javascriptjsonobjectangular

Make sure the inputs in separate table data cells are lined up in

I need help aligning two input fields in separate td elements to be on the same line. The issue I am encountering is that when an input is added to a td, it covers up any text within the td. https://i.stack.imgur.com/c7GiQ.png There are two scenarios: I ...

javascripthtmljquerycss

JavaScript nested function that returns the ID of the first div element only upon being clicked

I am facing an issue with a function that returns the id of the first div in a post when an ajax call is made. The problem is that it repeats the same id for all subsequent elements or div tags. However, when the function is used on click with specified ...

javascriptphpjquery

What is preventing me from accessing arguments.callee within this function in sloppy mode?

In attempting to retrieve the arguments.callee property in the following basic function, I encountered an error preventing me from doing so. function foo(a = 50, b) { console.log(arguments.callee); } foo(10, 50); Why is this issue occurring? It appe ...

javascriptarguments

javascript alter css property display to either visible or hidden

I am struggling with a CSS id that hides visibility and uses display: none. The issue arises when I want the element to be visible upon clicking a button, but removing the display:none property is causing design problems due to it being an invisible elemen ...

javascripthtmlcss

Utilizing KnockoutJS to Apply CSS Binding Based on Dropdown Selection

Check out the live example here: http://jsfiddle.net/0gmbbv5w/ In my application, I have an object retrieved from the database that I bind to a <select> var NoticeType = function (noticeType) { this.NoticeTypeId = ko.observable(noticeType.Notic ...

javascriptcssknockout.js

What could be causing req.body to consistently come back as an empty object?

I am struggling with req.body always returning an empty object regardless of what I try. I have experimented with: var jsonParser = bodyParser.json(); and then including jsonParser in the function -> app.post('/api/get-last-project',jsonPar ...

javascriptnode.jsexpressbody-parser

Creating an Angular project that functions as a library and integrating it into a JavaScript project: a step-by-step guide

Is it feasible to create an Angular library and integrate it into a JavaScript project in a similar manner as depicted in the image below? The project structure shows trading-vue.min.js being used as an Angular library. Can this be done this way or is th ...

javascriptangularjsangulartypescript

Creating HTML content in TypeScript with NativeScript using document.write()

Essentially, I am looking to create a set number of labels at various row and column positions depending on the user's input. However, I have been unable to find any resources that explain how to write to the .component.html file from the .component.t ...

javascriptangulartypescriptnativescript

Issue with JQuery form submission causing controller method not to be executed

I am facing an issue with two click methods in my JavaScript code. Method 1 is successfully hitting the controller method, but when I try to trigger Method 2 by clicking on a button, it does not seem to call the controller. I have tried various solutions ...

javascriptjqueryajaxspring-mvc

Issue with integrating Google Spreadsheet as the data source for a Next.JS website: updates are not reflecting on the website pages

The website for this restaurant was created by me, using Google Spreadsheet to populate the menu pages. I chose this method for its simplicity and familiarity to the client. I'm utilizing the google-spreadsheet package to extract necessary informatio ...

javascriptreactjsnext.jsgoogle-sheets-api