box

box.html  [download]

<!DOCTYPE html>

<html>
<head>

<title>Comp 86 example: Box</title>

<!-- Uses copies I downloaded from http://threejs.org into ./libs/...
or could load directly from web, without keeping your own local copy,
like src="http://threejs.org/build/three.min.js"
src="http://threejs.org/examples/js/Detector.js"
etc
-->
<script src="libs/build/three.min.js"></script>
<script src="libs/examples/js/Detector.js"></script>
<script src="libs/examples/js/controls/OrbitControls.js"></script>

<script type="text/javascript">

/*
 * Most of this is boilerplate,
 * your own stuff typically goes in makeSceneGraph()
 */

// Global variables
var scene, renderer, camera, controls;

window.onload = function () {
	// Most browsers now support WebGLRenderer
	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setClearColor( new THREE.Color ("lightgrey"))
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.getElementById('theContainer').appendChild(renderer.domElement);

	// Create the scene
	scene = new THREE.Scene();

	// Put a camera into the scene
	camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
	camera.position.set(0, 0, 5); //*4 Boilerplate: Move camera +5 Z (toward user)
	scene.add(camera);

	// Create a camera contol
	controls = new THREE.OrbitControls( camera, renderer.domElement );
	controls.addEventListener( 'change', render );

	// Add our stuff to the scene, kept in a separate function
	makeSceneGraph()

	render()
	animate()
}

// Animation loop
function animate() { //*5 Boilerplate: Use javascript animation callback
	requestAnimationFrame( animate ); //*5
	controls.update() //*5
}

// Render the scene
function render() {
	renderer.render( scene, camera );
}

/*
 * Our own stuff goes here
 * This function accesses global variable scene
 * and adds our stuff under it.
 */
function makeSceneGraph () { //*1 The rest is boilerplate
	scene.add ( //*3 Add it to scene graph
		new THREE.Mesh( //*2 Create box
			new THREE.BoxGeometry( 1, 1, 1 ), //*2
			new THREE.MeshBasicMaterial())) //*2
}

</script>
</head>

<body>
	<!-- Container for three.js -->
    	<div id="theContainer"></div>
</body>
</html>