Acasă Explorează Ajutor
Autentificare
javascript
/
three.js
oglindă de https://github.com/tazdij/three.js.git
2
0
Bifurcare 0
Fisiere Probleme 0 Wiki
Răsfoiți Sursa

Refactor parallax barrier example

Lewy Blue 7 ani în urmă
părinte
b5d6ed3dfa
comite
d78c734dd2
2 a modificat fișierele cu 76 adăugiri și 515 ștergeri
Vizualizare divizată Arată Statisticile Diff
  1. BIN
      examples/models/fbx/viper.fbx
  2. 76 515
      examples/webgl_effects_parallaxbarrier.html

BIN
examples/models/fbx/viper.fbx
Vizualizați fișierul


+ 76 - 515
examples/webgl_effects_parallaxbarrier.html
Vizualizați fișierul 

@@ -6,59 +6,43 @@
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 			body {
 
-				background:#000;
 
-				color:#fff;
 
-				padding:0;
 
-				margin:0;
 
-				overflow:hidden;
 
-				font-family:georgia;
 
-				text-align:center;
 
+				font-family: Monospace;
 
+				margin: 0px;
 
+				overflow: hidden;
 
+			}
 
+			#info {
 
+				color: #000;
 
+				position: absolute;
 
+				top: 10px;
 
+				width: 100%;
 
+				text-align: center;
 
+				z-index: 100;
 
+				display:block;
 
+			}
 
+			#info a {
 
+				color: #046;
 
+				font-weight: bold;
 
 			}
 
-			h1 { }
 
-			a { color:skyblue; text-decoration:none }
 
-			canvas { pointer-events:none; z-index:10; position:relative; }
 
-
 
-			#d { position:absolute; width: 100%; text-align:center; margin:1em 0 -4.5em 0; z-index:1000; }
 
-
 
-			.bwrap { margin:0.5em 0 0 0 }
 
-			button { font-family:georgia; border:0; background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer; border-radius:3px; }
 
