<!doctype html>
<html>

<head>
  <title>Simple camera using TW</title>
  <style>
    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;
    }
  </style>
</head>

<body>

  <h1>Simple camera 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>
  </div>

</body>

</html>
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
TW.mainInit(renderer, scene);

// ====================================================================
// 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);
scene.add(wirebarn);

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

render();

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