updating dat.gui based on selected object
http://stackoverflow.com/questions/25128277/updating-dat-gui-based-on-selected-object
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script src="https://mrdoob.github.com/three.js/build/three.min.js"></script>
<script src="https://mrdoob.github.com/three.js/examples/js/controls/OrbitControls.js"></script>
CSS
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
JavaScript
var camera, controls, scene, renderer;
var cubeHeight = 50;
init();
animate();
function init() {
// create empty div element in the DOM, we'll add renderer, stats, and gui to this later
var container = document.createElement('div');
document.body.appendChild(container);
// scene
scene = new THREE.Scene();
scene.add(new THREE.GridHelper(100, 5)); //GridHelper(size, step)
// PerspectiveCamera(fov, aspect, near, far )
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 20);
camera.lookAt(scene.position);
// controls
controls = new THREE.OrbitControls(camera);
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xCCCCCC, 1);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
// Defines the cube and its original position
var cubeHeight = 1; // 0.1;
var boxGeometry = new THREE.BoxGeometry(5, cubeHeight, 5);
var boxMaterial = new THREE.MeshBasicMaterial({color: 0x880000, transparent: true, opacity: 0.5});
cube = new THREE.Mesh(boxGeometry, boxMaterial);
cube.position.set(0, cubeHeight/2, 0);
scene.add(cube);
var chimneyHeight = 0.5;
var chimneyGeometry = new THREE.BoxGeometry(0.1, chimneyHeight, 0.1);
var chimneyMaterial = new THREE.MeshBasicMaterial({color: 0x000088});
chimney = new THREE.Mesh(chimneyGeometry, chimneyMaterial);
chimney.position.set(0, cubeHeight+chimneyHeight/2, 0);
scene.add(chimney);
// GUI PANEL INTERACTION
// Now the GUI panel for the interaction is defined
gui = new dat.GUI();
parameters = {
depth: 1, height: 1, width: 1,
tallChimney: 1
}
var folder1 = gui.addFolder("House dimensions (cm)");
folder1.open();
var cubeX =...