-			button:hover { background:#333 }
 
-			#buttons_cars button { color:#fa0 }
 
-
 
-			#car_info { text-align:center; }
 
-			#car_name { font-size:1em }
 
-			#car_author { font-size:1em }
 
-
 
-			#oldie { background:rgb(50,0,0) !important; color:#fff !important; margin-top:7em!important }
 
 		</style>
 
 	</head>
 
 
 	<body>
 
-		<div id="d">
 
-			<div id="info">
 
-				<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - effects - parallax barrier.
 
-				texture by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a> :
 
-				<span id="car_info">
 
-					<span id="car_name">Bugatti Veyron model</span>
 
-					by <span id="car_author"><a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank" rel="noopener">Troyano</a></span>
 
-				</span>
 
-
 
-			</div>
 
-
 
-			<div id="buttons_cars" class="bwrap">
 
-				<button id="veyron">Bugatti Veyron</button>
 
-				<button id="gallardo">Lamborghini Gallardo</button>
 
-				<button id="f50">Ferrari F50</button>
 
-				<button id="camaro">Chevrolet Camaro</button>
 
-			</div>
 
-
 
-			<div id="buttons_materials" class="bwrap"></div>
 
+
 
+		<div id="info">
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - effects - parallax barrier<br />
 
+			Texture by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>
 
+			Dodge Viper model by <a href="https://www.turbosquid.com/3d-models/3d-2010-dodge-viper-acr-model/528631" target="_blank" rel="noopener">quads_tris_and_ngons</a>
 
 		</div>
 
 
+
 
 		<script src="../build/three.js"></script>
 
 
 		<script src="js/effects/ParallaxBarrierEffect.js"></script>
 
-		<script src="js/loaders/BinaryLoader.js"></script>
 
+
 
+		<script src="js/libs/inflate.min.js"></script>
 
+		<script src="js/loaders/FBXLoader.js"></script>
 
+
 
+		<script src="js/controls/OrbitControls.js"></script>
 
 
 		<script src="js/Detector.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
@@ -67,381 +51,85 @@
 
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 
-			var STATS_ENABLED = false;
 
-
 
-			var CARS = {
 
-
 
-				"veyron": 	{
 
-
 
-					name:	"Bugatti Veyron",
 
-					url: 	"obj/veyron/VeyronNoUv_bin.js",
 
-					author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank" rel="noopener">Troyano</a>',
 
-					init_rotation: [ 0, 0, 0 ],
 
-					scale: 5.5,
 
-					init_material: 4,
 
-					body_materials: [ 2 ],
 
-
 
-					object: null,
 
-					buttons: null,
 
-					materials: null
 
-
 
-				},
 
-
 
-				"gallardo": {
 
-
 
-					name: 	"Lamborghini Gallardo",
 
-					url:	"obj/gallardo/GallardoNoUv_bin.js",
 
-					author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1711" target="_blank" rel="noopener">machman_3d</a>',
 
-					init_rotation: [ 0, 0, 0 ],
 
-					scale: 3.7,
 
-					init_material: 9,
 
-					body_materials: [ 3 ],
 
-
 
-					object:	null,
 
-					buttons: null,
 
-					materials: null
 
-
 
-				},
 
-
 
-				"f50": {
 
-
 
-					name: 	"Ferrari F50",
 
-					url:	"obj/f50/F50NoUv_bin.js",
 
-					author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1687" target="_blank" rel="noopener">daniel sathya</a>',
 
-					init_rotation: [ 0, 0, 0 ],
 
-					scale: 0.175,
 
-					init_material: 2,
 
-					body_materials: [ 3, 6, 7, 8, 9, 10, 23, 24 ],
 
-
 
-					object:	null,
 
-					buttons: null,
 
-					materials: null
 
-
 
-				},
 
-
 
-				"camaro": {
 
-
 
-					name: 	"Chevrolet Camaro",
 
-					url:	"obj/camaro/CamaroNoUv_bin.js",
 
-					author: '<a href="http://www.turbosquid.com/3d-models/blender-camaro/411348" target="_blank" rel="noopener">dskfnwn</a>',
 
-					init_rotation: [ 0.0, 0.0, 0.0 ],
 
-					scale: 75,
 
-					init_material: 0,
 
-					body_materials: [ 0 ],
 
-
 
-					object:	null,
 
-					buttons: null,
 
-					materials: null
 
-
 
-				}
 
-
 
-			};
 
-
 
-
 
-			var container, stats;
 
-
 
-			var camera, scene, renderer, effect;
 
-
 
-			var m, mi;
 
-
 
-			var directionalLight, pointLight;
 
-
 
-			var mouseX = 0, mouseY = 0;
 
-
 
-			var windowHalfX = window.innerWidth / 2;
 
-			var windowHalfY = window.innerHeight / 2;
 
-
 
-			var loader = new THREE.BinaryLoader();
 
-
 
-			init();
 
-			animate();
 
+			var stats, camera, scene, renderer, effect;
 
 
 			function init() {
 
 
-				container = document.createElement( 'div' );
 
+				var container  = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
 
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 200 );
 
+				camera.position.set( 4, 2, 4 );
 
+
 
+				controls = new THREE.OrbitControls( camera );
 
+				controls.maxPolarAngle = Math.PI / 2.25;
 
+				controls.minDistance = 4;
 
+				controls.maxDistance = 20;
 
 
 				var textureCube = new THREE.CubeTextureLoader()
 
 					.setPath( 'textures/cube/Bridge2/')
 
 					.load( [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ] );
 
 
 				scene = new THREE.Scene();
 
-				scene.background = textureCube;
 
-
 
-				// LIGHTS
 
-
 
-				var ambient = new THREE.AmbientLight( 0x050505 );
 
-				scene.add( ambient );
 
+				scene.background = new THREE.Color( 0xa0a0a0 );
 
+				scene.fog = new THREE.Fog( 0xa0a0a0, 10, 50 );
 
 
-				directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
 
-				directionalLight.position.set( 2, 1.2, 10 ).normalize();
 
-				scene.add( directionalLight );
 
+				var hemi = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 
+				hemi.position.set( 0, 20, 0 );
 
+				scene.add( hemi );
 
 
-				directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 
-				directionalLight.position.set( - 2, 1.2, -10 ).normalize();
 
-				scene.add( directionalLight );
 
+				var direct = new THREE.DirectionalLight( 0xffffff );
 
+				direct.position.set( 5, 5, 0 );
 
+				scene.add( direct );
 
 
-				pointLight = new THREE.PointLight( 0xffaa00, 2 );
 
-				pointLight.position.set( 2000, 1200, 10000 );
 
-				scene.add( pointLight );
 
-
 
-				//
 
+				// ground
 
+				var mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 
+				mesh.rotation.x = - Math.PI / 2;
 
+				mesh.receiveShadow = true;
 
+				scene.add( mesh );
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: false } );
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				container.appendChild( renderer.domElement );
 
