<!doctype html>
    <title>Two-barn using position</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 Exercise: Two-barn using position</h1>
// We always need a scene
var scene = new THREE.Scene();

// ====================================================================

var barnWidth = 50;
var barnHeight = 30;
var barnDepth = 40;

var barn1geom = TW.createBarn(barnWidth, barnHeight, barnDepth);

// the createMesh function adds a "demo" material to the geometry

var barn1mesh = TW.createMesh(barn1geom);

// the scene is the set of things to render, so add the barn.


// create a half-size barn and add it to the scene

var barn2geom = TW.createBarn(0.5*barnWidth, 0.5*barnHeight, 0.5*barnDepth);

var barn2mesh = TW.createMesh(barn2geom);



// ================================================================
// We always need a renderer

var renderer = new THREE.WebGLRenderer();

TW.mainInit(renderer, scene);

// MODIFY CODE BELOW to adjust the bounding box for the two barns

               {minx: -30, maxx: 55,
                miny: 0, maxy: barnHeight+25,
                minz: -barnDepth, maxz: 0});

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