<!doctype html>
    <title>Barn Demo</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: 100%;
          height: 500px;

  <h1>Simple Three.js Demo: Box</h1>
// Create an initial empty Scene
var scene = new THREE.Scene();

// Create a 3D rectangular box of a given width, height, depth
var boxGeom = new THREE.BoxGeometry(6,4,2);

// Create a mesh for the box
// TW.createMesh() assigns a set of demo materials to object faces
var boxMesh = TW.createMesh(boxGeom);

// Add the box mesh to the scene

// 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
var state = TW.cameraSetup(renderer,
                           {minx: -3, maxx: 3,
                            miny: -2, maxy: 2,
                            minz: -1, maxz: 1});

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/tw.js