dat.GUIを使用してコントロールを変更するときに値を表示

Question

画像に表示されているものを誰かに教えてもらえますか？

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

：あなたはXZ平面上の平面（1×1）をお持ちの場合

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

：

は、[1]：ここで

http://www.romualdorivera.com/three.js/dat.GUI_img_01.jpgは私のコードです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 

は、それはexamplejsfiddle

dat.GUIの例に基づいています。