The mesh in threejs doesn't seem to update properly when changed through the GUI

I have successfully created a line mesh with an elliptical shape to represent an orbit with eccentricity e and semi-major axis a. This mesh is a child of a group named orbitGroup, which also contains other objects. In addition, I have implemented a GUI to adjust these parameters. Whenever the GUI is changed, it triggers the following function:

 function ElementsUpdate(){

scene.remove(orbitGroup);
orbitGroup.remove(Orbit);
Orbit = undefined;
Orbit = new THREE.Line( GetGeometryOrbit(GetOrbitLine(a,e,100)), materialOrbit);
orbitGroup.add(Orbit);
scene.add(orbitGroup);     

}

Although the mesh (Orbit) is created successfully, it does not update as expected. I am aware that the setGeometry method is no longer effective. Is there any solution to this issue? I am opting to replace the entire mesh instead of just updating the geometry, which seems more complex. Thank you in advance for any assistance provided.

You can view the project at this link

javascriptthree.js

Answer №1

If you swap out the vertex (position) buffer and update it, your task should be complete.

function ElementsUpdate(){
  let points = GetOrbitLine(a,e,100).getPoints(); // Utilizing THREE.Curve.getPoints method
  Orbit.geometry.setFromPoints( points ); // Replacing the position buffer
}
  1. Curve.getPoints provides a list of points on the ellipse.
  2. BufferBgeometry.setFromPoints replaces the position buffer, which is derived from the point array.
  3. Since it replaces the buffer (including the BufferAttribute), there's no need to flag anything for re-sending to the GPU.

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

Struggling to navigate a nested JSON API using NEXTJS?

I am facing difficulties while trying to extract nested JSON API data in NEXTJS. Specifically, I am struggling with extracting a dictionary within a dictionary from the API file. In the example provided below, I have only been successful in consuming entr ...

javascriptreactjsjsonapinext.js

Having trouble retrieving an object through a GET request in Node.js with Express

Currently, I am going through a tutorial on Node.js by Traversy Media and I have encountered an issue that has me stumped. The problem arises when I attempt to retrieve the response of a single object from an array of objects using the following code: app ...

javascriptnode.jsjsonexpress

Calculating the percentage in a jQuery Slider

For a while now, I've been using var slideWidth = 420; to set the width of sliders and then $('#slideInner').css('width', slideWidth * numberOfSlides); to calculate the total width of all sliders effectively in pixels. An Issue Ar ...

javascriptjquery

Error message 'Object doesn't have support for this property or method' is triggered by a basic JSON object

Recently, I developed a compact framework for loading resources asynchronously (hyperlink). The framework functions properly in modern browsers such as Opera, Chrome, and Firefox. However, when testing it in IE8, the code fails to execute. Internet Explor ...

javascriptjsoninternet-explorer-8

Npm is unable to locate the package.json file in the incorrect directory

Hello, I am currently in the process of setting up webpack. I have all the configurations ready, but when I attempt to execute webpack in my terminal, it looks for the package.json file in the incorrect location. Is there a way for me to modify the path ...

javascriptjsonnode.jsnpmpackage.json

Mastering the art of jQuery scrolling: A step-by-step guide

Is there a way to utilize jQuery for scrolling purposes? For example, transforming this: <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#home">Home <span class="sr-only">(current)</span></a> ...

javascriptjqueryhtmlcss

The hover feature on my website is making the picture flicker

I am experiencing an issue with a map on my website that contains four colored squares. When I hover over one of the squares, the image of the map changes to show the route corresponding to that color. However, this causes the image to shift position and i ...

javascripthtmljquerycss

What is the process for accessing a user's followers and users they are following using the new Spotify Web API?

Having just checked out the latest Spotify API documentation, I'm curious about how to access information on a user's followers and following. Is there a way to retrieve this data using the new Spotify Web API? I am looking to make requests to t ...

javascriptspotifyasp.net-web-api

Is there a way to load a URL within a DIV element using AJAX?

These two PHP files are set up to capture a user's input from a form and then display that text. Below you'll find the code for each file: file1.php: <form action="output.php" method="post"> Paste text document: <br> ...

javascriptphpajax

Node.JS guide on handling geonames city information

While unconventional, I wanted to share my solution since there is a lack of information on how to accomplish this task on the stack. After searching for an easy-to-use Node.JS module to process geonames data into a mongo database, I found very few project ...

javascriptnode.jsmongodbobjectgeonames

Executing a jQuery function automatically & Invoking a jQuery function using the onClick attribute in an HTML element

Having some issues with jQuery and could use some assistance... Currently, I am trying to have a jQuery function automatically execute when the page loads, as well as when a button is clicked. [Previous Issue] Previously, the jQuery function would automa ...

javascripthtmljquery

Exploring the foundational element within a JSON structure

I'm trying to retrieve the album names of various artists from a JSON file located at this link. My current approach involves writing the following code: var json = JSON.parse(request.responseText); //parse the string as JSON var str = JSON.stringify ...

javascriptjqueryarraysjson

Unable to resize images in Firefox

Why is it that resizing doesn't seem to work in Firefox but functions fine in Internet Explorer? I'm struggling to find a way to make it consistent across all browsers. My goal is to resize the width to 800 and height to 475, disable maximizing t ...

javascriptjqueryhtmlfirefox

Utilizing an NPM Mirror: A Comprehensive Guide

Oh no, the npm registry is experiencing issues once more, causing havoc with executing npm install. Query: What is the alternative method for using npm to fetch packages from npm mirrors? Can you suggest any reliable npm mirrors? ...

javascriptnode.jsnpm

I have implemented a button in PHP and now I am looking to invoke a function when that button is clicked

I have a PHP-generated HTML button and I'm having trouble calling the mybtn3() function when it is clicked. The button code looks like this: echo"<td width=14% align=center><input type=button value=Export onclick=mybtn3() /></td>"; ...

javascriptphphtml

Serve the JS files in Express separately

I am facing issues with my webapp loading too slowly when using the express.static middleware to serve all my js files. I am considering serving each js file only when needed, such as when serving the html from jade that uses the js file. I have attempted ...

javascriptnode.jsexpress

Get rid of the unnecessary vertical line that is located at the end of the string

I have come across a situation similar to the one demonstrated in this code snippet: http://plnkr.co/edit/eBjenGqgo3nbnmQ7XxF1?p=preview Currently, I am working with AngularJS 1.5.7. The directives used in my input - ( first ) textarea are the same as tho ...

javascriptangularjsregex

Change a reactive variable based on an event

I am currently working on a file upload feature in my application. Template.uploadFile.events({ 'change .set-file': function ( event, template ) { var file = event.currentTarget.files[0]; [...] } }); My goal is to read each row fro ...

javascriptnode.jsmongodbmeteor

Using React Quill JS and looking to log to the console when a change handler is triggered?

As I dive into the world of web development, I am currently working on crafting a blog dashboard. For the text editor, I've opted to use React Quill. While following the documentation, I came across a tutorial that includes an 'on change' ha ...

javascriptreactjsreact-quill

What is the best way to eliminate concealed divs from the view source of a webpage?

On my HTML page, I have some hidden DIVs that can still be viewed in the page source. I want to ensure that these DIVs are not visible to users when they inspect the page source. Is there a way to achieve this using Javascript or another solution? ...

javascriptphphtml