使用 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 平面 (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 示例。

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

Display a value when modifying a control using dat.GUI

dat.gui