How can the parameters for a cube geometry in three.js be dynamically updated?

Wondering about something here. I noticed that Three.js geometries come with 'parameter' fields associated with them. Take, for example, the box geometry shown in the image below...

box Geometry parameters

I attempted to update these parameters in this way...

var nodeSize = 10;
var geometry = new THREE.CubeGeometry(nodeSize, nodeSize, nodeSize);
mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial({side:THREE.DoubleSide}));

scene.add(mesh);
mesh.geometry.parameters.depth=20;

Unfortunately, the geometry remains unchanged. Is there a method to modify the geometry by adjusting these parameters?

Check out the fiddle for more details here

Your assistance is greatly appreciated!

javascriptthree.js

Answer №1

parameters.depth is specifically utilized during geometry construction and does not impact modifications made to it. It can be likened to being read only.

Refer to the example provided on BoxGeometry and utilize the gui on the right for guidance on achieving your desired outcome.

Answer №2

Essentially, when you scale an object, it appears as though the geometry has been updated. However, a more effective approach would involve reassigning the mesh's geometry value to a new geometry.

mesh.geometry = new THREE.CubeGeometry(newSize, newSize, newSize)

By following this method, you have the flexibility to modify any aspect of the geometry, such as depth segments. This technique is particularly beneficial when dealing with geometries that are not cubes, like cylinders or spheres.

Below is a revised version of your original code employing this technique, with the only significant change being in the last line:

var nodeSize = 10;
var geometry = new THREE.CubeGeometry(nodeSize, nodeSize, nodeSize);
mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial({side: THREE.DoubleSide}));

scene.add(mesh);
mesh.geometry = new THREE.CubeGeometry(nodeSize, nodeSize, 20);

Update:

Prior to assigning the new geometry, it is advisable to dispose of the old geometry to release GPU resources. This can be accomplished using the built-in disposal method. Simply add a line like this before assigning the new geometry:

mesh.geometry.dispose()

Answer №3

Gaitat made a valid point that altering parameters won't change the geometry.

Another approach could be scaling the cube instead.

function adjustSize( myMesh, xSize, ySize, zSize){
  scaleFactorX = xSize / myMesh.geometry.parameters.width;
  scaleFactorY = ySize / myMesh.geometry.parameters.height;
  scaleFactorZ = zSize / myMesh.geometry.parameters.depth;
  myMesh.scale.set( scaleFactorX, scaleFactorY, scaleFactorZ );
}
...
adjustSize(mesh, 10, 10, 20);

Check out this jsfiddle for an example

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

Retrieve the footer of a RadGrid nested within a NestedViewTemplate for a child

I am working with a RadGrid that has expandable rows, each of which contains a RadGrid within a NestedViewTemplate. These child RadGrids have visible footers and a few columns, one of which is "DtlTransAmount": <NestedViewTemplate> <asp:Panel ...

javascriptc#asp.nettelerikradgrid

Having trouble with Django REST API and Axios POST request not functioning properly

I'm currently working on developing a simple API that allows users to input data, submit it, and have it stored in a database. To accomplish this, I am utilizing React and Django Rest Framework. In my App.js file: const [name, setName] = useState(&ap ...

javascriptreactjsdjango

The inner nested ng-repeat section is not properly binding to the scope variable and appears to be commented out

In my code, there is a nested ng-repeat set up. The 'boards' variable in the scope is an array that contains another array called 'tasks', which also consists of arrays. In the innermost ng-repeat, I am attempting to bind to task.conten ...

javascriptangularjsdata-bindingnestedangularjs-ng-repeat

I need to press the button two times to successfully submit

I am experiencing a remote validation issue. When I click on the submit button without focusing on the text box, it triggers a remote ajax call for validation. However, when I press the submit button a second time, the form gets submitted. On the same cl ...

javascriptphpajax

Having trouble activating a function through the context API using React hooks

I'm attempting to initiate a function via my CartContext API upon a click event, but it doesn't seem to be functioning correctly. I have verified that the method is operational, however, when I introduce the context function, nothing occurs. See ...

javascriptreactjsreact-hooks

Two events in an arrow-guided grid including a text box (jQuery)

