No Visual Changes in Three JS After Making Manual Adjustments to Geometry

In my Geometry code, I am dynamically editing the data using an object called newData. This object contains arrays of face indexes and vertex indexes that have the same length as the original arrays but hold a certain form like [null, null, null, "4", "5", null, null...].

By iterating through all the faces and vertices, I split the data into two groups and update the pointers on the faces accordingly.

Although I know that I have correctly updated the geometry, the changes are not being displayed. I have tried using .elementsNeedUpdate which results in an error stating 'no property 'a' of undefined in InitWebGlObjects...' I couldn't find any references to 'a' in there.

I've attempted using vertices need update, but it doesn't do anything. Similarly, updateCentroids combined with the previous tool also has no effect.

I have heard about not being able to resize the buffer. Could someone explain what the buffer is and its length? Is it related to the number of vertices added to a model?

Someone suggested "You can emulate resizing by pre-allocating larger buffer and then keeping unneeded vertices collapsed / hidden." Does this mean I might be doing this unintentionally? How can I collapse or hide a vertex? I haven't come across any references for that.

Thank you for your assistance!


        var oldVertices = this.vertices;
        var oldFaces = this.faces;

        var newVertices = [];
        var newFaces = [];

        var verticeChanges = [];

        this.vertices = [];
        this.faces = [];        

        for(var i in oldVertices){
            var curAr = ((newData.vertices[i]) ? (newVertices) : (this.vertices));
            curAr.push(oldVertices[i]);
            verticeChanges[i] = curAr.length - 1;
        }

        for(var i in oldFaces){
            var curAr = ((newData.faces[i]) ? (newFaces) : (this.faces));
            oldFaces[i].a = verticeChanges[oldFaces[i].a];
            oldFaces[i].b = verticeChanges[oldFaces[i].b];
            oldFaces[i].c = verticeChanges[oldFaces[i].c];
        }

        console.log('Vertices Cut from', oldVertices.length, "to:", newVertices.length, 'and', this.vertices.length);
        console.log('Faces Cut from', oldFaces.length, "to:", newFaces.length,  'and', this.faces.length);

Answer №1

Yesterday, I encountered a similar issue and discovered that when adding vertices and faces to the geometry, it is essential to set this.groupsNeedUpdate = true. This will prompt the renderer to update its internal buffers accordingly.

Answer №2

Perhaps related to a key point in this instructional guide:

"A common pitfall in working with Three.js is that modifications made to the vertices of a mesh may not reflect in the render loop. This is because Three.js tends to cache mesh data for optimization purposes. To address this, it is important to notify Three.js of any changes so it can recalculate as needed. The approach is as follows:

// Declare geometry as dynamic to allow updates

sphere.geometry.dynamic = true;

// Indicate changes in vertices

sphere.geometry.__dirtyVertices = true;

// Indicate changes in normals

sphere.geometry.__dirtyNormals = true;"

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

Tips for improving the quality of your images

How can I adjust image quality/dpi without changing pixel size? I have an image with a specific pixel size that I need to reduce in quality before saving. If I want to decrease the quality to 87%, how do I achieve this using the following functions? func ...

Enhancing Your React.js app with Script Insertion Using HTML/JSX

I'm attempting to apply a style to an HTML element only when the property of an array of objects meets a certain condition, but I encountered this error: /src/App.js: Unexpected token, expected "..." (35:25) Here's my code: codesandbox export de ...

I'm encountering an issue where the database table in Postgres is not updating correctly while working with Node

Currently, I am working on a CRUD application where I can successfully read and delete data from the database table. However, I have encountered an issue when trying to update specific data for a particular route. Every time I attempt to update the data in ...

Easily pass parameters to an event handler in a stateless component without the need to create a new reference of the handler every time the component re-re

// @flow import React from 'react'; import Input from 'components/Input'; import logo from 'assets/images/svg/logo.svg'; import styles from './style.module.css'; type TodoMethod = string => void; type TodoProps ...

Assigning properties to the constructor using `this.prop`

