<!doctype html>
<html>
<head>
<title>Simple camera not 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 not using TW</h1>
<div id="canvasParent"></div>
<div id="footer">
<p>© 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();
var canvasElt = renderer.domElement;
document.body.appendChild(canvasElt);
renderer.setSize(canvasElt.clientWidth,canvasElt.clientHeight);
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);
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.