Manipulating geometry properties in three.js with dat.GUI for dynamic changes

I created a spherical shape using the following function

let createBall = () => {
  let geoBall = new THREE.SphereGeometry(5, 32, 16);
  let mat = new THREE.MeshPhongMaterial({ color: "red", transparent: true });

  ball = new THREE.Mesh(geoBall, mat);
  ball.position.set(0, 5, 0);
  ball.geometry.dynamic = true;
  ball.geometry.verticesNeedUpdate = true;
  ball.geometry.__dirtyVertices = true;

  scene.add(ball);
};

I then called this function within the window.onload function. Additionally, I utilized dat GUI to modify the geometry attribute, specifically the widthSegment of the ball's geometry as shown below

 ballFolder
    .add(ball.geometry.parameters, "widthSegments", 1, 64, 1)
    .onChange(function () {
      console.log(geoBall);
      ball.geometry.dispose();
      ball.geometry = geoBall.clone();
    });

Upon logging the geoBall in the console, it appears that the attribute has been altered, but the object itself remains unchanged. Does anyone have a solution for this issue?

Answer №1

When working with geometry generators like BoxGeometry and SphereGeometry, keep in mind that the values in parameters are only utilized during the creation of the geometry. Once the object is created, modifying these parameters will not have any impact.

One suggestion for managing this is to create a new geometry within your onChange() callback and then utilize the dispose() method on the previous one, as you're already doing.

It's worth noting that, in more recent versions of three.js, geometry objects no longer possess properties such as dynamic, verticesNeedUpdate, and __dirtyVertices.

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

Issue encountered when implementing promise and await within a Vue method

I've implemented a function in the mounted() hook to fetch files from my Dropbox account using a promise. Once the promise is resolved successfully, I iterate through all the files and execute another promise function to retrieve additional informatio ...

Merge array and object destructuring techniques

What is the correct way to remove a value from an array? const ?? = { text: ['some text'] }; ...

Create a nested array of subcategories within an array object

Currently, I am working on integrating Django Rest and Angular. The JSON array received from the server includes category and subcategory values. My goal is to organize the data such that each category has its related subcategories stored as an array withi ...

I am running into a problem trying to configure the "timezone" setting for MySQL within Sequelize and Node.js

Currently, I am utilizing node and sequelize to develop a web API. So far, everything is functioning correctly. However, when attempting to update the user table with the following code: var localDate=getDateTime(); console.log(localDate) //output: 2021/06 ...

Having trouble with Angular NgbModal beforeDismiss feature?

My goal is to add a class to the pop up modal before closing it, and then have it wait for a brief period before actually closing. I've been trying to do this using the beforeDismiss feature in the NgbModalOptions options in Angular Bootstrap's d ...

Triggering an excessive number of events upon attaching a listener to my sprites

I'm experimenting with creating a simple Cocos2d-js demo featuring clickable balls that can be moved. Here is how I am generating the balls: var listener = cc.EventListener.create({ event: cc.EventListener.TOUCH_ONE_BY_ONE, ...

Unreachable prevState when utilizing the useState hook

I am currently working on a component where I need to capture the previousState of an element. However, no matter what I try, it keeps returning the initial value. This suggests that there is some re-rendering happening, causing it to constantly default to ...

The error function is consistently triggered when making an Ajax POST request, even though using cURL to access the same

I have been using Ajax's POST method to retrieve a JSON response from the server. However, whenever I click the button on my HTML page, the Ajax function always triggers the error function, displaying an alert with the message "error." Below is the co ...

"Converting jQuery Form into a Wizard feature with the ability to hide specific steps

I'm working on a form where I need to hide a fieldset when a specific event is triggered. Inside the first fieldset, there is a select tag and when a certain option is selected, the second fieldset should be hidden. <form id="form1"> <fi ...

Exploring object properties within arrays and nested objects using ReactJS

Within the react component PokemonInfo, I am looking to extract the stats.base_stat value from the JSON obtained from https://pokeapi.co/api/v2/pokemon/1/. The issue lies in the fact that base_stat is nested inside an array called stats. My assumption is t ...

Utilize React Router to direct users to a specific page from a search form in React

Anticipated: The goal is to have a search form available on every page to display fetched data upon submission. Reality: Upon form submission, a TypeError is encountered stating that dataItems is undefined. Below is the code for my app component: class ...

How can I post data in React/Redux while adhering to a JSON API format?

After creating a form in React and having an API with a JSON API structure that places the response within the data: [] property, I am currently using Axios and redux-thunk to fetch the data. The structure of the data from the form state is as follows: { ...

Developing a jsp page with interconnected drop down menus

I am looking to dynamically populate the options in a second drop-down based on the selection made in the first drop-down. For instance, if I have a first drop-down with options {India, South Africa, USA}, and I choose India, then the second drop-down shou ...

Utilize a form with a table layout to send all data to an IEnumerable Controller method

I'm experiencing an issue with a form containing data presented in a table structure @model IEnumerable<myType> @Html.AntiForgeryToken() @using (Ajax.BeginForm("Save", "NOC", null, ajaxopts, new { @encType = "multipart/form-data", @id = "myform ...

Sending data from express js to a different server

Currently, I am faced with a scenario where I need to send a file from Jquery to my Express server and then transfer that request to another server without parsing the file in the Express server. Below are the code snippets I have been using so far: Jquery ...

Switch out everything except for the initial one

Can all instances be replaced except for the first one? For example, 123.45.67..89.0 should turn into 123.4567890. Edit: Specifically seeking a regex solution. I am aware of how to achieve it through concatenation or using the index. ...

jQuery is unable to locate the FireBreath object

Currently, I am in the process of developing a web video player by using Firebreath to compile my C/C++ codec as a browser plugin. The plugin has been successfully loaded and is functioning properly (start, stop video, etc.). My next goal is to enable full ...

Step-by-step guide on building a mat-table with nested attributes as individual rows

Here is the data structure I am working with: const families = [ { name: "Alice", children: [ { name: "Sophia" }, { name: "Liam" ...

The module "angular2-multiselect-dropdown" is experiencing a metadata version mismatch error

Recently, I updated the node module angular2-multiselect-dropdown from version v3.2.1 to v4.0.0. However, when running the angular build command, I encountered an "ERROR in Metadata version mismatch for module". Just to provide some context, I am using yar ...

Looking to transition from Node.js version v4.4.5 to v6.11.0 on your Windows system?

npm cache clean npm update -g I attempted upgrading using the provided commands, but unfortunately, the update did not go through as expected. Seeking advice for a successful update process. (Currently on Node.js 4.4.5 and aiming to upgrade to Node.js 6. ...