+				var grid = new THREE.GridHelper( 100, 50, 0x000000, 0x000000 );
 
+				grid.material.opacity = 0.2;
 
+				grid.material.transparent = true;
 
+				scene.add( grid );
 
 
 				var width = window.innerWidth || 2;
 
 				var height = window.innerHeight || 2;
 
 
-				effect = new THREE.ParallaxBarrierEffect( renderer );
 
-				effect.setSize( width, height );
 
-
 
-				if ( STATS_ENABLED ) {
 
-
 
-					stats = new Stats();
 
-					container.appendChild( stats.dom );
 
-
 
-				}
 
-
 
-				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
-
 
-				// common materials
 
-
 
-				var mlib = {
 
-
 
-				"Orange": 	new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ),
 
-				"Blue": 	new THREE.MeshLambertMaterial( { color: 0x001133, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ),
 
-				"Red": 		new THREE.MeshLambertMaterial( { color: 0x660000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
 
-				"Black": 	new THREE.MeshLambertMaterial( { color: 0x000000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.15 } ),
 
-				"White":	new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
 
-
 
-				"Carmine": 	new THREE.MeshPhongMaterial( { color: 0x770000, specular:0xffaaaa, envMap: textureCube, combine: THREE.MultiplyOperation } ),
 
-				"Gold": 	new THREE.MeshPhongMaterial( { color: 0xaa9944, specular:0xbbaa99, shininess:50, envMap: textureCube, combine: THREE.MultiplyOperation } ),
 
-				"Bronze":	new THREE.MeshPhongMaterial( { color: 0x150505, specular:0xee6600, shininess:10, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
 
-				"Chrome": 	new THREE.MeshPhongMaterial( { color: 0xffffff, specular:0xffffff, envMap: textureCube, combine: THREE.MultiplyOperation } ),
 
-
 
-				"Orange metal": new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: textureCube, combine: THREE.MultiplyOperation } ),
 
-				"Blue metal": 	new THREE.MeshLambertMaterial( { color: 0x001133, envMap: textureCube, combine: THREE.MultiplyOperation  } ),
 
-				"Red metal": 	new THREE.MeshLambertMaterial( { color: 0x770000, envMap: textureCube, combine: THREE.MultiplyOperation } ),
 
-				"Green metal": 	new THREE.MeshLambertMaterial( { color: 0x007711, envMap: textureCube, combine: THREE.MultiplyOperation } ),
 
-				"Black metal":	new THREE.MeshLambertMaterial( { color: 0x222222, envMap: textureCube, combine: THREE.MultiplyOperation } ),
 
-
 
-				"Pure chrome": 	new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube } ),
 
-				"Dark chrome":	new THREE.MeshLambertMaterial( { color: 0x444444, envMap: textureCube } ),
 
-				"Darker chrome":new THREE.MeshLambertMaterial( { color: 0x222222, envMap: textureCube } ),
 
-
 
-				"Black glass": 	new THREE.MeshLambertMaterial( { color: 0x101016, envMap: textureCube, opacity: 0.975, transparent: true } ),
 
-				"Dark glass":	new THREE.MeshLambertMaterial( { color: 0x101046, envMap: textureCube, opacity: 0.25, transparent: true } ),
 
-				"Blue glass":	new THREE.MeshLambertMaterial( { color: 0x668899, envMap: textureCube, opacity: 0.75, transparent: true } ),
 
-				"Light glass":	new THREE.MeshBasicMaterial( { color: 0x223344, envMap: textureCube, opacity: 0.25, transparent: true, combine: THREE.MixOperation, reflectivity: 0.25 } ),
 
-
 
-				"Red glass":	new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.75, transparent: true } ),
 
