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

时间:2017-03-14 16:54:37

标签: dat.gui

有人可以帮助我在图像中显示的内容吗?

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

1 个答案:

答案 0 :(得分:1)

如果XZ平面上有一个平面(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的example

jsfiddle示例。