Chapter 8/pipelinethreejsdaescene.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Programming 3D Applications in HTML5 and WebGL &mdash; Loading COLLADA Scenes Using Three.js</title>

<link rel="stylesheet" href="../css/main.css" />

<div id="container" style="width:98%; height:98%; position:absolute;background-color:skyblue;">
</div>

<script src="../libs/jquery-1.9.1/jquery-1.9.1.js"></script>
<script src="../libs/three.js.r58/three.js"></script>
<script src="../libs/three.js.r58/controls/OrbitControls.js"></script>
<script src="../libs/three.js.r59/loaders/ColladaLoader.js"></script>
<script src="../libs/requestAnimationFrame/RequestAnimationFrame.js"></script>
<script type="text/javascript">
var renderer = null, 
scene = null, 
camera = null,
orbitControls = null,
headlight = null;

function run() {
    requestAnimationFrame(function() { run(); });
    
		// Update the camera controller
		if (orbitControls)
			orbitControls.update();

		// Reposition the headlight to point at the model
		if (headlight)
			headlight.position.copy(camera.position);
		
		// Render the scene
		if (scene && camera)
			renderer.render( scene, camera );
}

var shadows = true;
var addEnvironment = true;
var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 2048;

function createRenderer(container) {
	// Create the Three.js renderer and attach it to our canvas
	renderer = new THREE.WebGLRenderer( { antialias: true } );

	// Turn on shadows
	if (shadows) {
		renderer.shadowMapEnabled = true;
		renderer.shadowMapType = THREE.PCFSoftShadowMap;
	}
	    
	// Set the viewport size
	renderer.setSize(container.offsetWidth, container.offsetHeight);

	container.appendChild(renderer.domElement);
}

function createDefaultLights() {

	// Lighting setup
	headlight = new THREE.DirectionalLight;
	headlight.position.set(0, 0, 1);
	scene.add(headlight);

	var ambient = new THREE.AmbientLight(0x222222);
	scene.add(ambient);
}

function createDefaultCamera()
{
    // Add  a camera so we can view the scene
    camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 0.001, 10000 );
    camera.position.z = 5;
	scene.add(camera);
}

// Compute the bounding box of an object or hierarchy of objects
computeBoundingBox = function(obj) {
	if (obj instanceof THREE.Mesh) {
		var geometry = obj.geometry;
		if (geometry) {
			if (!geometry.boundingBox) {
				geometry.computeBoundingBox();
			}
			
			var geometryBBox = geometry.boundingBox;
			obj.updateMatrix();
			geometryBBox.applyMatrix4(obj.matrix);
			return geometryBBox;
		}
		else {
			return new THREE.Box3(new THREE.Vector3, new THREE.Vector3);
		}
	}
	else {
		var i, len = obj.children.length;
		var boundingBox = new THREE.Box3(new THREE.Vector3, new THREE.Vector3);
		
		for (i = 0; i < len; i++) {
			var bbox = computeBoundingBox(obj.children[i]);
			if ( bbox.min.x < boundingBox.min.x ) {

				boundingBox.min.x = bbox.min.x;

			}
			
			if ( bbox.max.x > boundingBox.max.x ) {

				boundingBox.max.x = bbox.max.x;

			}

			if ( bbox.min.y < boundingBox.min.y ) {

				boundingBox.min.y = bbox.min.y;

			}
			
			if ( bbox.max.y > boundingBox.max.y ) {

				boundingBox.max.y = bbox.max.y;

			}

			if ( bbox.min.z < boundingBox.min.z ) {

				boundingBox.min.z = bbox.min.z;

			}
			
			if ( bbox.max.z > boundingBox.max.z ) {

				boundingBox.max.z = bbox.max.z;

			}
		}

		obj.updateMatrix();
		boundingBox.applyMatrix4(obj.matrix);
		return boundingBox;
	}
}
function loadScene() {
	// Ruins by ERLHN
    // http://www.turbosquid.com/FullPreview/Index.cfm/ID/668298
	// http://www.turbosquid.com/Search/Artists/ERLHN    
    var url = "../models/ruins/Ruins_dae.dae";

    var loader = new THREE.ColladaLoader();

	loader.load( url, function( data ) { 
		handleSceneLoaded(data) } );
    
}

function handleSceneLoaded(data) {
	// Add the objects to the scene
	scene.add(data.scene);

	// Look for a camera and lighting
	var result = {};
	data.scene.traverse(function (n) { traverseScene(n, result); });

	if (result.cameras && result.cameras.length)
		camera = result.cameras[0];
	else {
		// Find a good camera position based on the size of the scene
		createDefaultCamera();
		var boundingBox = computeBoundingBox(data.scene);
		var front = boundingBox.max;
		camera.position.set(front.x, front.y, front.z);		
	}
	
	if (result.lights && result.lights.length) {
	}
	else
		createDefaultLights();

	// Create the controller
	initControls();
}

function traverseScene(n, result)
{
	// Look for cameras
	if (n instanceof THREE.Camera) {
		if (!result.cameras)
			result.cameras = [];
		
		result.cameras.push(n);
	}

	// Look for lights
	if (n instanceof THREE.Light) {
		if (!result.lights)
			result.lights = [];
		
		result.lights.push(n);
	}

}

function createEnvironment() {
	// ground
	var groundMaterial = new THREE.MeshPhongMaterial({
	        color: 0xffffff,
	        ambient: 0x555555,
	        shading: THREE.SmoothShading,
	    });
	var ground = new THREE.Mesh( new THREE.PlaneGeometry(1024, 1024, 32, 32), groundMaterial);
	
	ground.rotation.x = -Math.PI / 2;	
	scene.add(ground);
}

var addEnvironment = true;

function createScene(container) {
    
    // Create a new Three.js scene
    scene = new THREE.Scene();

	// Ground
	if (addEnvironment)
		createEnvironment();

	// Load the scene
	loadScene();
}


function initControls() {
	orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
}

$(document).ready(
		function() {

			var container = document.getElementById("container");

			// create the renderer
			createRenderer(container);
			
			// create the scene and load the DAE
			createScene();

	        // Run the run loop
	        run();
		}
);

</script>

</head>
<body>


</html>