-				"Yellow glass":	new THREE.MeshLambertMaterial( { color: 0xffffaa, opacity: 0.75, transparent: true } ),
 
-				"Orange glass":	new THREE.MeshLambertMaterial( { color: 0x995500, opacity: 0.75, transparent: true } ),
 
-
 
-				"Orange glass 50":	new THREE.MeshLambertMaterial( { color: 0xffbb00, opacity: 0.5, transparent: true } ),
 
-				"Red glass 50": 	new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } ),
 
-
 
-				"Fullblack rough":	new THREE.MeshLambertMaterial( { color: 0x000000 } ),
 
-				"Black rough":		new THREE.MeshLambertMaterial( { color: 0x050505 } ),
 
-				"Darkgray rough":	new THREE.MeshLambertMaterial( { color: 0x090909 } ),
 
-				"Red rough":		new THREE.MeshLambertMaterial( { color: 0x330500 } ),
 
-
 
-				"Darkgray shiny":	new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x050505 } ),
 
-				"Gray shiny":		new THREE.MeshPhongMaterial( { color: 0x050505, shininess: 20 } )
 
-
 
-				};
 
-
 
-				// Gallardo materials
 
-
 
-				CARS[ "gallardo" ].materials = {
 
-
 
-					body: [
 
-
 
-						[ "Orange", 	mlib[ "Orange" ] ],
 
-						[ "Blue", 		mlib[ "Blue" ] ],
 
-						[ "Red", 		mlib[ "Red" ] ],
 
-						[ "Black", 		mlib[ "Black" ] ],
 
-						[ "White", 		mlib[ "White" ] ],
 
-
 
-						[ "Orange metal", 	mlib[ "Orange metal" ] ],
 
-						[ "Blue metal", 	mlib[ "Blue metal" ] ],
 
-						[ "Green metal", 	mlib[ "Green metal" ] ],
 
-						[ "Black metal", 	mlib[ "Black metal" ] ],
 
-
 
-						[ "Carmine", 	mlib[ "Carmine" ] ],
 
-						[ "Gold", 		mlib[ "Gold" ] ],
 
-						[ "Bronze", 	mlib[ "Bronze" ] ],
 
-						[ "Chrome", 	mlib[ "Chrome" ] ]
 
-
 
-					]
 
-
 
-				};
 
-
 
-				m = CARS[ "gallardo" ].materials;
 
-				mi = CARS[ "gallardo" ].init_material;
 
-
 
-				CARS[ "gallardo" ].mmap = {
 
-
 
-					0: mlib[ "Pure chrome" ], 	// wheels chrome
 
-					1: mlib[ "Black rough" ],   // tire
 
-					2: mlib[ "Black glass" ], 	// windshield
 
-					3: m.body[ mi ][ 1 ], 		// body
 
-					4: mlib[ "Red glass" ],    	// back lights
 
-					5: mlib[ "Yellow glass" ],  // front lights
 
-					6: mlib[ "Dark chrome" ]	// windshield rim
 
-
 
-				};
 
-
 
-				// Veyron materials
 
-
 
