Three.js - Rendering issues persist after updating geometry

I've encountered a puzzling issue. I have created a THREE.Line object with a material and geometry. The init method adds 2 vertices to the geometry, places the Line in the scene, and the line renders correctly.

However, there's an event listener that should add another vertex every time the canvas is clicked. Unfortunately, when the scene is rendered, only the original 2 vertices are visible. I've checked scene.children and confirmed that the Line is present, and the geometry has been updated.

The documentation suggests using:

geometry.dynamic = true
geometry.verticesNeedUpdate = true 

Unfortunately, these solutions have not resolved the issue.

Answer №1

For more information, visit the three.js Wiki: https://github.com/mrdoob/three.js/wiki/Updates

When it comes to buffers, updating content is possible but resizing them is not recommended due to the high cost involved, which is similar to creating new geometry.

To simulate resizing, you can allocate a larger buffer upfront and then hide or collapse unnecessary vertices when necessary.

Geometries in three.js are defined using vertex buffer objects that have fixed sizes. While you can create and delete buffers, resizing them is not supported.

One workaround is to create a geometry with extra vertices and merge the unwanted ones into a single point.

Version of three.js used: r.52


UPDATE: A different method is outlined in Drawing a line with three.js dynamically.

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

Looking for assistance in presenting the value of a range slider on your webpage?

Greetings! I am facing an issue while trying to showcase the output of a slider through JavaScript. When I run the code, I encounter an error saying 'Cannot read property of null'. Below is the HTML code snippet: <div class='sliderContai ...

Troubles arising while submitting data from AngularJS to Amazon S3

I am currently in the process of developing an application using the MEAN (MongoDB, Express, AngularJS, node.js) stack where I need to upload image files to Amazon S3. Here is my approach: Initially, an http get request is sent to my API which outlines th ...

Tips for retrieving information from a highstock chart

Imagine I have a sample highstock chart on my website, similar to the one at this link. Is there a way to extract the data from the chart itself, even if the data used for creating the chart is not accessible to others? <img src="http://www.highchart ...

What is the process for obtaining Style.css, additional CSS, and JavaScript files from a live single page website?

I am currently facing a challenge with a live single page website where I need to make some fixes. Unfortunately, I am unable to access the Style.css file, along with other css and javascript files. Although I managed to save the html file by using Ctrl+s, ...

Initiating Firebase Configuration

Currently, I have integrated Firebase as the back-end for my app. Here is how my firebase configuration looks: const firebaseConfig = { apiKey: 'xx', authDomain: "xx", databaseURL: "xx", ...

What is the process of integrating unique themes into a non-Wordpress website?

In the process of developing my website, I am using PHP7, HTML5, CSS3, JQuery, and JavaScript5 instead of WordPress. One feature that I want to incorporate is the ability for users to customize their theme beyond the default option. How can this be achie ...

Retrieving Values from Array Objects - Using JavaScript

Discovering the technique to retrieve property values. Given the following: let object1 = [{name: "HappyHands31"}, {job: "website developer"}, {city: "Chicago"}]; How can I output only the value of the second object, which is "website developer"? I am ...

JavaScript isn't cooperating with a straightforward .click() command

Having some trouble clicking a div using JavaScript in my project. I am able to utilize jQuery, and have tried selecting the element with QuerySelector as well as XPath, followed by utilizing .click() on the element. However, it seems that the div is not b ...

Getting the current URL in InApp browser on Phonegap 3.0: A quick guide

Hey there, I am having trouble retrieving the current URL of an in-app browser when clicking the close button or at any time after loading a URL. Here's my code: var ref = window.open('http://google.com', '_blank', 'hidden=y ...

Setting a specific index in an array of objects in React: A comprehensive guide

I currently have a useState() object structured as follows: const [financeSummary, setFinanceSummary] = useState({ discountRate: 10, financeRate: 10, reinvestRate: 10, inflationRate: 3, singleInvestment: new Array( ...

Tips on accessing the left value of a absolutely positioned object that transitions on click using getComputedStyle or a similar method

Question: How can I ensure that when the target is clicked, the correct and updated value of the left property is returned? For example, I want it to return 120px if --moved is applied, and 100px if it is not applied. Background: Utilizing getComputedStyl ...

Tips for recognizing a panoramic image capturing a full 360 degrees

Is there a specific way to differentiate between a 360-degree panoramic image and a regular image in bitmap format (png/jpeg)? How can one determine if an image is panoramic or not using C# or Three.js? ...

What could be causing this Facebook javascript-sdk login code to repeatedly log in the user automatically?

After pressing the logout button on my site, I am still unable to keep a user logged out. Although they are redirected to the login page, the updateButton function is called again with the same credentials causing them to be logged back in. Despite trying ...

Syntax highlighting in custom blocks with VueJS

Vue single file components allow for the creation of custom blocks (besides the commonly used script, template, and style). For more information, you can refer to the official documentation here: . However, I am struggling to enable syntax highlighting w ...

Extract the array of numbers from the JSON file

My task is to extract an array of numbers from JSON files. I need to handle files that contain only arrays of numbers or one level deeper (referred to as direct arrays). These files may also include other data types such as strings or booleans. The challe ...

In React/Next.js, it seems that pressing the useState button twice is required in order for an event to trigger

When working with react/nextjs, I encountered an issue with a click event where I'm trying to use setState to modify an array. Strangely, the modification only takes effect after two clicks of the button. Here is the initial state array: const [array ...

Enforcing the autocompletion selection in jQuery UI

As I was working on my original question, I realized that I needed to ask a separate question because I didn't fully grasp what I was trying to achieve. I am currently utilizing the jquery Tag-it plugin available at https://github.com/aehlke/tag-it a ...

Ways to incorporate onload animation into a Pie chart with billboard js

I am currently working on implementing a pie chart with animation using billboard js. However, I am facing difficulties in applying the onload animation. Can anyone provide guidance on how to achieve this? For reference, you can view an example of the des ...

Slider buttons are not appearing in Time Picker

I recently added a Time Picker to my project, but I'm experiencing an issue where the slider buttons for selecting time are not showing up. Could you please refer to this image: Checking the console, there don't seem to be any errors present. ...

Unpredictable $watch behavior in Angular for both synchronous and asynchronous code

In my scenario, the value for a watched variable can be set in the current stack or loaded asynchronously (it is encapsulated code). Because of this, I cannot guarantee that the value was changed when the watch handler is called. Although I have reviewed ...