scene

boiler.js  [download]

/*
 * All the boilerplate from the first example is here,
 * you just provide makeSceneGraph()
 */

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

window.onload = function () { //*1 Same boilerplate code as before, moved to separate file
	// See if our browser has webgl
	if( Detector.webgl ) {
		renderer = new THREE.WebGLRenderer( { antialias: true } );
		renderer.setClearColor( new THREE.Color ("lightgrey"))
	}
	// else use a substitute renderer, but may be slow
	else {
		renderer = new THREE.CanvasRenderer();
	}
	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);
	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() {
	requestAnimationFrame( animate );
	controls.update()
}

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

// In case window is resized
window.onresize = function () {
	renderer.setSize( window.innerWidth, window.innerHeight );

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	render();
}

scene.html  [download]

<!DOCTYPE html>

<html>
<head>

<title>Comp 86 example: Scene</title>
<!-- This is like my Java3d Example2 -->

<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>

<!-- All the boilerplate code from the first example is now in this separate file -->
<script src="boiler.js"></script>

<script type="text/javascript">

/*
 * Our stuff goes here, the rest of the code is in boiler.js
 */
function makeSceneGraph () { //*1 Instantiate our own Scene, and plug it in
	scene.add (new Scene()) //*1
}

/*
 * Do the scene as an object, subclass of THREE.Object3D
 * but kind of a silly object, cause no state or behavior, just constructor
 */
class Scene extends THREE.Object3D { //*1
    constructor () {
	// Call the superclass' constructor
	super()

	// First item = a box, rotated and translated
	var box = new THREE.Mesh ( //*2 Tall box
		new THREE.BoxGeometry (1, 3, 1), //*2
		new THREE.MeshPhongMaterial()) //*2

	// Move it back from origin and to the right
	box.position.set (5, 0, -4) //*2

	// Rotate it in X and Y
	box.rotation.set (45 * Math.PI/180, 30 * Math.PI/180, 0) //*2

	// Plug it in to our scene
	this.add (box) //*2

	// A sphere, in a different location
	var sphere = new THREE.Mesh ( //*3 Sphere
		new THREE.SphereGeometry(1, 32, 32), //*3
		new THREE.MeshPhongMaterial()) //*3
	sphere.position.set (-5, 0, -3) //*3
	this.add (sphere) //*3

	// A pyramid, using our class below
	var pyramid = new Pyramid () //*4 Pyramid
	pyramid.position.set (0, 0, -6) //*4
	pyramid.rotation.set (0, 45 * Math.PI/180, 0) //*4
	this.add (pyramid) //*4
    }
}

/*
 * Make a pyramid out of other objects (3 Box's stacked up)
 * as a new mini scene graph that contains it
 */
class Pyramid extends THREE.Object3D { //*4
    constructor () {
	super()

	// Bottom Box, located slightly down
	// (relative to origin of the pyramid)
	var bot = new THREE.Mesh ( //*5 Pyramid components
		new THREE.BoxGeometry (3, 3, 3), //*5
		new THREE.MeshPhongMaterial()) //*5
	bot.position.set (0, -3/2, 0) //*5
	this.add (bot) //*5

	// Middle Box, slightly up
	var mid = new THREE.Mesh ( //*5
		new THREE.BoxGeometry (2, 2, 2), //*5
		new THREE.MeshPhongMaterial()) //*5
	mid.position.set (0, 2/2, 0) //*5
	this.add (mid) //*5

	// Top box, further up
	var top = new THREE.Mesh ( //*5
		new THREE.BoxGeometry (1, 1, 1), //*5
		new THREE.MeshPhongMaterial()) //*5
	top.position.set (0, 2 + 1/2, 0) //*5
	this.add (top) //*5
    }
}

</script>
</head>

<body>
    	<div id="theContainer"></div>
</body>
</html>