Warped box helper in three.js causing object positions to be inaccurately displayed

Why is the THREE.BoxHelper so inaccurate? The cube's position doesn't line up correctly when a line is drawn to it!

If you want to see the problem in action, check out this JSFiddle: https://jsfiddle.net/can35bj0/15/

cubeBox = new THREE.BoxHelper(cube, 0xffff00)
scene.add(cubeBox);
cube.position.copy(positionVector);
cubeTrace.geometry.vertices[cubeTrace.geometry.vertices.length - 1].copy(cube.position);

I've been trying to figure out why this happens and how to fix it, but so far I haven't had any luck...

p.s. keep in mind that scales and positions should be small compared to large values

javascriptthree.js

Answer №1

After extensive analysis, I have come to the conclusion that the issue at hand is likely related to a 'long vector' problem within THREE.js.

When an object (like the square cube showcased in the JSFiddle) is situated far from the origin point in comparison to its small size, for example with a positionVector of around 100,000 units and a cube size of 0.001 units, the object's positions tend to exhibit erratic and fluctuating behavior, as evidenced by the abnormal movements of the Boxhelper. (It is worth noting that the cube is programmed to make slight movements every second while the camera follows suit)

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

send a variable to a function in a random sequence

In my code, I have a function defined as follows: let showNotification = function(a,b,c,d,e,f){ console.log(a,b,c,d,e,f); } When calling this function, it is crucial to pass parameters in the correct order. For example, if I want to omit values for c, ...

javascriptangularjs

Capture a screenshot of an element in either jpg or png format and proceed to save it to your device using Javascript

I am looking to create a JavaScript function that can capture a screenshot of an element and then allow the user to download it. <body> <h1>Sample text</h1> <h2>Sample text</h2> <table width="1080px" height=" ...

javascript

Having trouble with Vue's $route.push method not working when invoked from a method?

I am currently in the process of creating a search bar for my application using the vue-bootstrap-typeahead autocomplete library. For those unfamiliar, when an option is selected from the suggestions list, it triggers the @hit event which passes the result ...

javascriptvue.jsvuejs2vue-router

Tips for showcasing content by hovering over buttons with the help of Bootstrap3 and Jquery

My code and fiddle are currently set up to display buttons when hovered over, but I want to modify it so that only the relevant button is displayed when a specific text is hovered over. For example, if "Water" is hovered over, only the button for Water sho ...

javascripthtmljquerycss

What steps can I take to restrict a draggable element to the body, prevent text selection, and allow form inputs to be enabled?

I'm currently utilizing the react-draggable library for my project. In order to ensure that the element remains within the confines of the body element, prevent text selection, and allow interaction with form inputs inside the draggable element, I en ...

javascriptreactjsdraggable

How to use Angular 2 to transform a string into an MD5 hash

While exploring the ts-md5 package, I noticed that the example code references a hashStr method, which seems to be missing now. My console displays the error: Property 'hashStr' does not exist on type Md5. After encountering this issue, I att ...

javascriptangularmd5

Replacing text in JavaScript: Learn how to substitute a specific word in JavaScript using an array

I need assistance with updating the content of my div using PHP-like functionality. Is there a way to achieve this? <?php $val_1 = array('text_1', 'text_2'); $val_2 = array('text 1', 'text 2'); $replace = str_repl ...

javascript

Although everything appears to be running smoothly in Express, my request is returning null

I am facing an issue with a router in my code. In the main index.ts file, I have the following line: app.use("/api/tshirts", tshirts) And in tshirts.ts file, I have defined the following routes: router.get("/", tshirtsController.getTShirts) router.get("/ ...

javascriptnode.jstypescriptexpress

I am experiencing an issue where tapping on the Status Bar in MobileSafari is not functioning correctly on a specific

I am struggling to troubleshoot this problem with no success so far. The HTML5 JavaScript library I'm developing has a test page that can display a large amount of output by piping console.log and exceptions into the DOM for easy inspection on mobile ...

javascriptioshtmlsafarimobile-safari

"Error TS2339: The property specified does not exist within type definition", located on the input field

When a user clicks a specific button, I need an input field to be focused with its text value selected entirely to allow users to replace the entire value while typing. This is the markup for the input field: <input type="text" id="descriptionField" c ...

javascriptangulartypescript

A guide on invoking a web method from an aspx.vb page in VB.net

My goal is to call a WebMethod from my aspx.vb file. Below is the syntax of my WebMethod located in Default.aspx.vb: <System.Web.Services.WebMethod()> _ <ScriptMethod(UseHttpGet:=True, ResponseFormat=ResponseFormat.Json)> _ Public Shared Funct ...

javascriptjqueryasp.netvb.net

Creating a Popup with JS, JQuery, CSS, and HTML

Seeking assistance in creating an HTML, CSS, and JS/jQuery popup. Looking to have a button that reveals a div tag when clicked, which can also be closed. Any quick responses with solutions would be greatly appreciated. Thank you in advance! ...

javascriptjqueryhtmlcsspopup

Create a variety of elements in real-time

My goal is to utilize JavaScript in order to generate a specific number of input boxes based on the user's input. However, I encountered an issue where using a for loop only creates one input box and then appends this same input box multiple times. f ...

javascriptjquery

Set the local storage value to the $scope variable

I am attempting to set a local storage value to a $scope variable and utilize that $scope variable in ng-model to populate dropdowns. However, the code I have tried is not functioning as expected. You can view the Plunker example here: https://plnkr.co/ed ...

javascriptangularjsdrop-down-menuangularjs-scopelocal-storage

Dealing with asynchronous calls in useEffect.Here are some tips for managing

When invoking a function from within a useEffect, which is located in a different class, there seems to be an issue with receiving the expected data back. The function call triggers another async function that makes an API call and performs operations on t ...

javascriptreactjsaxios

Develop your personalized Winston logging files

Check out this configuration for a Winston logger: var winston = require('winston') var systemLogger = new (winston.Logger)({ transports: [ new (winston.transports.File)({ name: 'system-file', // log which stores all ...

javascriptnode.jsloggingwinston

Assistance needed with WebSocket and Node.js: Unable to connect to wss://domain:8080 - Issue is not specific to any browser

Greetings, this is my initial inquiry on stack overflow so I'll give it my best shot. Despite going through numerous related questions, I haven't found the solution to my issue. I recently delved into Node.js because I required websockets for ce ...

javascriptnode.jssslwebsockethttps

Struggles with arranging elements in the right position

Currently, I am in the process of learning CSS and working on developing a game that involves time and score. In short, here is what I aim to achieve: This is what I have so far: You can find my progress on jsFiddle: http://jsfiddle.net/yZKTE/ CSS: #b ...

javascriptjqueryhtmlcss

Utilizing DOMPDF in conjunction with jQuery to generate PDF files

Apologies for any language errors in my writing. I am attempting to generate a PDF using a portion of HTML, utilizing jQuery, Ajax, and DomPDF. On the server side, I am using the following code: require_once './dompdf/autoload.inc.php'; if(!em ...

javascriptphpjqueryajaxdompdf

What is the proper way to utilize props.theme.breakpoints in conjunction with the makeStyles hooks?

Can anyone help me understand how to incorporate the Material breakpoints provided at https://material-ui.com/customization/breakpoints/ into the makeStyles hook for responsive styling? I am having trouble using props.breakpoints.down('600') with ...

javascriptreactjsmaterial-uireact-hooks