Display a value when modifying a control using dat.GUI

Question

Can anybody help me what I am showing in the image?

[1]: http://www.romualdorivera.com/three.js/dat.GUI_img_01.jpg

Here is my code:

var gui = new dat.GUI();
parameters = {  x: 1,   area: 1,}

gui.add(parameters, 'x', 1,400).name("Scale XY (in)").onChange();

gui.add(parameters, "area", value).name("Surface area=").onChange( x = x * 2);

`x * 2` is the calculation of a perimeter, not an area. – prisoner849 Mar 14 '17 at 17:40 — prisoner849, Mar 14 '17 at 17:40
Yes, I meant any formula. – RonMarcial Mar 14 '17 at 19:14 — RonMarcial, Mar 14 '17 at 19:14

score 1 · Accepted Answer · answered Mar 14 '17 at 17:33

If you have a plane on the XZ-plane (1 x 1):

var planeGeom = new THREE.PlaneGeometry(1, 1);
planeGeom.rotateX(-Math.PI / 2);
var plane = new THREE.Mesh(planeGeom, new THREE.MeshStandardMaterial({
  color: "green"
}));
scene.add(plane);

then you can create an instance of dat.GUI and set its controllers like this:

parameters = {
  x: 1,
  area: 1,
}
var gui = new dat.GUI();
gui.add(parameters, 'x', 1, 400).name("Scale XY (in)").onChange(
  function(value) {
    plane.scale.set(value, 1, value);
    parameters.area = value * value; // update the value of parameters.area
  }
);
gui.add(parameters, "area", 1).name("Surface area=").listen(); // listen for updating of the value

It's based on the example of dat.GUI

jsfiddle example.

Display a value when modifying a control using dat.GUI

1 Answers1