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, 100, 200);
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 boxGeometry = new THREE.BoxGeometry(50, cubeHeight, 50);
var boxMaterial = new THREE.MeshBasicMaterial({color: 0x000088});
cube = new THREE.Mesh(boxGeometry, boxMaterial);
cube.position.set(0, cubeHeight/2, 0);
scene.add(cube);
// GUI PANEL INTERACTION
// Now the GUI panel for the interaction is defined
gui = new dat.GUI();
parameters = {
heightScale: 1,
reset: function() { resetCube(); }
}
// Define the second folder which takes care of the scaling of the cube
var folder1 = gui.addFolder("Dimensions");
folder1.open();
var cubeHeightScale = folder1.add(parameters, "heightScale").min(0).max(10).step(0.1).name("height scale").listen()
// Function taking care of the cube changes
cubeHeightScale.onChange(
function(value)
{
cube.scale.y = value;
...