<!doctype html>
    <title>Box adjustment with dat.GUI</title>
      body { max-width: 100%; }
      /* feel free to style the canvas any way you want. If you want it to
      use the entire window, set width: 100% and height: 100%. */
      canvas {
          width: 80%;
          height: 500px;
          display: block;
          margin: 10px auto;

  <h1>Box adjustment with dat.GUI</h1>
  <p>This pen demonstrates adjusting the parameters of a model using google's dat.GUI package.</p>

// Create an initial empty Scene
var scene = new THREE.Scene();

// global variable for dimensions of box 
var sceneParams = {
    boxWidth: 20,
    boxHeight: 40,
    boxDepth: 60

// addBox() creates a 3D rectangular box of a given width, height, depth
// and adds it to the scene
function addBox (width,height,depth) {
    var boxGeom = new THREE.BoxGeometry(width,height,depth)
    boxMesh = TW.createMesh(boxGeom);


// Create a renderer to render the scene
var renderer = new THREE.WebGLRenderer();

// TW.mainInit() initializes TW, adds the canvas to the document,
// enables display of 3D coordinate axes, sets up keyboard controls

// Set up a camera for the scene
               {minx: -20, maxx: 20,
                miny: -30, maxy: 30,
                minz: -40, maxz: 40});

// redrawBox() is a callback function that redraws the box with the new dimensions
function redrawBox() {

// set up sliders to control the dimensions of the box
var gui = new dat.GUI();
gui.add(sceneParams, 'boxWidth', 10, 30).onChange(redrawBox);
gui.add(sceneParams, 'boxHeight', 20, 50).onChange(redrawBox);
gui.add(sceneParams, 'boxDepth', 30, 70).onChange(redrawBox);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3.amazonaws.com/m.mr-pc.org/t/cisc3620/2020sp/three.min.js
  2. https://s3.amazonaws.com/m.mr-pc.org/t/cisc3620/2020sp/OrbitControls.js
  3. https://s3.amazonaws.com/m.mr-pc.org/t/cisc3620/2020sp/dat.gui.min.js
  4. https://s3.amazonaws.com/m.mr-pc.org/t/cisc3620/2020sp/tw.js