<!doctype html>

  <title>Simple camera not using TW</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: 800px;
      height: 500px;
      display: block;
      margin: 10px auto;


  <h1>Simple camera not using TW</h1>

  <div id="canvasParent"></div>

  <div id="footer">
    <p>&copy; Scott D. Anderson.
      This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/1.0/">Creative
        Commons License</a>


var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
var canvasElt = renderer.domElement;
renderer.setClearColor( 0xdddddd, 1);

// ====================================================================
// Camera setup. See last line of example as well

var camera = new THREE.PerspectiveCamera( 45,      // fovy in degrees
                                          800/500, // aspect ratio: our canvas is 800/500 pixels
                                          1,       // near
                                          100      // far

camera.position.set(10,5,30);   // so that the barn is roughly centered
camera.up.set(0,1,0);           // this is actually the default

// this location is roughly in the center of the front of the barn
var barnFront = new THREE.Vector3(10,5,0); 

camera.lookAt( barnFront );

// This will render the current scene using the current camera
// Invoked at the end of this code.
function render() {
    renderer.render( scene, camera );

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

/* Next, we create objects in our scene. Here, one wire barn. */

var wirebarn = TW.createWireBarn(20,10,40);

// ================================================================
// Gotta do this! Render the scene using the current camera.


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
  4. https://s3.amazonaws.com/m.mr-pc.org/t/cisc3620/2020sp/dat.gui.min.js