Issue with updating the vertices in three.js EdgesGeometry is causing the Line Segments to not be updated as expected

I have created multiple three.js objects.

I have observed that the 'other' objects, designed as Mesh/Geometry/Material, update as expected after calling verticesNeedUpdate()

Furthermore, I have two wireframe objects that were designed in this manner:

new THREE.LineSegments(new THREE.EdgesGeometry(new THREE.BoxGeometry(100,100,100), new THREE.LineBasicMaterial({color: 0xFF0000});

These specific objects do not seem to update when verticesNeedUpdate() is called. Currently, my workaround involves removing them from the scene and adding them back whenever there is a change in the vertices. However, I am looking for a more efficient way to handle this update...

Any help on this matter would be greatly appreciated!

javascriptthree.js

Answer №1

It's a bit challenging to provide an accurate solution without reviewing the entirety of your code. Nonetheless, my best guess is that you may not be reusing the box geometry that you are modifying.

To address this issue, consider creating your box geometry on a separate line to confirm that you are utilizing a single instance of the box geometry and not generating a new one within Line Segments.

var customBox = new THREE.BoxGeometry(100, 100, 100);
var lineMaterial = new THREE.LineBasicMaterial({ color: 0xFF0000 });
// Incorporate customBox in your other mesh
new THREE.LineSegments(new THREE.EdgesGeometry(customBox, lineMaterial));

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

Adjusting the width of a nested iframe within two div containers

I am trying to dynamically change the width of a structure using JavaScript. Here is the current setup: <div id="HTMLGroupBox742928" class="HTMLGroupBox" style="width:1366px"> <div style="width:800px;"> <iframe id="notReliable_C ...

javascriptjqueryhtmliframewidth

Styling of Bootstrap HTML element not appearing as expected

Recently, I've been trying out a new approach by embedding Bootstrap components in an iframe. However, despite loading the necessary stylesheet and scripts, the elements seem to be missing their styles. Can anyone shed some light on why this might be ...

javascriptangulartypescript

Using jQuery to slide in dynamically generated content

I am in the process of developing a straightforward content slider that has the capability to manage dynamically added content. Unfortunately, none of the supposedly "lightweight" plugins I came across offered this functionality or, if they did, it was not ...

javascriptjqueryslider

In Ruby on Rails, ensure to trigger the ajax:beforeSend and ajax:complete events when using the link_to method with the remote

I'm currently developing a web app using Ruby on Rails as the framework. We have been utilizing the link_to method with remote true for all partial renders, following instructions provided in this helpful resource. However, I am looking to associate t ...

javascriptjqueryruby-on-railsrubyajax

Executing a node module in a web browser

I'm attempting to upload and read an Excel file with the help of a node module called read-excel-file. Following the instructions for usage in the browser, I have added the following code snippet to my .js file: import readXlsxFile from 'read-ex ...

javascriptnode.jsnpmnode-moduleshttpserver

Struggling to understand JSON in joint.js?

I am trying to utilize the joint.js library to render a JSON data as a chart... let paper = new joint.dia.Paper({ el: $('#paper'), width: 600, height: 200, model: graph }); let graph = new joint.dia.Graph; let json = '{"em ...

javascriptjsonjointjs

The filtering feature in AngularJS ng-options is not functioning correctly

Greetings, I am a newcomer to angular. In my current demo application, I have created a list of users with a select filter using ng-option. There seems to be a bug that I have been unable to identify. The issue: When I select the Female option, i ...

javascriptangularjsng-options

How to style focused input using Vue2

I have a form that contains multiple input fields, and I want to dynamically add a class to the label tag of the focused input and remove it when another input is selected. Initially, I tried the following code: onInputSelected: function(e) { var la ...

javascriptvue.jsvuejs2

Errors related to Typescript are causing issues with the stock installation of Next.js

Whenever I use typescript with create-next-app, my tsx files are filled with numerous "Problems" messages. These errors only appear in Visual Studio Code and do not affect the build process. I have tried uninstalling vscode, removing all extensions, and ...

javascripttypescriptvisual-studio-codenext.jsjsx

Leverage closures within Underscore.js templates for enhanced functionality

Is there any benefit to utilizing a closure in an underscore template for purposes such as keeping track of counters? Here's a simple example: <% (function( models ){ var length = models.length-1, section = ""; _.each( models, functi ...

javascriptunderscore.js

What are some ways to keep text within the boundaries of a div element?

I have tried multiple solutions for this issue, but none seem to be working for me. When I append a paragraph to a div, the text extends beyond the element. Below is the code I am using. Any assistance would be greatly appreciated. CSS: .chat-h { margi ...

javascriptjqueryhtmlcss

Creating a Javascript function to turn lights off using CSS manipulation, similar to the feature found

Is there a way to use JavaScript to obscure all elements on a page except for one specific HTML element? This web application is optimized for Chrome, so CSS3 can also be utilized. ...

javascriptcss

What is the method to create a polygon in its entirety by utilizing a for loop within Javascript?

After successfully using the Canvas of HTML to draw a convex polygon, I encountered an issue. In the provided code snippet, t2 represents an array of points with getX() and getY() methods. The drawing function performs as expected until it reaches the seg ...

javascripthtmlhtml5-canvas

Determine the amount of time that can be allocated based on the attributes contained within the object

I am faced with a JSON structure like the one below: var meetings = [ { id: '1', start_time: "2020-11-15T08:30:00+00:00", end_time: "2020-11-15T14:15:00+00:00" }, { id: '2', start_time: &quo ...

javascriptangulartypescript

Having trouble with threejs: Trying to map converted JSON animations to sliders but facing some issues

After converting a skinned.dae mesh to JSON using this loader, I am working on loading it up in a scene and mapping its animations to sliders for model posing purposes. Here is the relevant code snippet: var loader = new THREE.JSONLoader(); var animation; ...

jsonanimationthree.jsskinningcollada

Using Ajax.Updater to run JavaScript code

I've tried numerous online tutorials and examples, but haven't had much success... I'm looking to execute JavaScript from an HTML Response in Ajax. Here's my code snippet: <script src="prototype.js" type="text/javascript"></ ...

javascriptajaxjquery

The Dropdown Button Functions Once and Then Stops

I am facing a challenge in implementing a button within an HTML table that triggers a dropdown menu when clicked, and closes upon another click or when the user clicks outside the menu. Oddly, the button only seems to work once before completely losing fun ...

javascriptjqueryhtmlcss

What factors cause variations in script behavior related to the DOM across different browsers?

When looking at the code below, it's evident that its behavior can vary depending on the browser being used. It appears that there are instances where the DOM is not fully loaded despite using $(document).ready or similar checks. In Firefox, the "els ...

javascriptlaravelvue.jsdomcross-browser

The Express server automatically shuts down following the completion of 5 GET requests

The functionality of this code is as expected, however, after the fifth GET request, it successfully executes the backend operation (storing data in the database) but does not log anything on the server and there are no frontend changes (ReactJS). const ex ...

javascriptnode.jsreactjstypescriptexpress

Transitioning from curl to jQuery's $.ajax() method

Recently, I encountered a challenge while trying to switch the curl code used for an API known as TextRazor to jquery's AJAX due to certain limitations on the platform. Despite exploring various solutions suggested by the community in response to simi ...

javascriptphpjqueryajaxcurl