dat.GUI Area

auto update value

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
  font-family: Monospace;
  font-size: 8pt;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 20);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x999999);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, 2);
light.position.set(5, 10, -10);
scene.add(light);

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


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;
  }
);
gui.add(parameters, "area", 1).name("Surface area=").listen();

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}