Within a React class component, I have multiple methods and the component receives various props. I am contemplating whether I should assign each prop as this.propName in the constructor and then access them using this.propName. For your reference, below ...

Using ajax to submit a form in order to upload a file along with other fields

I've gone through all the questions and conducted extensive research, but unfortunately, I haven't been able to find a solution that works. Below is the HTML code snippet: <div id="createarea"> <form id="createform" action="index/c ...

Tips for avoiding flickering in a background image when it is being changed

Utilizing JavaScript, I am setting a repeated background image from a canvas to a div in the following way: var img_canvas = document.createElement('canvas'); img_canvas.width = 16; img_canvas.height = 16; img_canvas.getContext('2d' ...

What are the names of the child elements within a three.js entity?

I am attempting to retrieve the variable names of all the child objects within a three.js object and then save them in an array. The object contains a property .children, but this returns an array with all the data, not just an array of the objects' ...

Setting the default time zone to UTC for Material UI date and time picker

Looking to implement a dialog in React with Material UI for users to input start and end date/time. The goal is to have the default start set to the beginning of the current day and the default end set to the end of the current day (UTC). However, I'm ...

What is the process of generating enum values using ES6 in Node.js?

Can JavaScript support enumerations with assigned integer values, similar to how other programming languages handle it? In C#, for instance, I can define an enum as follows: enum WeekDays { Monday = 0, Tuesday =1, Wednesday = 2, Thursday ...

Retrieve the accurate file name and line number from the stack: Error object in a JavaScript React Typescript application

My React application with TypeScript is currently running on localhost. I have implemented a try...catch block in my code to handle errors thrown by child components. I am trying to display the source of the error (such as file name, method, line number, ...

What is the best way to free up memory after receiving responseText in a continuous streaming request?

Utilizing xmlHTTPRequest to fetch data from a continuous motion JPEG data stream involves an interesting trick where responseText can populate data even before the request is completed, since it will never actually finish. However, I have encountered some ...

Replicate the array multiple times and combine them into a single flat array

I have a four-element array that I need to copy to another array four times. I achieved this by concatenating the array four times. Here is what I tried: let demoProperties = [] .concat(fourDemoProperties) .concat(fourDemoProperties) .concat(fourDe ...

Combine, condense, and distribute JavaScript files using Express without applying gzip compression to the response

Currently, I am developing a web application using Express. My goal is to merge, minify, and serve .js files efficiently. To achieve this, I have created a middleware with the following code: var fs = require('fs'), path = require('path ...

Entering the ajax success handler

I have created this code snippet and I'm looking for a way to pass the exact 'this' value (since there are multiple items with this class) into the ajax success function. Any suggestions on how to achieve that? $(document).on('click&ap ...

Exploring the capabilities of JQuery's attributes

If I have the following div elements: <div class="hat" rel="cap"> <div class="hat" rel="pine"> <div class="hat" rel="mouse"> What is the JQuery syntax for executing a "where" condition? Here's an example: $("div.hat").remove WHER ...

Phantom writing reminiscent of the ghostly prose found on a Tumblr registration

Is there a way to create a URL field similar to the one on ? It's the field where the text is faded and when you click on it to type, it automatically appends ".tumblr.com" that cannot be erased or highlighted. The JavaScript used for this feature is ...

Only switch a radio button when the Ajax call results in success

Within an HTML form, I am working with a group of Radio buttons that trigger an Ajax call when the onchange() event is fired. This Ajax call communicates with the server to process the value sent by the call. The response can either be a string of "succes ...

The drop-down menu continually moves in an erratic manner

These are the functions I have created: function showDropdown() { $(".dropdownitem").show('slow'); } function hideDropdown() { $(".dropdownitem").hide('slow'); } Below is the code for my drop-down menu: <div id="dropdown" ...

Transmit data from an HTML form to PHP using JSON

I am attempting to utilize JavaScript to send POST data. I have the data in an HTML form: <form name="messageact" action=""> <input name="name" type="text" id="username" size="15" /> <input name="massage" type="text" id="usermsg" si ...