Updating the geometry of an object while the camera is in motion can result in visual errors in the three.js library

I am currently facing an issue with updating a vertex of a line in my three.js project.

My goal is to create a line within my scene where one end is fixed at (0,0,0) and the other end is set to a specific position on the user's screen (x,y coordinates).

To achieve this effect, I have implemented a solution where an invisible plane is always facing the camera and positioned slightly in front of it. This setup allows me to send a raycaster from the desired screen position (x,y) and determine the intersection point on the plane in order to update one of the vertices of the line.

The Issue

While my current approach does position the line end correctly, there seems to be a synchronization problem between updating the camera and the vertex, resulting in noticeable glitches. When I move the camera, the line fails to update quickly and smoothly, causing it to briefly appear in incorrect positions before settling into the desired location.

You can view a sample emulated version of the problem on this jsfiddle.

What steps can I take to address these glitches and improve the line rendering experience?

Thank you!

Below is the snippet of code used in the render function:

    var cameToCenterScaled = camera.position.clone();
    cameToCenterScaled.setLength(cameToCenterScaled.length()*0.9);
    plane.position.set(cameToCenterScaled.x, cameToCenterScaled.y, cameToCenterScaled.z); 

    plane.lookAt(camera.position);

    // define in pixels where in screen we want the line to end

    var notePos = findNotePoint(120,30); 
    linemesh.geometry.vertices[ 1 ].set(notePos.x, notePos.y, notePos.z) ; 
    linemesh.geometry.verticesNeedUpdate = true;

Answer №1

When performing a raycast, it is essential to ensure that the camera's matrices are up to date before setting the raycaster from the camera.

To achieve this, simply include the following code snippet:

camera.updateMatrixWorld();

before executing the following line of code:

raycaster.setFromCamera( new THREE.Vector2( x_, y_ ) , camera ); 

By following these steps, the behavior of the line will match your intended description.

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

The animation for the accordion feature in the iOS Framework7-vue app seems to be moving at

I am encountering issues with the iOS app while developing both android and iOS apps with Framework7-vue. The Android app functions smoothly, but the iOS app is causing trouble. One of the features include a popup functionality with an accordion inside fo ...

Is there a way to eliminate the 'All Files' option from an HTML file input field?

I have implemented a feature to allow users to upload custom files using . Currently, I am restricting the allowed file types to only ".Txt, .SVG, .BMP, .JPEG" by using accept=".Txt,.SVG,.BMP,.JPEG". This setting causes the browser's file-select dial ...

Having trouble displaying the desired formatting when mapping through nested JSON in Node ES6

Currently working on a project to build a photo gallery using nested JSON data. My goal is to iterate through the data and create a well-structured JavaScript object or a smaller JSON file that includes only the text and image URL nodes. However, my curren ...

Calculator: Show individual digits once more following a calculation

After clicking the 'equal' button, the result is displayed. However, if I click another number, it doesn't clear the result. I want the result to stay when operation symbols like '+' or '/' are pressed. While working on t ...

Is there a way to modify the Javascript for this Contact Form to trigger a different action if a specific key is pressed instead?

I have been working on a Contact Form that integrates Google Scripts. Everything seems to be functioning well as it successfully sends emails and formats them properly in my inbox. However, there are two issues that I am encountering: -I want to exclude t ...

Apple Automation: Extract a targeted string from text and transfer it to a different spot within the page

Apologies for my lack of expertise in this area, but I hope to convey my question clearly. I am working on a form where I need to input text in order to copy specific items and paste them elsewhere on the same webpage. For example, if the input text is " ...

Unable to clone curved text in fabric.js version 5.3.0

I am currently using fabric.js version 5.3.0 and I have a requirement to clone curved text and add it to the canvas. Description: The issue I am facing is that the cloning functionality does not work properly with curved text. The cloned object does not r ...

I'm encountering an unfamiliar error within my Discord.js bot, and I'm unsure of both its cause and the appropriate solution. Additionally, I'm unsure which specific file

I'm facing a recurring issue with my bot terminal. It's been causing me trouble for the past four days, functioning intermittently without any pattern. I'm struggling to track down the specific file where this error is originating from. Any ...

"Even when hidden, an HTML Div element still occupies space on the

I encountered an issue with my tabbedPage setup. Even though I have hidden content, it still occupies space on the page. Here is the code snippet that I am using: let tabHeader = document.getElementsByClassName("tabbedpage-header")[0]; let tabIndicator = d ...

Implement a one-second delay before nesting another animation

I'm currently utilizing a timeout function, but I am interested in using a delay instead. My goal is to have the second animation start when one second has passed from the beginning of the first animation, and it should be a linear animation. How can ...

Exploring the possibilities of integrating jQuery into Firefox extensions

Can someone provide guidance on effectively implementing jQuery within a Firefox extension? My research has not yielded any up-to-date methods that address the latest version of jQuery, and I am aware that directly including it via script tag may lead to c ...

Implementing auto-complete functionality using two keys in Material UI and React

My goal is to enable autocomplete for input when searching with values like title and year. Strangely, the autocomplete feature only works when I search with title. Searching with year does not yield any options. Sample code export default function ComboB ...

Ideal JavaScript data structure for connecting three arrays

My goal is to establish a connection between three arrays in the following manner: arr1 = ['A', 'A', 'B', 'B', 'C', 'C' 'A', 'C'] arr2 = ['a', 'aa', ' ...

Using the information retrieved from Google Place Autocomplete and saving it for future reference

I am interested in utilizing the Google API "Place Autocomplete" widget to enhance user experience on my website. The specific widget I have in mind can be found here. My goal is to streamline the process of obtaining property addresses from Real Estate A ...

Storing and Editing Collection of Elements

My latest project involves creating a basic web scraping tool that gathers information on apartment prices from a specific webpage. Each time the tool runs, it compiles an array of objects with details such as date, time, floor plan name, bed number, floor ...

Having trouble with Angular's ng-class performance when dealing with a large number of elements in the

I've encountered a performance issue while working on a complex angular page. To demonstrate the problem, I've created a fiddle that can be viewed here. The main cause of the performance problem lies in the ng-class statement which includes a fu ...

HTTP request in Angular with specific body content and custom headers

My goal is to access the sample API request from , as demonstrated in the documentation: curl -H "api-key: 123ABC" \ -H "Content-Type: application/json" \ -X POST \ ...

tips for asynchronously loading cloud endpoints APIs

gapi.client.load('myapi1', 'v1', function() { gapi.client.load('myapi2', 'v1', function() { gapi.client.load('myapi3', 'v1', function() { $rootscope.$broadcast( ...

How to retrieve a DOM element using Aurelia framework

When it comes to accessing a DOM element in Aurelia, what are the best practices to follow for different use cases? Currently, I have two scenarios in my Aurelia project: Firstly, within the template, there is a form that I need to access from the view-mo ...

Getting a string from JSON using Javascript

I am trying to retrieve a specific skill from a variable: const skillsData = [ { name: "React", value: 390 }, { name: "CSS", value: 1200 }, { name: "JavsScript", value: 540 }, { name: "HTML", value: 1900 }, ...