-				CARS[ "veyron" ].materials = {
 
-
 
-					body: [
 
-
 
-						[ "Orange metal", 	mlib[ "Orange metal" ] ],
 
-						[ "Blue metal", 	mlib[ "Blue metal" ] ],
 
-						[ "Red metal", 		mlib[ "Red metal" ] ],
 
-						[ "Green metal",	mlib[ "Green metal" ] ],
 
-						[ "Black metal", 	mlib[ "Black metal" ] ],
 
-
 
-						[ "Gold", 		mlib[ "Gold" ] ],
 
-						[ "Bronze", 	mlib[ "Bronze" ] ],
 
-						[ "Chrome", 	mlib[ "Chrome" ] ]
 
-
 
-					]
 
-
 
-				};
 
-
 
-				m = CARS[ "veyron" ].materials;
 
-				mi = CARS[ "veyron" ].init_material;
 
-
 
-				CARS[ "veyron" ].mmap = {
 
-
 
-					0: mlib[ "Black rough" ],		// tires + inside
 
-					1: mlib[ "Pure chrome" ],		// wheels + extras chrome
 
-					2: m.body[ mi ][ 1 ], 			// back / top / front torso
 
-					3: mlib[ "Dark glass" ],		// glass
 
-					4: mlib[ "Pure chrome" ],		// sides torso
 
-					5: mlib[ "Pure chrome" ],		// engine
 
-					6: mlib[ "Red glass 50" ],		// backlights
 
-					7: mlib[ "Orange glass 50" ]	// backsignals
 
-
 
-				};
 
-
 
