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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
							<!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.js'></script>
		<script src='js/controls/OrbitControls.js'></script>
		<script src='js/Detector.js'></script>
		<script src='js/libs/msgpack-js.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();

			var container, scene, camera, renderer;

			function render() {

				if ( scene !== undefined ) {

					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( 20, 8 ) );

				threePointLight();

				render();

			}

			function loadMSGPack() {

				new THREE.FileLoader()
					.setResponseType( 'arraybuffer' )
					.load( 'models/msgpack/robo_pigeon.pack', function ( data ) {

						var decoded = msgpack.decode( data );

						var loader = new THREE.ObjectLoader();

						setupScene( loader.parse( decoded ) );

					} );

			}

			function onWindowResize() {

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

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

			}

			function init() {

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

				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 50 );
				camera.position.set( 5, 5, 5 );
				camera.updateProjectionMatrix();

				var orbit = new THREE.OrbitControls( camera, container );
				orbit.addEventListener( 'change', render );

				var target = new THREE.Vector3( 0, 1, 0 );
				camera.lookAt( target );
				orbit.target = target;

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

				loadMSGPack();

			}

			init();

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