I have successfully implemented an editable table using jQuery where users can click on a cell to input text. The goal now is to enable the use of ARROW keys for quick navigation within the table. Below is my current code: $( function () { $( "td" ). ...

javascriptjquery

Parcel-Bundler is unable to resolve critical security issues

I recently followed a tutorial by Kevin Powell on SASS and Parcel through YouTube. I was able to successfully set up the SASS part and get the Parcel bundler working smoothly on one project, so everything seemed to be going well at that point. However, to ...

javascriptnpmbundler

Converting Xpath into a CSS selector

Having a difficult time converting the Xpath "//form[@id='giftcard-form']/div[3]/div/button" to CSS. I've tried using it for my Selenium JS but it's not working for some reason. Managed to convert an easier one successfully and use it i ...

javascriptseleniumselenium-webdriverxpathcss-selectors

"Encountering a problem when trying to display Swagger-Editor for the second

While integrating the swagger-editor package into my React application, I encountered an issue. The first time I fetch the Swagger specifications from GitHub, everything works perfectly and validates correctly. However, upon rendering it a second time, an ...

javascriptreactjstypescriptswagger-uiswagger-editor

Using React to Calculate the Total Value of Child Components within the Parent Component

In this scenario, the parent component has access to the values of the child components but struggles to calculate the sum correctly. Instead of displaying the accurate total, it shows 0. https://i.sstatic.net/1etAx.png The expected behavior is for the To ...

javascriptreactjsreact-props

What is the best way to send a custom property through Vue router?

I'm currently working with a route instance: const router = new Router({ routes: [ { path: '/', name: 'Home', component: MainContainer, redirect: '/news/list', children: [ { ...

javascriptvue.jsvue-router

Is it possible to retrieve the `arguments` objects if one of the parameters is named "arguments"?

This code snippet will output 1: (function (params) { console.log(params); }(1, 2)); The params object has replaced the default arguments. Can we retrieve the original arguments object within the function's scope? ...

javascript

Can React avoid re-rendering if the setState does not impact the rendering process?

For example, let's consider a scenario where a hook is used to make an API request: function useApi(...) { const [state, setState] = useState({ fetching: false }); useEffect(() => { setState({ fetching: true }); fetch(...) .then( ...

javascriptreactjsreact-hooks

The express app is configured to send a 301 status code when Supertest is used, and it is

Hello, I am currently utilizing supertest to test the functionality of my Node.js express server application. My goal is to accomplish the following: let request = require('supertest'); let app = require('./server.js'); request(app). ...

javascriptexpresstestingsupertest

Best Practices for Handling Pre-State Setting Mutations in Flux Design Pattern

Currently, I am developing a Vue application utilizing Vuex and following the Flux design pattern. I have encountered what seems to be an inefficient practice of duplicating code in small increments. I am hopeful that this is just a misunderstanding on my ...

javascriptvue.jsvuexflux

Using Three.js to apply a sprite as a texture to a spherical object

function generateLabel(icon, labelText, labelText2, labelText3, bgColor, fontColor, transparency, xCoordinate, yCoordinate, zCoordinate){ $('#imglabelcontainer').append('<div class="imglabel" id="imglabel'+labelText+'" style ...

javascriptjquerythree.js

Dragend event for images does not trigger in webkit when using TinyMCE

When using the TinyMCE editor, I tried binding the dragend event on images with the following code: _imagePlugin.editor.dom.bind(_imagePlugin.editor.dom.select('img'), 'dragend', function(){console.log('aaaa');}); Oddly enou ...

javascriptjquerywebkittinymce

Vue does not consistently update HTML when the reference value changes

I am trying to showcase the readyState of a WebSocket connection by utilizing a Ref<number> property within an object and displaying the Ref in a template. The value of the Ref is modified during WebSocket open and close events. However, I am encount ...

javascriptvue.js

Unable to retrieve the value of ng-model using $scope

Having some trouble getting the ng-model value when clicking a button that triggers a function to add each ng-model value to an object. Interestingly, when trying to get the value of $scope.shipNameFirst, it shows up as undefined in the second example. I& ...

javascripthtmlangularjsangularjs-scope

Is it possible to calculate a variable within a dataset using existing data as a reference point?

Is there a way to dynamically compute some of the data variables in a Vue instance by referencing other variables and tracking their changes? new Vue({ el: '#root', data: { x: 1, y: x + 1 } }) <script src="https://cdnjs.cloudf ...

javascriptvue.js