javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
							<!DOCTYPE html>
<!--
Requires msgpack-js.js

https://github.com/creationix/msgpack-js-browser
(ported from https://github.com/creationix/msgpack-js)
-->
<html lang='en'>
	<head>
		<title>three.js webgl - msgpack loader</title>
		<meta charset='utf-8'>
		<meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
		<style>
			body {
				margin: 0px;
				overflow: hidden;
			}
			#viewport {
				position: absolute;
				width: 100%;
				height: 100%;
				background: #1b1c1e;
				background-image: linear-gradient(#7d8fa3, #1b1c1e);
			}

			#info {
				color: #fff;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;
				display:block;
			}

			a { color: orange }
		</style>
		<script src='../build/three.min.js'></script>
		<script src='js/controls/OrbitControls.js'></script>
		<script src='js/Detector.js'></script>
		<script src='js/libs/stats.min.js'></script>
		<script src='js/libs/require.js'></script>
	</head>
	<body>
		<div id='info'>
			<p>Robo Pigeon, from <a href='http://www.tearsofsteel.org' target='_blank'>Tears of Steel</a>, is licensed under
			<a href='http://creativecommons.org/licenses/by/3.0/' target='_blank'>Creative Commons Attribution 3.0</a>.
			</p>
		</div>
		<div id='viewport'></div>
		<script>

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			requirejs.config( { baseUrl: 'js/libs' } );

			var container, scene, camera, renderer;

			function render() {

				renderer.render( scene, camera );

			}

			function threePointLight() {

				var directionalLight = new THREE.DirectionalLight( 0xb8b8b8 );
				directionalLight.position.set(1, 1, 1).normalize();
				directionalLight.intensity = 1.0;
				scene.add( directionalLight );

				directionalLight = new THREE.DirectionalLight( 0xb8b8b8 );
				directionalLight.position.set(-1, 0.6, 0.5).normalize();
				directionalLight.intensity = 0.5;
				scene.add(directionalLight);

				directionalLight = new THREE.DirectionalLight();
				directionalLight.position.set(-0.3, 0.6, -0.8).normalize( 0xb8b8b8 );
				directionalLight.intensity = 0.45;
				scene.add(directionalLight);

			}

			function setupScene( result ) {

				scene = result;
				scene.add( new THREE.GridHelper( 10, 2.5 ) );

				threePointLight();

				render();

			}

			function loadMSGPack() {

				require(['msgpack-js'], function ( msgpack ) {

						var xhr = new XMLHttpRequest();
						xhr.open('GET', 'scenes/robo_pigeon.pack', true);
						xhr.responseType = 'arraybuffer';

						xhr.onload = function( e ) {

								var decoded = msgpack.decode( this.response );

								var loader = new THREE.ObjectLoader();

								setupScene( loader.parse( decoded ) );

						};

						xhr.send();

				} );

			}

			function onWindowResize() {

				camera.aspect = container.offsetWidth / container.offsetHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );
				render();

			}

			function init() {

				scene = new THREE.Scene();

				scene.add( new THREE.GridHelper( 10, 2.5 ) );
				container = document.getElementById('viewport');

				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true	} );
				renderer.setClearColor( 0x000000, 0 );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );

				var aspect = container.offsetWidth / container.offsetHeight;
				camera = new THREE.PerspectiveCamera( 60, aspect, 0.01, 50 );
				orbit = new THREE.OrbitControls( camera, container );
				orbit.addEventListener( 'change', render );
				camera.position.z = 5;
				camera.position.x = 5;
				camera.position.y = 5;
				var target = new THREE.Vector3( 0, 1, 0 );
				camera.lookAt( target );
				orbit.target = target;
				camera.updateProjectionMatrix();

				window.addEventListener( 'resize', onWindowResize, false );

				loadMSGPack();

			}

			init();

		</script>
	</body>
</html>