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.