-				// F50 materials
 
 
-				CARS[ "f50" ].materials = {
 
 
-					body: [
 
+				var loader = new THREE.FBXLoader();
 
+				loader.load( 'models/fbx/viper.fbx', function ( object ) {
 
 
-						[ "Orange", 	mlib[ "Orange" ] ],
 
-						[ "Blue", 		mlib[ "Blue" ] ],
 
-						[ "Red", 		mlib[ "Red" ] ],
 
-						[ "Black", 		mlib[ "Black" ] ],
 
-						[ "White", 		mlib[ "White" ] ],
 
+					object.traverse( function ( child ) {
 
 
-						[ "Orange metal", 	mlib[ "Orange metal" ] ],
 
-						[ "Blue metal", 	mlib[ "Blue metal" ] ],
 
-						[ "Black metal", 	mlib[ "Black metal" ] ],
 
+						if ( child.isMesh ) {
 
 
-						[ "Carmine", 	mlib[ "Carmine" ] ],
 
-						[ "Gold", 		mlib[ "Gold" ] ],
 
-						[ "Bronze", 	mlib[ "Bronze" ] ],
 
-						[ "Chrome", 	mlib[ "Chrome" ] ]
 
+							child.material.envMap = textureCube;
 
+							child.material.reflectivity = 0.5;
 
 
-					]
 
-
 
-				};
 
-
 
-				m = CARS[ "f50" ].materials;
 
-				mi = CARS[ "f50" ].init_material;
 
-
 
-				CARS[ "f50" ].mmap = {
 
-
 
-					0:  mlib[ "Dark chrome" ], 		// interior + rim
 
-					1:  mlib[ "Pure chrome" ], 		// wheels + gears chrome
 
-					2:  mlib[ "Blue glass" ], 		// glass
 
-					3:  m.body[ mi ][ 1 ], 			// torso mid + front spoiler
 
-					4:  mlib[ "Darkgray shiny" ], 	// interior + behind seats
 
-					5:  mlib[ "Darkgray shiny" ], 	// tiny dots in interior
 
-					6:  m.body[ mi ][ 1 ], 			// back torso
 
-					7:  m.body[ mi ][ 1 ], 			// right mirror decal
 
-					8:  m.body[ mi ][ 1 ], 			// front decal
 
-					9:  m.body[ mi ][ 1 ], 			// front torso
 
-					10: m.body[ mi ][ 1 ], 			// left mirror decal
 
-					11: mlib[ "Pure chrome" ], 		// engine
 
-					12: mlib[ "Darkgray rough" ],	// tires side
 
-					13: mlib[ "Darkgray rough" ],	// tires bottom
 
-					14: mlib[ "Darkgray shiny" ], 	// bottom
 
-					15: mlib[ "Black rough" ],		// ???
 
-					16: mlib[ "Orange glass" ],		// front signals
 
-					17: mlib[ "Dark chrome" ], 		// wheels center
 
-					18: mlib[ "Red glass" ], 		// back lights
 
-					19: mlib[ "Black rough" ], 		// ???
 
-					20: mlib[ "Red rough" ], 		// seats
 
-					21: mlib[ "Black rough" ], 		// back plate
 
-					22: mlib[ "Black rough" ], 		// front light dots
 
-					23: m.body[ mi ][ 1 ], 			// back torso
 
-					24: m.body[ mi ][ 1 ] 			// back torso center
 
-
 
-				};
 
-
 
-
 
-				// Camero materials
 
-
 
-				CARS[ "camaro" ].materials = {
 
-
 
-					body: [
 
-
 
-						[ "Orange", 	mlib[ "Orange" ] ],
 
-						[ "Blue", 		mlib[ "Blue" ] ],
 
-						[ "Red", 		mlib[ "Red" ] ],
 
-						[ "Black", 		mlib[ "Black" ] ],
 
-						[ "White", 		mlib[ "White" ] ],
 
-
 
-						[ "Orange metal", 	mlib[ "Orange metal" ] ],
 
-						[ "Blue metal", 	mlib[ "Blue metal" ] ],
 
-						[ "Red metal", 		mlib[ "Red metal" ] ],
 
-						[ "Green metal", 	mlib[ "Green metal" ] ],
 
-						[ "Black metal", 	mlib[ "Black metal" ] ],
 
-
 
-						[ "Gold", 		mlib[ "Gold" ] ],
 
-						[ "Bronze", 	mlib[ "Bronze" ] ],
 
-						[ "Chrome", 	mlib[ "Chrome" ] ]
 
-
 
-					]
 
-
 
-				};
 
-
 
-				m = CARS[ "camaro" ].materials;
 
-				mi = CARS[ "camaro" ].init_material;
 
-
 
-				CARS[ "camaro" ].mmap = {
 
+						}
 
 
-					0: m.body[ mi ][ 1 ], 			// car body
 
-					1: mlib[ "Pure chrome" ], 		// wheels chrome
 
-					2: mlib[ "Pure chrome" ], 		// grille chrome
 
-					3: mlib[ "Dark chrome" ], 		// door lines
 
-					4: mlib[ "Light glass" ], 		// windshield
 
-					5: mlib[ "Gray shiny" ],        // interior
 
-					6: mlib[ "Black rough" ],       // tire
 
-					7: mlib[ "Fullblack rough" ],   // tireling
 
-					8: mlib[ "Fullblack rough" ]    // behind grille
 
+					} );
 
 
-				};
 
+					scene.add( object )
 
 
-				loader.load( CARS[ "veyron" ].url, function( geometry ) { createScene( geometry, "veyron" ) } );
 
+				} );
 
 
-				for( var c in CARS ) initCarButton( c );
 
+				renderer = new THREE.WebGLRenderer();
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.shadowMap.enabled = true;
 
+				container.appendChild( renderer.domElement );
 
 
-				//
 
+				effect = new THREE.ParallaxBarrierEffect( renderer );
 
+				effect.setSize( width, height );
 
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
 
+				stats = new Stats();
 
+				container.appendChild( stats.dom );
 
+
 
 			}
 
 
 			function onWindowResize() {
 
@@ -456,126 +144,6 @@
 
 
 			}
 
 
-			function initCarButton( car ) {
 
-
 
-				$( car ).addEventListener( 'click', function() {
 
-
 
-					if ( ! CARS[ car ].object ) {
 
-
 
-						loader.load( CARS[ car ].url, function( geometry ) { createScene( geometry, car ) } );
 
-
 
-					} else {
 
-
 
-						switchCar( car );
 
-
 
-					}
 
-
 
-				}, false );
 
-
 
-			}
 
