使用dat.Gui修改控件时显示值

Question

任何人都可以帮助我在图像中显示的内容吗？

[1]：http：//www.romualdorivera.com/three.js/dat.gui_img_01.jpg

这是我的代码：

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);

Answer 1

如果您在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);

然后，您可以创建一个dat.GUI的实例，然后设置其控制器：

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

它基于dat.gui

的示例

jsfiddle示例。