Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Tree: 05b3db4dca
Branches Tags
three.js
/
examples
/
webgl_materials_cubemap_dynamic.html

webgl_materials_cubemap_dynamic.html 38 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134 
  1. <!DOCTYPE HTML>
    2. 

  2. <html lang="en">
    3. 

  3. 	<head>
    4. 

  4. 		<title>three.js webgl - materials - dynamic cube reflection</title>
    5. 

  5. 		<meta charset="utf-8">
    6. 

  6. 		<style>
    7. 

  7. 			body {
    8. 

  8. 				background: #000;
    9. 

  9. 				color: #999;
    10. 

  10. 				padding: 0;
    11. 

  11. 				margin: 0;
    12. 

  12. 				overflow: hidden;
    13. 

  13. 				font-family: georgia;
    14. 

  14. 				font-size:1em;
    15. 

  15. 				text-align: center;
    16. 

  16. 			}
    17. 

  17. 			a { color: white }
    18. 

  18. 

  19. 			#info { margin-top: 2em; }
    20. 

  20. 			#footer { width: 100%; margin: 2em auto; text-align: center; position: absolute; bottom: 0 }
    21. 

  21. 			#loading { color: orange; margin-top: 1em }
    22. 

  22. 

  23. 			.h { color: skyblue }
    24. 

  24. 			.c { display: inline; margin-left: 1em }
    25. 

  25. 		</style>
    26. 

  26. 	</head>
    27. 

  27. 

  28. 	<body>
    29. 

  29. 		<div id="info">
    30. 

  30. 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl dynamic cube reflection demo -
    31. 

  31. 			veyron by <a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank">Troyano</a> -
    32. 

  32. 			gallardo by <a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1711" target="_blank">machman_3d</a>
    33. 

  33. 		</div>
    34. 

  34. 

  35. 		<div id="loading">Loading...</div>
    36. 

  36. 

  37. 		<div id="container"></div>
    38. 

  38. 

  39. 		<div id="footer">
    40. 

  40. 			cars control: <span class="h">WASD</span> / <span class="h">arrows</span>
    41. 

  41. 

  42. 			<div class="c">cameras: <span class="h">1</span> / <span class="h">2</span> / <span class="h">3</span> / <span class="h">4</span>
    43. 

  43. 			/ <span class="h">5</span> / <span class="h">6</span>
    44. 

  44. 			</div>
    45. 

  45. 

  46. 			<div class="c">
    47. 

  47. 			day / night: <span class="h">n</span>
    48. 

  48. 			</div>
    49. 

  49. 

  50. 			<div class="c">
    51. 

  51. 			motion blur: <span class="h">b</span>
    52. 

  52. 			</div>
    53. 

  53. 		</div>
    54. 

  54. <!--
    55. 

  55. 		<script src="../build/Three.js"></script>
    56. 

  56. -->
    57. 

  57. 		<script type="text/javascript" src="../src/Three.js"></script>
    58. 

  58. 		<script type="text/javascript" src="../src/core/Clock.js"></script>
    59. 

  59. 		<script type="text/javascript" src="../src/core/Color.js"></script>
    60. 

  60. 		<script type="text/javascript" src="../src/core/Vector2.js"></script>
    61. 

  61. 		<script type="text/javascript" src="../src/core/Vector3.js"></script>
    62. 

  62. 		<script type="text/javascript" src="../src/core/Vector4.js"></script>
    63. 

  63. 		<script type="text/javascript" src="../src/core/Ray.js"></script>
    64. 

  64. 		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
    65. 

  65. 		<script type="text/javascript" src="../src/core/Math.js"></script>
    66. 

  66. 		<script type="text/javascript" src="../src/core/Matrix3.js"></script>
    67. 

  67. 		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
    68. 

  68. 		<script type="text/javascript" src="../src/core/Object3D.js"></script>
    69. 

  69. 		<script type="text/javascript" src="../src/core/Projector.js"></script>
    70. 

  70. 		<script type="text/javascript" src="../src/core/Quaternion.js"></script>
    71. 

  71. 		<script type="text/javascript" src="../src/core/Vertex.js"></script>
    72. 

  72. 		<script type="text/javascript" src="../src/core/Face3.js"></script>
    73. 

  73. 		<script type="text/javascript" src="../src/core/Face4.js"></script>
    74. 

  74. 		<script type="text/javascript" src="../src/core/UV.js"></script>
    75. 

  75. 		<script type="text/javascript" src="../src/core/Geometry.js"></script>
    76. 

  76. 		<script type="text/javascript" src="../src/core/Spline.js"></script>
    77. 

  77. 		<script type="text/javascript" src="../src/core/Edge.js"></script>
    78. 

  78. 		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
    79. 

  79. 		<script type="text/javascript" src="../src/cameras/OrthographicCamera.js"></script>
    80. 

  80. 		<script type="text/javascript" src="../src/cameras/PerspectiveCamera.js"></script>
    81. 

  81. 		<script type="text/javascript" src="../src/lights/Light.js"></script>
    82. 

  82. 		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
    83. 

  83. 		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
    84. 

  84. 		<script type="text/javascript" src="../src/lights/PointLight.js"></script>
    85. 

  85. 		<script type="text/javascript" src="../src/lights/SpotLight.js"></script>
    86. 

  86. 		<script type="text/javascript" src="../src/materials/Material.js"></script>
    87. 

  87. 		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
    88. 

  88. 		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
    89. 

  89. 		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
    90. 

  90. 		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
    91. 

  91. 		<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
    92. 

  92. 		<script type="text/javascript" src="../src/materials/MeshNormalMaterial.js"></script>
    93. 

  93. 		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
    94. 

  94. 		<script type="text/javascript" src="../src/materials/MeshShaderMaterial.js"></script>
    95. 

  95. 		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
    96. 

  96. 		<script type="text/javascript" src="../src/materials/ParticleCanvasMaterial.js"></script>
    97. 

  97. 		<script type="text/javascript" src="../src/materials/ParticleDOMMaterial.js"></script>
    98. 

  98. 		<script type="text/javascript" src="../src/materials/ShaderMaterial.js"></script>
    99. 

  99. 		<script type="text/javascript" src="../src/textures/Texture.js"></script>
    100. 

  100. 		<script type="text/javascript" src="../src/textures/DataTexture.js"></script>
    101. 

  101. 		<script type="text/javascript" src="../src/objects/Particle.js"></script>
    102. 

  102. 		<script type="text/javascript" src="../src/objects/ParticleSystem.js"></script>
    103. 

  103. 		<script type="text/javascript" src="../src/objects/Line.js"></script>
    104. 

  104. 		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
    105. 

  105. 		<script type="text/javascript" src="../src/objects/Bone.js"></script>
    106. 

  106. 		<script type="text/javascript" src="../src/objects/SkinnedMesh.js"></script>
    107. 

  107. 		<script type="text/javascript" src="../src/objects/MorphAnimMesh.js"></script>
    108. 

  108. 		<script type="text/javascript" src="../src/objects/Ribbon.js"></script>
    109. 

  109. 		<script type="text/javascript" src="../src/objects/LOD.js"></script>
    110. 

  110. 		<script type="text/javascript" src="../src/objects/Sprite.js"></script>
    111. 

  111. 		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
    112. 

  112. 		<script type="text/javascript" src="../src/scenes/Fog.js"></script>
    113. 

  113. 		<script type="text/javascript" src="../src/scenes/FogExp2.js"></script>
    114. 

  114. 		<script type="text/javascript" src="../src/renderers/DOMRenderer.js"></script>
    115. 

  115. 		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
    116. 

  116. 		<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
    117. 

  117. 		<script type="text/javascript" src="../src/renderers/WebGLShaders.js"></script>
    118. 

  118. 		<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
    119. 

  119. 		<script type="text/javascript" src="../src/renderers/WebGLRenderTarget.js"></script>
    120. 

  120. 		<script type="text/javascript" src="../src/renderers/WebGLRenderTargetCube.js"></script>
    121. 

  121. 		<script type="text/javascript" src="../src/renderers/renderables/RenderableVertex.js"></script>
    122. 

  122. 		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
    123. 

  123. 		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
    124. 

  124. 		<script type="text/javascript" src="../src/renderers/renderables/RenderableObject.js"></script>
    125. 

  125. 		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
    126. 

  126. 		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
    127. 

  127. 		<script type="text/javascript" src="../src/extras/ColorUtils.js"></script>
    128. 

  128. 		<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
    129. 

  129. 		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
    130. 

  130. 		<script type="text/javascript" src="../src/extras/SceneUtils.js"></script>
    131. 

  131. 		<script type="text/javascript" src="../src/extras/ShaderUtils.js"></script>
    132. 

  132. 		<script type="text/javascript" src="../src/extras/core/Curve.js"></script>
    133. 

  133. 		<script type="text/javascript" src="../src/extras/core/CurvePath.js"></script>
    134. 

  134. 		<script type="text/javascript" src="../src/extras/core/Path.js"></script>
    135. 

  135. 		<script type="text/javascript" src="../src/extras/core/Shape.js"></script>
    136. 

  136. 		<script type="text/javascript" src="../src/extras/core/TextPath.js"></script>
    137. 

  137. 		<script type="text/javascript" src="../src/extras/animation/AnimationHandler.js"></script>
    138. 

  138. 		<script type="text/javascript" src="../src/extras/animation/Animation.js"></script>
    139. 

  139. 		<script type="text/javascript" src="../src/extras/cameras/CubeCamera.js"></script>
    140. 

  140. 		<script type="text/javascript" src="../src/extras/cameras/FirstPersonCamera.js"></script>
    141. 

  141. 		<script type="text/javascript" src="../src/extras/cameras/PathCamera.js"></script>
    142. 

  142. 		<script type="text/javascript" src="../src/extras/cameras/FlyCamera.js"></script>
    143. 

  143. 		<script type="text/javascript" src="../src/extras/cameras/RollCamera.js"></script>
    144. 

  144. 		<script type="text/javascript" src="../src/extras/cameras/TrackballCamera.js"></script>
    145. 

  145. 		<script type="text/javascript" src="../src/extras/cameras/CombinedCamera.js"></script>
    146. 

  146. 		<script type="text/javascript" src="../src/extras/controls/FirstPersonControls.js"></script>
    147. 

  147. 		<script type="text/javascript" src="../src/extras/controls/PathControls.js"></script>
    148. 

  148. 		<script type="text/javascript" src="../src/extras/controls/FlyControls.js"></script>
    149. 

  149. 		<script type="text/javascript" src="../src/extras/controls/RollControls.js"></script>
    150. 

  150. 		<script type="text/javascript" src="../src/extras/controls/TrackballControls.js"></script>
    151. 

  151. 		<script type="text/javascript" src="../src/extras/geometries/CubeGeometry.js"></script>
    152. 

  152. 		<script type="text/javascript" src="../src/extras/geometries/CylinderGeometry.js"></script>
    153. 

  153. 		<script type="text/javascript" src="../src/extras/geometries/ExtrudeGeometry.js"></script>
    154. 

  154. 		<script type="text/javascript" src="../src/extras/geometries/IcosahedronGeometry.js"></script>
    155. 

  155. 		<script type="text/javascript" src="../src/extras/geometries/LatheGeometry.js"></script>
    156. 

  156. 		<script type="text/javascript" src="../src/extras/geometries/OctahedronGeometry.js"></script>
    157. 

  157. 		<script type="text/javascript" src="../src/extras/geometries/PlaneGeometry.js"></script>
    158. 

  158. 		<script type="text/javascript" src="../src/extras/geometries/SphereGeometry.js"></script>
    159. 

  159. 		<script type="text/javascript" src="../src/extras/geometries/TextGeometry.js"></script>
    160. 

  160. 		<script type="text/javascript" src="../src/extras/geometries/TorusGeometry.js"></script>
    161. 

  161. 		<script type="text/javascript" src="../src/extras/geometries/TorusKnotGeometry.js"></script>
    162. 

  162. 		<script type="text/javascript" src="../src/extras/modifiers/SubdivisionModifier.js"></script>
    163. 

  163. 		<script type="text/javascript" src="../src/extras/loaders/Loader.js"></script>
    164. 

  164. 		<script type="text/javascript" src="../src/extras/loaders/BinaryLoader.js"></script>
    165. 

  165. 		<script type="text/javascript" src="../src/extras/loaders/ColladaLoader.js"></script>
    166. 

  166. 		<script type="text/javascript" src="../src/extras/loaders/JSONLoader.js"></script>
    167. 

  167. 		<script type="text/javascript" src="../src/extras/loaders/SceneLoader.js"></script>
    168. 

  168. 		<script type="text/javascript" src="../src/extras/loaders/UTF8Loader.js"></script>
    169. 

  169. 		<script type="text/javascript" src="../src/extras/objects/Axes.js"></script>
    170. 

  170. 		<script type="text/javascript" src="../src/extras/objects/MarchingCubes.js"></script>
    171. 

  171. 		<script type="text/javascript" src="../src/extras/physics/Collisions.js"></script>
    172. 

  172. 		<script type="text/javascript" src="../src/extras/physics/CollisionUtils.js"></script>
    173. 

  173. 		<script type="text/javascript" src="../src/extras/renderers/AnaglyphWebGLRenderer.js"></script>
    174. 

  174. 		<script type="text/javascript" src="../src/extras/renderers/CrosseyedWebGLRenderer.js"></script>
    175. 

  175. 

  176. 		<script src="js/Detector.js"></script>
    177. 

  177. 		<script src="js/RequestAnimationFrame.js"></script>
    178. 

  178. 		<script src="js/Stats.js"></script>
    179. 

  179. 

  180. 		<script src="js/ShaderExtras.js"></script>
    181. 

  181. 

  182. 		<script src="js/postprocessing/EffectComposer.js"></script>
    183. 

  183. 		<script src="js/postprocessing/RenderPass.js"></script>
    184. 

  184. 		<script src="js/postprocessing/BloomPass.js"></script>
    185. 

  185. 		<script src="js/postprocessing/ShaderPass.js"></script>
    186. 

  186. 		<script src="js/postprocessing/MaskPass.js"></script>
    187. 

  187. 		<script src="js/postprocessing/SavePass.js"></script>
    188. 

  188. 

  189. 		<script src="js/Car.js"></script>
    190. 

  190. 

  191. 		<script>
    192. 

  192. 

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

  194. 

  195. 			var FOLLOW_CAMERA = false;
    196. 

  196. 

  197. 			var MARGIN = 100;
    198. 

  198. 

  199. 			var SCREEN_WIDTH = window.innerWidth;
    200. 

  200. 			var SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
    201. 

  201. 

  202. 			var SHADOW_MAP_WIDTH = 1024, SHADOW_MAP_HEIGHT = 1024;
    203. 

  203. 

  204. 			var CUBE_HEIGHT = 0;
    205. 

  205. 

  206. 			var container, stats;
    207. 

  207. 

  208. 			var camera, cameraTarget, scene, renderer;
    209. 

  209. 			var renderTarget, renderTargetParameters;
    210. 

  210. 

  211. 			var spotLight, ambientLight;
    212. 

  212. 

  213. 			var cubeCamera;
    214. 

  214. 

  215. 			var clock = new THREE.Clock();
    216. 

  216. 

  217. 			var controlsGallardo = {
    218. 

  218. 

  219. 				moveForward: false,
    220. 

  220. 				moveBackward: false,
    221. 

  221. 				moveLeft: false,
    222. 

  222. 				moveRight: false
    223. 

  223. 

  224. 			};
    225. 

  225. 

  226. 			var controlsVeyron = {
    227. 

  227. 

  228. 				moveForward: false,
    229. 

  229. 				moveBackward: false,
    230. 

  230. 				moveLeft: false,
    231. 

  231. 				moveRight: false
    232. 

  232. 

  233. 			};
    234. 

  234. 

  235. 			var mlib;
    236. 

  236. 

  237. 			var gallardo, veyron, currentCar;
    238. 

  238. 

  239. 			var effectDirt, hblur, vblur, effectBloom, effectKeep, effectBlend, effectFXAA;
    240. 

  240. 

  241. 			var config = {
    242. 

  242. 				"veyron"	: { r: 0.5,	 model: null, backCam: new THREE.Vector3( 550, 100, -1000 ) },
    243. 

  243. 				"gallardo"	: { r: 0.35, model: null, backCam: new THREE.Vector3( 550,   0, -1500 ) }
    244. 

  244. 			};
    245. 

  245. 

  246. 			var flareA, flareB;
    247. 

  247. 			var sprites = [];
    248. 

  248. 

  249. 			var ground, groundBasic;
    250. 

  250. 

  251. 			var blur = false;
    252. 

  252. 

  253. 			var v = 0.9, vdir = 1;
    254. 

  254. 

  255. 			init();
    256. 

  256. 			animate();
    257. 

  257. 

  258. 			function init() {
    259. 

  259. 

  260. 				container = document.getElementById( 'container' );
    261. 

  261. 

  262. 				// SCENE CAMERA
    263. 

  263. 

  264. 				camera = new THREE.PerspectiveCamera( 18, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
    265. 

  265. 				camera.position.set( 2000, 0, 2000 );
    266. 

  266. 

  267. 				cameraTarget = new THREE.Vector3( 0, 0, 0 );
    268. 

  268. 

  269. 				// SCENE
    270. 

  270. 

  271. 				scene = new THREE.Scene();
    272. 

  272. 

  273. 				scene.fog = new THREE.Fog( 0xffffff, 3000, 10000 );
    274. 

  274. 				scene.fog.color.setHSV( 0.51, 0.5, 0.9 );
    275. 

  275. 

  276. 				createScene();
    277. 

  277. 

  278. 				// LIGHTS
    279. 

  279. 

  280. 				ambientLight = new THREE.AmbientLight( 0x555555 );
    281. 

  281. 				scene.add( ambientLight );
    282. 

  282. 

  283. 				spotLight = new THREE.SpotLight( 0xffffff );
    284. 

  284. 				spotLight.position.set( 0, 1800, 1500 );
    285. 

  285. 				spotLight.target.position.set( 0, 0, 0 );
    286. 

  286. 				spotLight.castShadow = true;
    287. 

  287. 				scene.add( spotLight );
    288. 

  288. 

  289. 				directionalLight2 = new THREE.PointLight( 0xff9900, 0.25 );
    290. 

  290. 				directionalLight2.position.set( 0.5, -1, 0.5 );
    291. 

  291. 				//directionalLight2.position.normalize();
    292. 

  292. 				//scene.add( directionalLight2 );
    293. 

  293. 

  294. 				// RENDERER
    295. 

  295. 

  296. 				renderer = new THREE.WebGLRenderer( { antialias: false } );
    297. 

  297. 

  298. 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
    299. 

  299. 				renderer.setClearColor( scene.fog.color, 1 );
    300. 

  300. 

  301. 				renderer.domElement.style.position = "absolute";
    302. 

  302. 				renderer.domElement.style.top = MARGIN + "px";
    303. 

  303. 				renderer.domElement.style.left = "0px";
    304. 

  304. 

  305. 				container.appendChild( renderer.domElement );
    306. 

  306. 

  307. 				// SHADOW
    308. 

  308. 

  309. 				renderer.shadowCameraNear = 2;
    310. 

  310. 				renderer.shadowCameraFar = camera.far;
    311. 

  311. 				renderer.shadowCameraFov = 50;
    312. 

  312. 

  313. 				renderer.shadowMapBias = 0.003885;
    314. 

  314. 				renderer.shadowMapDarkness = 0.5;
    315. 

  315. 				renderer.shadowMapWidth = SHADOW_MAP_WIDTH;
    316. 

  316. 				renderer.shadowMapHeight = SHADOW_MAP_HEIGHT;
    317. 

  317. 

  318. 				renderer.shadowMapEnabled = true;
    319. 

  319. 				//renderer.shadowMapSoft = false;
    320. 

  320. 

  321. 				// STATS
    322. 

  322. 

  323. 				stats = new Stats();
    324. 

  324. 				stats.domElement.style.position = 'absolute';
    325. 

  325. 				stats.domElement.style.top = '0px';
    326. 

  326. 				stats.domElement.style.zIndex = 100;
    327. 

  327. 				container.appendChild( stats.domElement );
    328. 

  328. 

  329. 				stats.domElement.children[ 0 ].children[ 0 ].style.color = "#888";
    330. 

  330. 				stats.domElement.children[ 0 ].style.background = "#000";
    331. 

  331. 				stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";
    332. 

  332. 

  333. 				// CUBE CAMERA
    334. 

  334. 

  335. 				cubeCamera = new THREE.CubeCamera( 1, 100000, CUBE_HEIGHT, 128 );
    336. 

  336. 

  337. 				// MATERIALS
    338. 

  338. 

  339. 				var cubeTarget = cubeCamera.renderTarget;
    340. 

  340. 

  341. 				mlib = {
    342. 

  342. 

  343. 					body: [],
    344. 

  344. 

  345. 					"Chrome": 		new THREE.MeshLambertMaterial( { color: 0xffffff, ambient: 0xffffff, envMap: cubeTarget  } ),
    346. 

  346. 					"ChromeN": 		new THREE.MeshLambertMaterial( { color: 0xffffff, ambient: 0xffffff, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.75  } ),
    347. 

  347. 					"Dark chrome": 	new THREE.MeshLambertMaterial( { color: 0x444444, ambient: 0x444444, envMap: cubeTarget } ),
    348. 

  348. 

  349. 					"Black rough":	new THREE.MeshLambertMaterial( { color: 0x050505, ambient: 0x050505 } ),
    350. 

  350. 

  351. 					"Dark glass":	new THREE.MeshLambertMaterial( { color: 0x101020, ambient: 0x101020, envMap: cubeTarget, opacity: 0.5, transparent: true } ),
    352. 

  352. 					"Orange glass":	new THREE.MeshLambertMaterial( { color: 0xffbb00, ambient: 0xffbb00, opacity: 0.5, transparent: true } ),
    353. 

  353. 					"Red glass": 	new THREE.MeshLambertMaterial( { color: 0xff0000, ambient: 0xff0000, opacity: 0.5, transparent: true } ),
    354. 

  354. 

  355. 					"Black metal":	new THREE.MeshLambertMaterial( { color: 0x222222, ambient: 0x222222, envMap: cubeTarget, combine: THREE.MultiplyOperation } ),
    356. 

  356. 					"Orange metal": new THREE.MeshLambertMaterial( { color: 0xff6600, ambient: 0xff6600, envMap: cubeTarget, combine: THREE.MultiplyOperation } )
    357. 

  357. 

  358. 				}
    359. 

  359. 

  360. 				mlib.body.push( [ "Orange", new THREE.MeshLambertMaterial( { color: 0x883300, ambient: 0x883300, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.1 } ) ] );
    361. 

  361. 				mlib.body.push( [ "Blue", 	new THREE.MeshLambertMaterial( { color: 0x113355, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.1 } ) ] );
    362. 

  362. 				mlib.body.push( [ "Red", 	new THREE.MeshLambertMaterial( { color: 0x660000, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.1 } ) ] );
    363. 

  363. 				mlib.body.push( [ "Black", 	new THREE.MeshLambertMaterial( { color: 0x000000, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.2 } ) ] );
    364. 

  364. 				mlib.body.push( [ "White", 	new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.2 } ) ] );
    365. 

  365. 

  366. 				mlib.body.push( [ "Carmine", new THREE.MeshPhongMaterial( { color: 0x770000, specular: 0xffaaaa, envMap: cubeTarget, combine: THREE.MultiplyOperation } ) ] );
    367. 

  367. 				mlib.body.push( [ "Gold", 	 new THREE.MeshPhongMaterial( { color: 0xaa9944, specular: 0xbbaa99, shininess: 50, envMap: cubeTarget, combine: THREE.MultiplyOperation } ) ] );
    368. 

  368. 				mlib.body.push( [ "Bronze",  new THREE.MeshPhongMaterial( { color: 0x150505, specular: 0xee6600, shininess: 10, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.2 } ) ] );
    369. 

  369. 				mlib.body.push( [ "Chrome",  new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, envMap: cubeTarget, combine: THREE.MultiplyOperation } ) ] );
    370. 

  370. 

  371. 				// FLARES
    372. 

  372. 

  373. 				flareA = THREE.ImageUtils.loadTexture( "textures/lensflare2.jpg" );
    374. 

  374. 				flareB = THREE.ImageUtils.loadTexture( "textures/lensflare0.png" );
    375. 

  375. 

  376. 				// CARS - VEYRON
    377. 

  377. 

  378. 				veyron = new THREE.Car();
    379. 

  379. 

  380. 				veyron.modelScale = 3;
    381. 

  381. 				veyron.backWheelOffset = 2;
    382. 

  382. 

  383. 				veyron.callback = function( object ) {
    384. 

  384. 

  385. 					addCar( object, -300, -215, 0, 0 );
    386. 

  386. 					setMaterialsVeyron( object );
    387. 

  387. 

  388. 					var sa = 2, sb = 5;
    389. 

  389. 

  390. 					var params  = {
    391. 

  391. 

  392. 						"a" : { map: flareA, useScreenCoordinates: false, color: 0xffffff, blending: THREE.AdditiveBlending },
    393. 

  393. 						"b" : { map: flareB, useScreenCoordinates: false, color: 0xffffff, blending: THREE.AdditiveBlending },
    394. 

  394. 

  395. 						"ar" : { map: flareA, useScreenCoordinates: false, color: 0xff0000, blending: THREE.AdditiveBlending },
    396. 

  396. 						"br" : { map: flareB, useScreenCoordinates: false, color: 0xff0000, blending: THREE.AdditiveBlending }
    397. 

  397. 

  398. 					};
    399. 

  399. 

  400. 					var flares = [ // front
    401. 

  401. 								   [ "a", sa, [ 47, 38, 120 ] ], [ "a", sa, [ 40, 38, 120 ] ], [ "a", sa, [ 32, 38, 122 ] ],
    402. 

  402. 								   [ "b", sb, [ 47, 38, 120 ] ], [ "b", sb, [ 40, 38, 120 ] ], [ "b", sb, [ 32, 38, 122 ] ],
    403. 

  403. 

  404. 								   [ "a", sa, [ -47, 38, 120 ] ], [ "a", sa, [ -40, 38, 120 ] ], [ "a", sa, [ -32, 38, 122 ] ],
    405. 

  405. 								   [ "b", sb, [ -47, 38, 120 ] ], [ "b", sb, [ -40, 38, 120 ] ], [ "b", sb, [ -32, 38, 122 ] ],
    406. 

  406. 

  407. 								   // back
    408. 

  408. 								   [ "ar", sa, [ 22, 50, -123 ] ], [ "ar", sa, [ 32, 49, -123 ] ],
    409. 

  409. 								   [ "br", sb, [ 22, 50, -123 ] ], [ "br", sb, [ 32, 49, -123 ] ],
    410. 

  410. 

  411. 								   [ "ar", sa, [ -22, 50, -123 ] ], [ "ar", sa, [ -32, 49, -123 ] ],
    412. 

  412. 								   [ "br", sb, [ -22, 50, -123 ] ], [ "br", sb, [ -32, 49, -123 ] ],
    413. 

  413. 

  414. 								 ];
    415. 

  415. 

  416. 					for ( var i = 0; i < flares.length; i ++ ) {
    417. 

  417. 

  418. 						var p = params[ flares[ i ][ 0 ] ];
    419. 

  419. 

  420. 						var s = flares[ i ][ 1 ];
    421. 

  421. 

  422. 						var x = flares[ i ][ 2 ][ 0 ];
    423. 

  423. 						var y = flares[ i ][ 2 ][ 1 ];
    424. 

  424. 						var z = flares[ i ][ 2 ][ 2 ];
    425. 

  425. 

  426. 						var sprite = new THREE.Sprite( p );
    427. 

  427. 

  428. 						sprite.scale.set( s, s, s );
    429. 

  429. 						sprite.position.set( x, y, z );
    430. 

  430. 

  431. 						object.bodyMesh.add( sprite );
    432. 

  432. 

  433. 						sprites.push( sprite );
    434. 

  434. 

  435. 					}
    436. 

  436. 

  437. 					checkStatus();
    438. 

  438. 

  439. 				};
    440. 

  440. 

  441. 				veyron.loadPartsBinary( "obj/veyron/parts/veyron_body_bin.js", "obj/veyron/parts/veyron_wheel_bin.js" );
    442. 

  442. 

  443. 				// CARS - GALLARDO
    444. 

  444. 

  445. 				gallardo = new THREE.Car();
    446. 

  446. 

  447. 				gallardo.modelScale = 2;
    448. 

  448. 				gallardo.backWheelOffset = 45;
    449. 

  449. 

  450. 				gallardo.callback = function( object ) {
    451. 

  451. 

  452. 					addCar( object, 300, -110, 0, -110 );
    453. 

  453. 					setMaterialsGallardo( object );
    454. 

  454. 

  455. 					var sa = 2, sb = 5;
    456. 

  456. 

  457. 					var params  = {
    458. 

  458. 

  459. 						"a" : { map: flareA, useScreenCoordinates: false, color: 0xffffff, blending: THREE.AdditiveBlending },
    460. 

  460. 						"b" : { map: flareB, useScreenCoordinates: false, color: 0xffffff, blending: THREE.AdditiveBlending },
    461. 

  461. 

  462. 						"ar" : { map: flareA, useScreenCoordinates: false, color: 0xff0000, blending: THREE.AdditiveBlending },
    463. 

  463. 						"br" : { map: flareB, useScreenCoordinates: false, color: 0xff0000, blending: THREE.AdditiveBlending }
    464. 

  464. 

  465. 					};
    466. 

  466. 

  467. 					var flares = [ // front
    468. 

  468. 								   [ "a", sa, [ 70, 10, 160 ] ], [ "a", sa, [ 66, -1, 175 ] ], [ "a", sa, [ 66, -1, 165 ] ],
    469. 

  469. 								   [ "b", sb, [ 70, 10, 160 ] ], [ "b", sb, [ 66, -1, 175 ] ], [ "b", sb, [ 66, -1, 165 ] ],
    470. 

  470. 

  471. 								   [ "a", sa, [ -70, 10, 160 ] ], [ "a", sa, [ -66, -1, 175 ] ], [ "a", sa, [ -66, -1, 165 ] ],
    472. 

  472. 								   [ "b", sb, [ -70, 10, 160 ] ], [ "b", sb, [ -66, -1, 175 ] ], [ "b", sb, [ -66, -1, 165 ] ],
    473. 

  473. 

  474. 								   // back
    475. 

  475. 								   [ "ar", sa, [ 61, 19, -185 ] ], [ "ar", sa, [ 55, 19, -185 ] ],
    476. 

  476. 								   [ "br", sb, [ 61, 19, -185 ] ], [ "br", sb, [ 55, 19, -185 ] ],
    477. 

  477. 

  478. 								   [ "ar", sa, [ -61, 19, -185 ] ], [ "ar", sa, [ -55, 19, -185 ] ],
    479. 

  479. 								   [ "br", sb, [ -61, 19, -185 ] ], [ "br", sb, [ -55, 19, -185 ] ],
    480. 

  480. 								 ];
    481. 

  481. 

  482. 

  483. 					for ( var i = 0; i < flares.length; i ++ ) {
    484. 

  484. 

  485. 						var p = params[ flares[ i ][ 0 ] ];
    486. 

  486. 

  487. 						var s = flares[ i ][ 1 ];
    488. 

  488. 

  489. 						var x = flares[ i ][ 2 ][ 0 ];
    490. 

  490. 						var y = flares[ i ][ 2 ][ 1 ];
    491. 

  491. 						var z = flares[ i ][ 2 ][ 2 ];
    492. 

  492. 

  493. 						var sprite = new THREE.Sprite( p );
    494. 

  494. 

  495. 						sprite.scale.set( s, s, s );
    496. 

  496. 						sprite.position.set( x, y, z );
    497. 

  497. 

  498. 						object.bodyMesh.add( sprite );
    499. 

  499. 

  500. 						sprites.push( sprite );
    501. 

  501. 

  502. 					}
    503. 

  503. 

  504. 					checkStatus();
    505. 

  505. 

  506. 				};
    507. 

  507. 

  508. 				gallardo.loadPartsBinary( "obj/gallardo/parts/gallardo_body_bin.js", "obj/gallardo/parts/gallardo_wheel_bin.js" );
    509. 

  509. 

  510. 				//
    511. 

  511. 

  512. 				config[ "gallardo" ].model = gallardo;
    513. 

  513. 				config[ "veyron" ].model = veyron;
    514. 

  514. 

  515. 				currentCar = gallardo;
    516. 

  516. 

  517. 				// EVENTS
    518. 

  518. 

  519. 				document.addEventListener( 'keydown', onKeyDown, false );
    520. 

  520. 				document.addEventListener( 'keyup', onKeyUp, false );
    521. 

  521. 

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

  523. 

  524. 				// POSTPROCESSING
    525. 

  525. 

  526. 				renderer.autoClear = false;
    527. 

  527. 

  528. 				renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBufer: false };
    529. 

  529. 				renderTarget = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, renderTargetParameters );
    530. 

  530. 

  531. 				effectSave = new THREE.SavePass( new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, renderTargetParameters ) );
    532. 

  532. 

  533. 				effectBlend = new THREE.ShaderPass( THREE.ShaderExtras[ "blend" ], "tDiffuse1" );
    534. 

  534. 

  535. 				effectFXAA = new THREE.ShaderPass( THREE.ShaderExtras[ "fxaa" ] );
    536. 

  536. 				var effectVignette = new THREE.ShaderPass( THREE.ShaderExtras[ "vignette" ] );
    537. 

  537. 				var effectBleach = new THREE.ShaderPass( THREE.ShaderExtras[ "bleachbypass" ] );
    538. 

  538. 				effectBloom = new THREE.BloomPass( 0.75 );
    539. 

  539. 

  540. 				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / SCREEN_WIDTH, 1 / SCREEN_HEIGHT );
    541. 

  541. 

  542. 				// tilt shift
    543. 

  543. 

  544. 				hblur = new THREE.ShaderPass( THREE.ShaderExtras[ "horizontalTiltShift" ] );
    545. 

  545. 				vblur = new THREE.ShaderPass( THREE.ShaderExtras[ "verticalTiltShift" ] );
    546. 

  546. 

  547. 				var bluriness = 7;
    548. 

  548. 

  549. 				hblur.uniforms[ 'h' ].value = bluriness / SCREEN_WIDTH;
    550. 

  550. 				vblur.uniforms[ 'v' ].value = bluriness / SCREEN_HEIGHT;
    551. 

  551. 

  552. 				if ( FOLLOW_CAMERA ) {
    553. 

  553. 

  554. 					if ( currentCar == gallardo ) {
    555. 

  555. 

  556. 						hblur.uniforms[ 'r' ].value = vblur.uniforms[ 'r' ].value = rMap[ "gallardo" ];
    557. 

  557. 

  558. 					} else if ( currentCar == veyron ) {
    559. 

  559. 

  560. 						hblur.uniforms[ 'r' ].value = vblur.uniforms[ 'r' ].value = rMap[ "veyron" ];
    561. 

  561. 

  562. 					}
    563. 

  563. 

  564. 				} else {
    565. 

  565. 

  566. 					hblur.uniforms[ 'r' ].value = vblur.uniforms[ 'r' ].value = 0.35;
    567. 

  567. 

  568. 				}
    569. 

  569. 

  570. 				effectVignette.uniforms[ "offset" ].value = 1.05;
    571. 

  571. 				effectVignette.uniforms[ "darkness" ].value = 1.5;
    572. 

  572. 

  573. 				// motion blur
    574. 

  574. 

  575. 				effectBlend.uniforms[ 'tDiffuse2' ].texture = effectSave.renderTarget;
    576. 

  576. 				effectBlend.uniforms[ 'mixRatio' ].value = 0.65;
    577. 

  577. 

  578. 				var renderModel = new THREE.RenderPass( scene, camera );
    579. 

  579. 

  580. 				effectVignette.renderToScreen = true;
    581. 

  581. 

  582. 				composer = new THREE.EffectComposer( renderer, renderTarget );
    583. 

  583. 

  584. 				composer.addPass( renderModel );
    585. 

  585. 

  586. 				composer.addPass( effectFXAA );
    587. 

  587. 

  588. 				composer.addPass( effectBlend );
    589. 

  589. 				composer.addPass( effectSave );
    590. 

  590. 

  591. 				composer.addPass( effectBloom );
    592. 

  592. 				composer.addPass( effectBleach );
    593. 

  593. 

  594. 				composer.addPass( hblur );
    595. 

  595. 				composer.addPass( vblur );
    596. 

  596. 

  597. 				composer.addPass( effectVignette );
    598. 

  598. 

  599. 			}
    600. 

  600. 

  601. 			//
    602. 

  602. 

  603. 			function checkStatus() {
    604. 

  604. 

  605. 				if ( gallardo.loaded && veyron.loaded ) {
    606. 

  606. 

  607. 					document.getElementById( "loading" ).style.display = "none";
    608. 

  608. 

  609. 				}
    610. 

  610. 

  611. 			}
    612. 

  612. 

  613. 			//
    614. 

  614. 

  615. 			function setSpritesOpacity( opacity ) {
    616. 

  616. 

  617. 				for ( var i = 0; i < sprites.length; i ++ ) {
    618. 

  618. 

  619. 					sprites[ i ].opacity = opacity;
    620. 

  620. 

  621. 				}
    622. 

  622. 

  623. 			}
    624. 

  624. 

  625. 			//
    626. 

  626. 

  627. 

  628. 			function createScene() {
    629. 

  629. 

  630. 				// GROUND
    631. 

  631. 

  632. 				var texture = THREE.ImageUtils.loadTexture( "textures/cube/Park3Med/ny.jpg" );
    633. 

  633. 				texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    634. 

  634. 				texture.repeat.set( 50, 50 );
    635. 

  635. 

  636. 				groundBasic = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texture } );
    637. 

  637. 				groundBasic.color.setHSV( 0.1, 0.45, 0.995 );
    638. 

  638. 

  639. 				ground = new THREE.Mesh( new THREE.PlaneGeometry( 50000, 50000 ), groundBasic );
    640. 

  640. 				ground.rotation.x = - Math.PI / 2;
    641. 

  641. 				ground.position.y = - 215;
    642. 

  642. 				scene.add( ground );
    643. 

  643. 

  644. 				ground.castShadow = false;
    645. 

  645. 				ground.receiveShadow = true;
    646. 

  646. 

  647. 				// OBJECTS
    648. 

  648. 

  649. 				var cylinderGeometry = new THREE.CylinderGeometry( 2, 50, 1000, 32 );
    650. 

  650. 				var sphereGeometry = new THREE.SphereGeometry( 100, 32, 16 );
    651. 

  651. 

  652. 				var sy1 = -500 + 38;
    653. 

  653. 				var sy2 = -88;
    654. 

  654. 

  655. 				addObject( cylinderGeometry, 0xff0000, 1500, 250, 0, sy1 );
    656. 

  656. 				addObject( cylinderGeometry, 0xffaa00, -1500, 250, 0, sy1 );
    657. 

  657. 				addObject( cylinderGeometry, 0x00ff00, 0, 250, 1500, sy1 );
    658. 

  658. 				addObject( cylinderGeometry, 0x00ffaa, 0, 250, -1500, sy1 );
    659. 

  659. 

  660. 				addObject( sphereGeometry, 0xff0000, 1500, -125, 200, sy2 );
    661. 

  661. 				addObject( sphereGeometry, 0xffaa00, -1500, -125, 200, sy2 );
    662. 

  662. 				addObject( sphereGeometry, 0x00ff00, 200, -125, 1500, sy2 );
    663. 

  663. 				addObject( sphereGeometry, 0x00ffaa, 200, -125, -1500, sy2 );
    664. 

  664. 

  665. 			}
    666. 

  666. 

  667. 			//
    668. 

  668. 

  669. 			function addObject( geometry, color, x, y, z, sy ) {
    670. 

  670. 

  671. 				var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: color, ambient: color } ) );
    672. 

  672. 				object.position.set( x, y, z );
    673. 

  673. 				scene.add( object );
    674. 

  674. 

  675. 				object.castShadow = true;
    676. 

  676. 				object.receiveShadow = true;
    677. 

  677. 

  678. 				var shadowTexture = THREE.ImageUtils.loadTexture( "textures/shadowAlpha.png" );
    679. 

  679. 

  680. 				var shadowPlane = new THREE.PlaneGeometry( 400, 400 );
    681. 

  681. 				var shadowMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.35, transparent: true,
    682. 

  682. 														  map: shadowTexture,
    683. 

  683. 														  polygonOffset: false, polygonOffsetFactor: -0.5, polygonOffsetUnits: 1 } );
    684. 

  684. 

  685. 				var shadow = new THREE.Mesh( shadowPlane, shadowMaterial );
    686. 

  686. 				shadow.rotation.x = -Math.PI/2;
    687. 

  687. 				shadow.rotation.z = Math.PI/2;
    688. 

  688. 

  689. 				shadow.position.y = sy;
    690. 

  690. 

  691. 				object.add( shadow );
    692. 

  692. 

  693. 			}
    694. 

  694. 

  695. 			//
    696. 

  696. 

  697. 			function generateDropShadowTexture( object, width, height, bluriness ) {
    698. 

  698. 

  699. 				var renderTargetParameters = { minFilter: THREE.LinearMipmapLinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBufer: false };
    700. 

  700. 				var shadowTarget = new THREE.WebGLRenderTarget( width, height, renderTargetParameters );
    701. 

  701. 

  702. 				var shadowMaterial = new THREE.MeshBasicMaterial( { color: 0x000000 } );
    703. 

  703. 				var shadowGeometry = THREE.GeometryUtils.clone( object.geometry );
    704. 

  704. 

  705. 				var shadowObject = new THREE.Mesh( shadowGeometry, shadowMaterial );
    706. 

  706. 

  707. 				var shadowScene = new THREE.Scene();
    708. 

  708. 				shadowScene.add( shadowObject );
    709. 

  709. 

  710. 				shadowObject.geometry.computeBoundingBox();
    711. 

  711. 

  712. 				var bb = shadowObject.geometry.boundingBox;
    713. 

  713. 

  714. 				var margin = 0.15,
    715. 

  715. 

  716. 					width  = bb.z[ 1 ] - bb.z[ 0 ],
    717. 

  717. 					height = bb.x[ 1 ] - bb.x[ 0 ],
    718. 

  718. 					depth  = bb.y[ 1 ] - bb.y[ 0 ],
    719. 

  719. 

  720. 					left   = bb.z[ 0 ] - margin * width,
    721. 

  721. 					right  = bb.z[ 1 ] + margin * width,
    722. 

  722. 

  723. 					top    = bb.x[ 1 ] + margin * height,
    724. 

  724. 					bottom = bb.x[ 0 ] - margin * height,
    725. 

  725. 

  726. 					near = bb.y[ 1 ] + margin * depth,
    727. 

  727. 					far  = bb.y[ 0 ] - margin * depth;
    728. 

  728. 

  729. 				var topCamera = new THREE.OrthographicCamera( left, right, top, bottom, near, far );
    730. 

  730. 				topCamera.position.y = bb.y[ 1 ];
    731. 

  731. 				topCamera.lookAt( shadowScene.position );
    732. 

  732. 

  733. 				var renderShadow = new THREE.RenderPass( shadowScene, topCamera );
    734. 

  734. 

  735. 				var blurShader = THREE.ShaderExtras[ "triangleBlur" ];
    736. 

  736. 				var effectBlurX = new THREE.ShaderPass( blurShader, 'texture' );
    737. 

  737. 				var effectBlurY = new THREE.ShaderPass( blurShader, 'texture' );
    738. 

  738. 

  739. 				renderShadow.clearColor = new THREE.Color( 0x000000 );
    740. 

  740. 				renderShadow.clearAlpha = 0;
    741. 

  741. 

  742. 				var blurAmountX = bluriness / width;
    743. 

  743. 				var blurAmountY = bluriness / height;
    744. 

  744. 

  745. 				effectBlurX.uniforms[ 'delta' ].value = new THREE.Vector2( blurAmountX, 0 );
    746. 

  746. 				effectBlurY.uniforms[ 'delta' ].value = new THREE.Vector2( 0, blurAmountY );
    747. 

  747. 

  748. 				var shadowComposer = new THREE.EffectComposer( renderer, shadowTarget );
    749. 

  749. 

  750. 				shadowComposer.addPass( renderShadow );
    751. 

  751. 				shadowComposer.addPass( effectBlurX );
    752. 

  752. 				shadowComposer.addPass( effectBlurY );
    753. 

  753. 

  754. 				renderer.clear();
    755. 

  755. 				shadowComposer.render( 0.1 );
    756. 

  756. 

  757. 				return shadowTarget;
    758. 

  758. 

  759. 			}
    760. 

  760. 

  761. 

  762. 			//
    763. 

  763. 

  764. 			function addCar( object, x, y, z, s ) {
    765. 

  765. 

  766. 				object.root.position.set( x, y, z );
    767. 

  767. 				scene.add( object.root );
    768. 

  768. 

  769. 				object.enableShadows( true );
    770. 

  770. 

  771. 				if ( FOLLOW_CAMERA && object == currentCar ) {
    772. 

  772. 

  773. 					object.root.add( camera );
    774. 

  774. 

  775. 					camera.position.set( 350, 500, 2200 );
    776. 

  776. 					//camera.position.set( 0, 3000, -500 );
    777. 

  777. 

  778. 					cameraTarget.z = 500;
    779. 

  779. 					cameraTarget.y = 150;
    780. 

  780. 

  781. 					camera.lookAt( cameraTarget );
    782. 

  782. 

  783. 				}
    784. 

  784. 

  785. 				var shadowTexture = generateDropShadowTexture( object.bodyMesh, 64, 32, 15 );
    786. 

  786. 

  787. 				object.bodyMesh.geometry.computeBoundingBox();
    788. 

  788. 				var bb = object.bodyMesh.geometry.boundingBox;
    789. 

  789. 

  790. 				var ss = object.modelScale * 1.0;
    791. 

  791. 				var shadowWidth  = ss * ( bb.z[ 1 ] - bb.z[ 0 ] );
    792. 

  792. 				var shadowHeight = 1.25 * ss * ( bb.x[ 1 ] - bb.x[ 0 ] );
    793. 

  793. 

  794. 				var shadowPlane = new THREE.PlaneGeometry( shadowWidth, shadowHeight );
    795. 

  795. 				var shadowMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff, opacity: 0.5, transparent: true,
    796. 

  796. 														  map: shadowTexture,
    797. 

  797. 														  polygonOffset: false, polygonOffsetFactor: -0.5, polygonOffsetUnits: 1 } );
    798. 

  798. 

  799. 				var shadow = new THREE.Mesh( shadowPlane, shadowMaterial );
    800. 

  800. 				shadow.rotation.x = -Math.PI/2;
    801. 

  801. 				shadow.rotation.z = Math.PI/2;
    802. 

  802. 				shadow.position.y = s + 10;
    803. 

  803. 

  804. 				object.root.add( shadow );
    805. 

  805. 

  806. 			}
    807. 

  807. 

  808. 			//
    809. 

  809. 

  810. 			function setCurrentCar( car, cameraType ) {
    811. 

  811. 

  812. 				var oldCar = currentCar;
    813. 

  813. 

  814. 				currentCar = config[ car ].model;
    815. 

  815. 

  816. 				if ( cameraType == "front" || cameraType == "back" ) {
    817. 

  817. 

  818. 					hblur.uniforms[ 'r' ].value = vblur.uniforms[ 'r' ].value = config[ car ].r;
    819. 

  819. 

  820. 					FOLLOW_CAMERA = true;
    821. 

  821. 

  822. 					oldCar.root.remove( camera );
    823. 

  823. 					currentCar.root.add( camera );
    824. 

  824. 

  825. 					if ( cameraType == "front" ) {
    826. 

  826. 

  827. 						camera.position.set( 350, 500, 2200 );
    828. 

  828. 

  829. 					} else if ( cameraType == "back" ) {
    830. 

  830. 

  831. 						camera.position.copy( config[ car ].backCam );
    832. 

  832. 

  833. 					}
    834. 

  834. 

  835. 					cameraTarget.set( 0, 150, 500 );
    836. 

  836. 

  837. 				} else {
    838. 

  838. 

  839. 					FOLLOW_CAMERA = false;
    840. 

  840. 

  841. 					oldCar.root.remove( camera );
    842. 

  842. 

  843. 					camera.position.set( 2000, 0, 2000 );
    844. 

  844. 					cameraTarget.set( 0, 0, 0 );
    845. 

  845. 

  846. 					spotLight.position.set( 0, 1800, 1500 );
    847. 

  847. 

  848. 					hblur.uniforms[ 'r' ].value = vblur.uniforms[ 'r' ].value = 0.35;
    849. 

  849. 

  850. 				}
    851. 

  851. 

  852. 			}
    853. 

  853. 

  854. 			//
    855. 

  855. 

  856. 			function onWindowResize( event ) {
    857. 

  857. 

  858. 				SCREEN_WIDTH = window.innerWidth;
    859. 

  859. 				SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
    860. 

  860. 

  861. 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
    862. 

  862. 

  863. 				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
    864. 

  864. 				camera.updateProjectionMatrix();
    865. 

  865. 

  866. 				renderTarget = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, renderTargetParameters );
    867. 

  867. 

  868. 				composer.reset( renderTarget );
    869. 

  869. 

  870. 				hblur.uniforms[ 'h' ].value = 10.75 / SCREEN_WIDTH;
    871. 

  871. 				vblur.uniforms[ 'v' ].value = 10.75 / SCREEN_HEIGHT;
    872. 

  872. 

  873. 				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / SCREEN_WIDTH, 1 / SCREEN_HEIGHT );
    874. 

  874. 

  875. 			}
    876. 

  876. 

  877. 			//
    878. 

  878. 

  879. 			function onKeyDown ( event ) {
    880. 

  880. 

  881. 				switch( event.keyCode ) {
    882. 

  882. 

  883. 					case 38: /*up*/	controlsGallardo.moveForward = true; break;
    884. 

  884. 					case 87: /*W*/ 	controlsVeyron.moveForward = true; break;
    885. 

  885. 

  886. 					case 40: /*down*/controlsGallardo.moveBackward = true; break;
    887. 

  887. 					case 83: /*S*/ 	 controlsVeyron.moveBackward = true; break;
    888. 

  888. 

  889. 					case 37: /*left*/controlsGallardo.moveLeft = true; break;
    890. 

  890. 					case 65: /*A*/   controlsVeyron.moveLeft = true; break;
    891. 

  891. 

  892. 					case 39: /*right*/controlsGallardo.moveRight = true; break;
    893. 

  893. 					case 68: /*D*/    controlsVeyron.moveRight = true; break;
    894. 

  894. 

  895. 					case 49: /*1*/	setCurrentCar( "gallardo", "center" ); break;
    896. 

  896. 					case 50: /*2*/	setCurrentCar( "veyron", "center" ); break;
    897. 

  897. 					case 51: /*3*/	setCurrentCar( "gallardo", "front" ); break;
    898. 

  898. 					case 52: /*4*/	setCurrentCar( "veyron", "front" ); break;
    899. 

  899. 					case 53: /*5*/	setCurrentCar( "gallardo", "back" ); break;
    900. 

  900. 					case 54: /*6*/	setCurrentCar( "veyron", "back" ); break;
    901. 

  901. 

  902. 					case 78: /*N*/   vdir *= -1; break;
    903. 

  903. 

  904. 					case 66: /*B*/   blur = !blur; break;
    905. 

  905. 

  906. 				}
    907. 

  907. 

  908. 			};
    909. 

  909. 

  910. 			function onKeyUp ( event ) {
    911. 

  911. 

  912. 				switch( event.keyCode ) {
    913. 

  913. 

  914. 					case 38: /*up*/controlsGallardo.moveForward = false; break;
    915. 

  915. 					case 87: /*W*/ controlsVeyron.moveForward = false; break;
    916. 

  916. 

  917. 					case 40: /*down*/controlsGallardo.moveBackward = false; break;
    918. 

  918. 					case 83: /*S*/ 	 controlsVeyron.moveBackward = false; break;
    919. 

  919. 

  920. 					case 37: /*left*/controlsGallardo.moveLeft = false; break;
    921. 

  921. 					case 65: /*A*/ 	 controlsVeyron.moveLeft = false; break;
    922. 

  922. 

  923. 					case 39: /*right*/controlsGallardo.moveRight = false; break;
    924. 

  924. 					case 68: /*D*/ 	  controlsVeyron.moveRight = false; break;
    925. 

  925. 

  926. 				}
    927. 

  927. 

  928. 			};
    929. 

  929. 

  930. 

  931. 			//
    932. 

  932. 

  933. 			function setMaterialsGallardo( car ) {
    934. 

  934. 

  935. 				// BODY
    936. 

  936. 

  937. 				var materials = car.bodyGeometry.materials;
    938. 

  938. 

  939. 				materials[ 0 ] = mlib.body[ 0 ][ 1 ]; 		// body
    940. 

  940. 				materials[ 1 ] = mlib[ "Dark chrome" ]; 	// front under lights, back
    941. 

  941. 

  942. 				// WHEELS
    943. 

  943. 

  944. 				materials = car.wheelGeometry.materials;
    945. 

  945. 

  946. 				materials[ 0 ] = mlib[ "Chrome" ];			// insides
    947. 

  947. 				materials[ 1 ] = mlib[ "Black rough" ];	// tire
    948. 

  948. 

  949. 			}
    950. 

  950. 

  951. 			function setMaterialsVeyron( car ) {
    952. 

  952. 

  953. 				// 0 - top, front center, back sides
    954. 

  954. 				// 1 - front sides
    955. 

  955. 				// 2 - engine
    956. 

  956. 				// 3 - small chrome things
    957. 

  957. 				// 4 - backlights
    958. 

  958. 				// 5 - back signals
    959. 

  959. 				// 6 - bottom, interior
    960. 

  960. 				// 7 - windshield
    961. 

  961. 

  962. 				// BODY
    963. 

  963. 

  964. 				var materials = car.bodyGeometry.materials;
    965. 

  965. 

  966. 				materials[ 0 ] = mlib[ "Black metal" ];	// top, front center, back sides
    967. 

  967. 				materials[ 1 ] = mlib[ "Chrome" ];			// front sides
    968. 

  968. 				materials[ 2 ] = mlib[ "Chrome" ];			// engine
    969. 

  969. 				materials[ 3 ] = mlib[ "Dark chrome" ];	// small chrome things
    970. 

  970. 				materials[ 4 ] = mlib[ "Red glass" ];		// backlights
    971. 

  971. 				materials[ 5 ] = mlib[ "Orange glass" ];	// back signals
    972. 

  972. 				materials[ 6 ] = mlib[ "Black rough" ];	// bottom, interior
    973. 

  973. 				materials[ 7 ] = mlib[ "Dark glass" ];		// windshield
    974. 

  974. 

  975. 				// WHEELS
    976. 

  976. 

  977. 				materials = car.wheelGeometry.materials;
    978. 

  978. 

  979. 				materials[ 0 ] = mlib[ "Chrome" ];			// insides
    980. 

  980. 				materials[ 1 ] = mlib[ "Black rough" ];	// tire
    981. 

  981. 

  982. 			}
    983. 

  983. 

  984. 			//
    985. 

  985. 

  986. 			function animate() {
    987. 

  987. 

  988. 				requestAnimationFrame( animate );
    989. 

  989. 

  990. 				render();
    991. 

  991. 				stats.update();
    992. 

  992. 

  993. 			}
    994. 

  994. 

  995. 			function render() {
    996. 

  996. 

  997. 				var delta = clock.getDelta();
    998. 

  998. 

  999. 				// day / night
    1000. 

  1000. 

  1001. 				v = THREE.Math.clamp( v + 0.5 * delta * vdir, 0.1, 0.9 );
    1002. 

  1002. 				scene.fog.color.setHSV( 0.51, 0.5, v );
    1003. 

  1003. 

  1004. 				renderer.setClearColor( scene.fog.color, 1 );
    1005. 

  1005. 

  1006. 				var vnorm = ( v - 0.05 ) / ( 0.9 - 0.05 );
    1007. 

  1007. 

  1008. 				if ( vnorm < 0.3 ) {
    1009. 

  1009. 

  1010. 					setSpritesOpacity( 1 - v / 0.3 );
    1011. 

  1011. 

  1012. 				} else {
    1013. 

  1013. 

  1014. 					setSpritesOpacity( 0 );
    1015. 

  1015. 

  1016. 				}
    1017. 

  1017. 

  1018. 				if ( vnorm < 0.4 ) {
    1019. 

  1019. 

  1020. 					if ( veyron.loaded ) {
    1021. 

  1021. 

  1022. 						veyron.bodyGeometry.materials[ 1 ] = mlib[ "ChromeN" ];
    1023. 

  1023. 						veyron.bodyGeometry.materials[ 2 ] = mlib[ "ChromeN" ];
    1024. 

  1024. 

  1025. 						veyron.wheelGeometry.materials[ 0 ] = mlib[ "ChromeN" ];
    1026. 

  1026. 

  1027. 					}
    1028. 

  1028. 

  1029. 					if ( gallardo.loaded ) {
    1030. 

  1030. 

  1031. 						gallardo.wheelGeometry.materials[ 0 ] = mlib[ "ChromeN" ];
    1032. 

  1032. 

  1033. 					}
    1034. 

  1034. 

  1035. 				} else {
    1036. 

  1036. 

  1037. 					if ( veyron.loaded ) {
    1038. 

  1038. 

  1039. 						veyron.bodyGeometry.materials[ 1 ] = mlib[ "Chrome" ];
    1040. 

  1040. 						veyron.bodyGeometry.materials[ 2 ] = mlib[ "Chrome" ];
    1041. 

  1041. 

  1042. 						veyron.wheelGeometry.materials[ 0 ] = mlib[ "Chrome" ];
    1043. 

  1043. 

  1044. 					}
    1045. 

  1045. 

  1046. 					if ( gallardo.loaded ) {
    1047. 

  1047. 

  1048. 						gallardo.wheelGeometry.materials[ 0 ] = mlib[ "Chrome" ];
    1049. 

  1049. 

  1050. 					}
    1051. 

  1051. 

  1052. 				}
    1053. 

  1053. 

  1054. 				effectBloom.screenUniforms[ "opacity" ].value = THREE.Math.mapLinear( vnorm, 0, 1, 1, 0.75 );
    1055. 

  1055. 

  1056. 				ambientLight.color.setHSV( 0, 0, THREE.Math.mapLinear( vnorm, 0, 1, 0.07, 0.33 ) );
    1057. 

  1057. 				groundBasic.color.setHSV( 0.1, 0.45, THREE.Math.mapLinear( vnorm, 0, 1, 0.725, 0.995 ) );
    1058. 

  1058. 

  1059. 				// blur
    1060. 

  1060. 

  1061. 				if ( blur ) {
    1062. 

  1062. 

  1063. 					effectSave.enabled = true;
    1064. 

  1064. 					effectBlend.enabled = true;
    1065. 

  1065. 

  1066. 				} else {
    1067. 

  1067. 

  1068. 					effectSave.enabled = false;
    1069. 

  1069. 					effectBlend.enabled = false;
    1070. 

  1070. 

  1071. 				}
    1072. 

  1072. 

  1073. 				// update car model
    1074. 

  1074. 

  1075. 				veyron.updateCarModel( delta, controlsVeyron );
    1076. 

  1076. 				gallardo.updateCarModel( delta, controlsGallardo );
    1077. 

  1077. 

  1078. 				// update camera
    1079. 

  1079. 

  1080. 				if ( ! FOLLOW_CAMERA ) {
    1081. 

  1081. 

  1082. 					cameraTarget.x = currentCar.root.position.x;
    1083. 

  1083. 					cameraTarget.z = currentCar.root.position.z;
    1084. 

  1084. 

  1085. 				} else {
    1086. 

  1086. 

  1087. 					spotLight.position.x = currentCar.root.position.x - 500;
    1088. 

  1088. 					spotLight.position.z = currentCar.root.position.z - 500;
    1089. 

  1089. 

  1090. 

  1091. 				}
    1092. 

  1092. 

  1093. 				// update shadows
    1094. 

  1094. 

  1095. 				spotLight.target.position.x = currentCar.root.position.x;
    1096. 

  1096. 				spotLight.target.position.z = currentCar.root.position.z;
    1097. 

  1097. 

  1098. 				// render cube map
    1099. 

  1099. 

  1100. 				var updateCubemap = true;
    1101. 

  1101. 

  1102. 				if ( updateCubemap ) {
    1103. 

  1103. 

  1104. 					veyron.setVisible( false );
    1105. 

  1105. 					gallardo.setVisible( false );
    1106. 

  1106. 

  1107. 					cubeCamera.updatePosition( currentCar.root.position );
    1108. 

  1108. 

  1109. 					renderer.autoClear = true;
    1110. 

  1110. 					cubeCamera.updateCubeMap( renderer, scene );
    1111. 

  1111. 

  1112. 					veyron.setVisible( true );
    1113. 

  1113. 					gallardo.setVisible( true );
    1114. 

  1114. 

  1115. 				}
    1116. 

  1116. 

  1117. 				// render scene
    1118. 

  1118. 

  1119. 				renderer.autoClear = false;
    1120. 

  1120. 				renderer.shadowMapEnabled = true;
    1121. 

  1121. 

  1122. 				camera.lookAt( cameraTarget );
    1123. 

  1123. 

  1124. 				renderer.clearTarget( null );
    1125. 

  1125. 				composer.render( 0.1 );
    1126. 

  1126. 

  1127. 				renderer.shadowMapEnabled = false;
    1128. 

  1128. 

  1129. 			}
    1130. 

  1130. 

  1131. 		</script>
    1132. 

  1132. 

  1133. 	</body>
    1134. 

  1134. </html>
    1135.