-
 
-			function $( id ) { return document.getElementById( id ) }
 
-			function button_name( car, index ) { return "m_" + car  + "_" + index }
 
-
 
-			function switchCar( car ) {
 
-
 
-				for ( var c in CARS ) {
 
-
 
-					if ( c != car && CARS[ c ].object ) {
 
-
 
-						CARS[ c ].object.visible = false;
 
-						CARS[ c ].buttons.style.display = "none";
 
-
 
-					}
 
-				}
 
-
 
-				CARS[ car ].object.visible = true;
 
-				CARS[ car ].buttons.style.display = "block";
 
-
 
-				$( "car_name" ).innerHTML = CARS[ car ].name + " model";
 
-				$( "car_author" ).innerHTML = CARS[ car ].author;
 
-
 
-			}
 
-
 
-			function createButtons( materials, car ) {
 
-
 
-				var buttons, i, src = "";
 
-
 
-				for( i = 0; i < materials.length; i++ ) {
 
-
 
-					src += '<button id="' + button_name( car, i ) + '">' + materials[ i ][ 0 ] + '</button> ';
 
-
 
-				}
 
-
 
-				buttons = document.createElement("div");
 
-				buttons.innerHTML = src;
 
-
 
-				$( "buttons_materials" ).appendChild( buttons );
 
-
 
-				return buttons;
 
-
 
-			}
 
-
 
-			function attachButtonMaterials( materials, faceMaterials, material_indices, car ) {
 
-
 
-				for( var i = 0; i < materials.length; i++ ) {
 
-
 
-					$( button_name( car, i ) ).counter = i;
 
-					$( button_name( car, i ) ).addEventListener( 'click', function() {
 
-
 
-						for ( var j = 0; j < material_indices.length; j ++ ) {
 
-
 
-							faceMaterials[ material_indices [ j ] ] = materials[ this.counter ][ 1 ];
 
-
 
-						}
 
-
 
-					}, false );
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function createScene( geometry, car ) {
 
-
 
-				geometry.sortFacesByMaterialIndex();
 
-
 
-				var m = [],
 
-					s = CARS[ car ].scale * 1,
 
-					r = CARS[ car ].init_rotation,
 
-					materials = CARS[ car ].materials,
 
-					mi = CARS[ car ].init_material,
 
-					bm = CARS[ car ].body_materials;
 
-
 
-				for( var i in CARS[ car ].mmap ) {
 
-
 
-					m[ i ] = CARS[ car ].mmap[ i ];
 
-
 
-				}
 
-
 
-				var mesh = new THREE.Mesh( geometry, m );
 
-				mesh.rotation.x = r[ 0 ];
 
-				mesh.rotation.y = r[ 1 ];
 
-				mesh.rotation.z = r[ 2 ];
 
-				mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
 
-				scene.add( mesh );
 
-
 
-				CARS[ car ].object = mesh;
 
-
 
-				CARS[ car ].buttons = createButtons( materials.body, car );
 
-				attachButtonMaterials( materials.body, m, bm, car );
 
-
 
-				switchCar( car );
 
-
 
-			}
 
-
 
-			function onDocumentMouseMove(event) {
 
-
 
-				mouseY = ( event.clientY - window.innerHeight );
 
-
 
-			}
 
-
 
-			//
 
-
 
 			function animate() {
 
 
 				requestAnimationFrame( animate );
 
@@ -586,21 +154,14 @@
 
 
 			function render() {
 
 
-				var timer = -0.0002 * Date.now();
 
-
 
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
-
 
-				camera.position.x = 1000 * Math.cos( timer );
 
-				camera.position.z = 1000 * Math.sin( timer );
 
-
 
-				camera.lookAt( scene.position );
 
-
 
 				effect.render( scene, camera );
 
 
-				if ( STATS_ENABLED ) stats.update();
 
+				stats.update();
 
 
 			}
 
 
+			init();
 
+			animate();
 
 
 		</script>