I am looking to modify the dimensions of the grouped GridHelper through the graphical user interface

I'm having trouble resizing the grid using the GUI interface. How can I adjust its size? Here are the steps I followed to create it.

let scene = new THREE.Scene();
scene.background = new THREE.Color(0x222222);

let group = new THREE.Group();
scene.add(group);

let g = new THREE.MeshBasicMaterial({
    color: 0xc0c0c0
});
let size = 1.0;
let step = 5.0;
for (let i = 0; i < 6; i++) {
    for (let j = 1; j < 2; j += 0.2) {
        let grid1 =new THREE.GridHelper(size, step, g, g);
        grid1.myid = i;
        grid1.rotation.x = 0;
        grid1.position.y = j;
        grid1.position.z = 0;
        group.add(grid1); 
    }  
}
for (let k = 0; k < 6; k++) {
    for (let n = -0.5; n < 0.7; n += 0.2) {
        let grid2 = new THREE.GridHelper(size, step, g, g);
        grid2.myid = k;
        grid2.rotation.x = Math.PI/2;
        grid2.position.y = 1.5;
        grid2.position.z = n;
        group.add(grid2); 
    }             
}  

This is how the GUI appears.

const params = {
    size: 1.0,
    visible: true
};
const gui = new GUI({ width: 300 });
gui.add(params, 'size', 0.1, 2.0).step(0.1).onChange(function(val){
    group.size = val; // need help with resizing here
});
gui.add(params, 'visible').onChange(function(visible){
    group.visible = visible; // Can be shown or hidden
});
gui.open();

The program runs fine but when adjusting the size bar in the GUI, there seems to be no change in the grid's size visually.

Answer №1

You must modify this section:

gui.add( params ,'size' ,0.1,2.0).step(0.1).onChange( function(val){
    group.size=val;://I want to resize here
});

to be like this:

gui.add( params ,'size' ,0.1,2.0).step(0.1).onChange( function(val){
    group.scale.set(val,val,val); //I want to resize here
});

The explanation behind this change is that your group represents a 3D object, so you should adjust its scale property (which comprises x, y, and z dimensions). The slider in your GUI outputs only one value, and for consistent scaling, you need to apply that value to all three dimensions.

I hope this clarifies things for you.

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

As I embarked on my journey into node.js, I encountered some stumbling blocks in the form of errors - specifically, "Uncaught ReferenceError: module is not defined"

Embarking on my Node.js journey, I am delving into the world of modules. After ensuring that both node and npm are correctly installed, I will share the code below to provide insight into the issue at hand. Within my project, I have two JavaScript files - ...

Form a collection of JavaScript arrays using a string that includes strings

Here is a string that needs to be converted into a JavaScript array: ['Value',2],['Value2',4],['Value3',10] To convert this to a JavaScript array, the following code can be used: var tmpStrings = "['Value',2],[&ap ...

Delete a particular table while utilizing $.fn.DataTable.tables()

On a single page, I have several tables that need to be removed when the user decides. My approach was to utilize let table = $.fn.DataTable.tables() table[i-1].destroy(); This code is aimed at obtaining an array of all the tables and subsequently destroy ...

Loading data dynamically in a table by utilizing the react WayPoint library

I'm currently utilizing a combination of material UI table and react-table. When the number of rows in the table exceeds around 200, the performance dips. To address this issue, I am looking to display a fixed number of rows (let's say 20 rows) i ...

retrieve undefined value from redux state in a React Native application

Received the data in reducer but encountering issues accessing it in the component. Below is the connection code: const mapStateToProps =state => { return { name:state.fbLogin.name } } function mapDispatchToProps(dispatch){ ...

Displaying multiple categories of articles on a single page with Node.js

Seeking a solution to limit the number of posts displayed for each category using a .limit() function, but uncertain on how to proceed. Currently utilizing Mongoose and Express in my code setup. The existing code snippet is outlined below: router.get(&a ...

An error is thrown in Three.js stating that the array index 'i' is undefined at line 180, using TransformControls

While working with loaded .STL Files in Three.js using TransformControls, I'm experiencing an issue. Whenever I mouse hover or use the transformControls, my console logs "TypeError: array[i] is undefined three.js:180:9". Is anyone familiar with this e ...

Tips for transferring information between routes in Node.js using Express.js

How can I add a specific attribute to the request object and access it from another route after redirection? Below is an example of what I am looking for: const express = require('express') const app = express() app.get('/test1',(req, ...

Leveraging ng-hide in Angular to show or hide elements based on the state

Is there a way to utilize the ng-hide directive based on the value selected in a dropdown menu? Specifically, I am looking to display #additional-option if option C is chosen from the dropdown list. <div class="form-group"> <label class="co ...

I am experiencing unexpected results with my Mongoose filter and sort query in Express JS middleware. The output does not match what I am anticipating, and the sorting functionality seems to

This middleware is used for filtering and sorting data. I made some modifications to it, but it's not functioning as expected: const aliasTopMenu = (req, res, next) => { req.query.sort = '-price'; req.query.fields = 'name,price, ...

Encountering an issue with Angular directive attributes

I am attempting to create an angular directive that will extract a substring from a passed-in attribute. Below is the code I have written: HTML: <body ng-controller="MainCtrl"> <div><substring message="This is a test."></substri ...

JavaScript animation is not functioning as expected

I created a div with the id of "cen" and gave it a height and width of 50px. $(document).ready(function() { $("#cen").animate({ height: 500px, width: "500px", }, 5000, function() { // Animation complete. }); }); Unfort ...

Tips on toggling between slides with Bootstrap Carousel

I am in the process of designing a portfolio website and have encountered a challenge. I want to divide it into two sections - a brief introduction and a carousel for showcasing projects. While I have managed to set up both sections, I'm facing an iss ...

Switching images dynamically using Flask and JavaScript

I'm currently working on Flask and encountering a perplexing issue. I'm attempting to update an image using JavaScript, but I am getting these errors from Flask: ... 12:05:34] "GET / HTTP/1.1" 200 - ... 12:05:38] "GET /img/pictur ...

Showing a 2D array in Jquery within an MVC environment - what's the solution?

I am in the process of building an MVC application. My goal is to transmit data from the controller and display it using JQuery. I have constructed an array in the controller and sent it to JQuery using Json. Here is the array... And here is the JQuery ...

The user model cannot be assigned to the parameter of type Document or null in a mongoose with Typescript environment

While working with Typescript, I encountered an error related to mongoose. The issue arises from the fact that mongoose expects a promise of a mongoose document (in this case, the user's document) or "null" to be resolved during a search operation. Ho ...

The redirection from HTTP or www to HTTPS is not functioning as expected

Redirecting all links to my website to the https:// domain is supposed to work flawlessly, but there are certain ways it doesn't quite function as expected. https://www.example.com --- works example.com --- works www.example.com --- encounters issu ...

Verifying the accessibility of a website using JQuery/Javascript

I am attempting to use JavaScript to ping a website and display the result. Unfortunately, I have not had any success with this JSFiddle: https://jsfiddle.net/yyjowtru/ Although I believe I am close to achieving the desired outcome, changing the URL in t ...

Is it possible to send two parameters to a JavaScript function using HTML?

Seeking help to develop an .html page where two string inputs are passed as parameters to a .js function, which then returns the longer of the two strings based on their lengths. Initially, I successfully created a functional .js script in VS CODE. Here i ...

receiving a null value from a dropdown selection in react native

As a beginner in learning react native, I am eager to retrieve the selected value from a dropdown in react-native. This is my constructor constructor(props){ super(props); this.state = ({ PickerSelectedVal : '' ...