dat.GUI Demo

by Lukasz Guminski

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

CSS

.folder .dg ul {
  margin-top: 0 !important;
}

JavaScript

window.onload = init();
animate(); //calling function that does all the rendering

//GLOBAL VARS
var scene, camera, renderer;

var controls;

// once everything is loaded, we run our Three.js stuff.
function init() {

  // create a scene, that will hold all our elements such as objects, cameras and lights.
  scene = new THREE.Scene();

  //SET CAMERA
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 100)
  camera.position.z = 5;

  // create a render and set the size
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  //renderer.setClearColor("#666666"); //background color
  renderer.setSize(window.innerWidth, window.innerHeight); //size of renderer

  //bind rendered to the dom element
  document.getElementById("WebGL-output").appendChild(renderer.domElement);


	var sphere;

gui.add(params, 'focus', {
	'entire solar system': 0,
  'sun': 1,
  'planet': 2,
  'moon': 3
}).onFinishChange(val => {
  //sphere.scale.y = parseFloat(val);
});


  // create a sphere
  var sphereGeometry = new THREE.IcosahedronGeometry(1)
  var sphereMaterial = new THREE.MeshLambertMaterial({
    color: 0xffff00
  }); //0xF7F7F7 = gray
  sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  sphere.position.x = 0;
  sphere.position.y = 3;
  sphere.position.z = 0;
  scene.add(sphere);

  //ADDING LIGHTS
  var ambientLight = new THREE.AmbientLight(0x0c0c0c);
  scene.add(ambientLight);
  var spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(-40, 60, -10);
  spotLight.castShadow = true;
  scene.add(spotLight);

  camera.lookAt(scene.position);

  //camera
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.minDistance = 5;
  controls.maxDistance = 5;
}


function render() {
  // update the picking ray with the camera and mouse position
  renderer.render(scene, camera); //render the scene
}


function animate() {
  requestAnimationFrame(animate); //pauses when user switches tab
 ...