2
0

webgl_effects_parallaxbarrier.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - effects - parallax barrier</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <style>
  8. body {
  9. background:#000;
  10. color:#fff;
  11. padding:0;
  12. margin:0;
  13. overflow:hidden;
  14. font-family:georgia;
  15. text-align:center;
  16. }
  17. h1 { }
  18. a { color:skyblue; text-decoration:none }
  19. canvas { pointer-events:none; z-index:10; position:relative; }
  20. #d { position:absolute; width: 100%; text-align:center; margin:1em 0 -4.5em 0; z-index:1000; }
  21. .bwrap { margin:0.5em 0 0 0 }
  22. button { font-family:georgia; border:0; background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer; border-radius:3px; }
  23. button:hover { background:#333 }
  24. #buttons_cars button { color:#fa0 }
  25. #car_info { text-align:center; }
  26. #car_name { font-size:1em }
  27. #car_author { font-size:1em }
  28. #oldie { background:rgb(50,0,0) !important; color:#fff !important; margin-top:7em!important }
  29. </style>
  30. </head>
  31. <body>
  32. <div id="d">
  33. <div id="info">
  34. <a href="http://threejs.org" target="_blank">three.js</a> webgl - effects - parallax barrier.
  35. texture by <a href="http://www.humus.name/index.php?page=Textures" target="_blank">Humus</a> :
  36. <span id="car_info">
  37. <span id="car_name">Bugatti Veyron model</span>
  38. by <span id="car_author"><a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank">Troyano</a></span>
  39. </span>
  40. </div>
  41. <div id="buttons_cars" class="bwrap">
  42. <button id="veyron">Bugatti Veyron</button>
  43. <button id="gallardo">Lamborghini Gallardo</button>
  44. <button id="f50">Ferrari F50</button>
  45. <button id="camaro">Chevrolet Camaro</button>
  46. </div>
  47. <div id="buttons_materials" class="bwrap"></div>
  48. </div>
  49. <script src="../build/three.js"></script>
  50. <script src="js/effects/ParallaxBarrierEffect.js"></script>
  51. <script src="js/loaders/BinaryLoader.js"></script>
  52. <script src="js/Detector.js"></script>
  53. <script src="js/libs/stats.min.js"></script>
  54. <script>
  55. if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  56. var STATS_ENABLED = false;
  57. var CARS = {
  58. "veyron": {
  59. name: "Bugatti Veyron",
  60. url: "obj/veyron/VeyronNoUv_bin.js",
  61. author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank">Troyano</a>',
  62. init_rotation: [ 0, 0, 0 ],
  63. scale: 5.5,
  64. init_material: 4,
  65. body_materials: [ 2 ],
  66. object: null,
  67. buttons: null,
  68. materials: null
  69. },
  70. "gallardo": {
  71. name: "Lamborghini Gallardo",
  72. url: "obj/gallardo/GallardoNoUv_bin.js",
  73. author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1711" target="_blank">machman_3d</a>',
  74. init_rotation: [ 0, 0, 0 ],
  75. scale: 3.7,
  76. init_material: 9,
  77. body_materials: [ 3 ],
  78. object: null,
  79. buttons: null,
  80. materials: null
  81. },
  82. "f50": {
  83. name: "Ferrari F50",
  84. url: "obj/f50/F50NoUv_bin.js",
  85. author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1687" target="_blank">daniel sathya</a>',
  86. init_rotation: [ 0, 0, 0 ],
  87. scale: 0.175,
  88. init_material: 2,
  89. body_materials: [ 3, 6, 7, 8, 9, 10, 23, 24 ],
  90. object: null,
  91. buttons: null,
  92. materials: null
  93. },
  94. "camaro": {
  95. name: "Chevrolet Camaro",
  96. url: "obj/camaro/CamaroNoUv_bin.js",
  97. author: '<a href="http://www.turbosquid.com/3d-models/blender-camaro/411348" target="_blank">dskfnwn</a>',
  98. init_rotation: [ 0.0, 0.0, 0.0 ],
  99. scale: 75,
  100. init_material: 0,
  101. body_materials: [ 0 ],
  102. object: null,
  103. buttons: null,
  104. materials: null
  105. }
  106. };
  107. var container, stats;
  108. var camera, scene, renderer, effect;
  109. var m, mi;
  110. var directionalLight, pointLight;
  111. var mouseX = 0, mouseY = 0;
  112. var windowHalfX = window.innerWidth / 2;
  113. var windowHalfY = window.innerHeight / 2;
  114. var loader = new THREE.BinaryLoader();
  115. init();
  116. animate();
  117. function init() {
  118. container = document.createElement( 'div' );
  119. document.body.appendChild( container );
  120. camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
  121. var textureCube = new THREE.CubeTextureLoader()
  122. .setPath( 'textures/cube/Bridge2/')
  123. .load( [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ] );
  124. scene = new THREE.Scene();
  125. scene.background = textureCube;
  126. // LIGHTS
  127. var ambient = new THREE.AmbientLight( 0x050505 );
  128. scene.add( ambient );
  129. directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
  130. directionalLight.position.set( 2, 1.2, 10 ).normalize();
  131. scene.add( directionalLight );
  132. directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
  133. directionalLight.position.set( - 2, 1.2, -10 ).normalize();
  134. scene.add( directionalLight );
  135. pointLight = new THREE.PointLight( 0xffaa00, 2 );
  136. pointLight.position.set( 2000, 1200, 10000 );
  137. scene.add( pointLight );
  138. //
  139. renderer = new THREE.WebGLRenderer( { antialias: false } );
  140. renderer.setFaceCulling( THREE.CullFaceNone );
  141. renderer.setPixelRatio( window.devicePixelRatio );
  142. container.appendChild( renderer.domElement );
  143. var width = window.innerWidth || 2;
  144. var height = window.innerHeight || 2;
  145. effect = new THREE.ParallaxBarrierEffect( renderer );
  146. effect.setSize( width, height );
  147. if ( STATS_ENABLED ) {
  148. stats = new Stats();
  149. container.appendChild( stats.dom );
  150. }
  151. document.addEventListener('mousemove', onDocumentMouseMove, false);
  152. // common materials
  153. var mlib = {
  154. "Orange": new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ),
  155. "Blue": new THREE.MeshLambertMaterial( { color: 0x001133, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ),
  156. "Red": new THREE.MeshLambertMaterial( { color: 0x660000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
  157. "Black": new THREE.MeshLambertMaterial( { color: 0x000000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.15 } ),
  158. "White": new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
  159. "Carmine": new THREE.MeshPhongMaterial( { color: 0x770000, specular:0xffaaaa, envMap: textureCube, combine: THREE.MultiplyOperation } ),
  160. "Gold": new THREE.MeshPhongMaterial( { color: 0xaa9944, specular:0xbbaa99, shininess:50, envMap: textureCube, combine: THREE.MultiplyOperation } ),
  161. "Bronze": new THREE.MeshPhongMaterial( { color: 0x150505, specular:0xee6600, shininess:10, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
  162. "Chrome": new THREE.MeshPhongMaterial( { color: 0xffffff, specular:0xffffff, envMap: textureCube, combine: THREE.MultiplyOperation } ),
  163. "Orange metal": new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: textureCube, combine: THREE.MultiplyOperation } ),
  164. "Blue metal": new THREE.MeshLambertMaterial( { color: 0x001133, envMap: textureCube, combine: THREE.MultiplyOperation } ),
  165. "Red metal": new THREE.MeshLambertMaterial( { color: 0x770000, envMap: textureCube, combine: THREE.MultiplyOperation } ),
  166. "Green metal": new THREE.MeshLambertMaterial( { color: 0x007711, envMap: textureCube, combine: THREE.MultiplyOperation } ),
  167. "Black metal": new THREE.MeshLambertMaterial( { color: 0x222222, envMap: textureCube, combine: THREE.MultiplyOperation } ),
  168. "Pure chrome": new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube } ),
  169. "Dark chrome": new THREE.MeshLambertMaterial( { color: 0x444444, envMap: textureCube } ),
  170. "Darker chrome":new THREE.MeshLambertMaterial( { color: 0x222222, envMap: textureCube } ),
  171. "Black glass": new THREE.MeshLambertMaterial( { color: 0x101016, envMap: textureCube, opacity: 0.975, transparent: true } ),
  172. "Dark glass": new THREE.MeshLambertMaterial( { color: 0x101046, envMap: textureCube, opacity: 0.25, transparent: true } ),
  173. "Blue glass": new THREE.MeshLambertMaterial( { color: 0x668899, envMap: textureCube, opacity: 0.75, transparent: true } ),
  174. "Light glass": new THREE.MeshBasicMaterial( { color: 0x223344, envMap: textureCube, opacity: 0.25, transparent: true, combine: THREE.MixOperation, reflectivity: 0.25 } ),
  175. "Red glass": new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.75, transparent: true } ),
  176. "Yellow glass": new THREE.MeshLambertMaterial( { color: 0xffffaa, opacity: 0.75, transparent: true } ),
  177. "Orange glass": new THREE.MeshLambertMaterial( { color: 0x995500, opacity: 0.75, transparent: true } ),
  178. "Orange glass 50": new THREE.MeshLambertMaterial( { color: 0xffbb00, opacity: 0.5, transparent: true } ),
  179. "Red glass 50": new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } ),
  180. "Fullblack rough": new THREE.MeshLambertMaterial( { color: 0x000000 } ),
  181. "Black rough": new THREE.MeshLambertMaterial( { color: 0x050505 } ),
  182. "Darkgray rough": new THREE.MeshLambertMaterial( { color: 0x090909 } ),
  183. "Red rough": new THREE.MeshLambertMaterial( { color: 0x330500 } ),
  184. "Darkgray shiny": new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x050505 } ),
  185. "Gray shiny": new THREE.MeshPhongMaterial( { color: 0x050505, shininess: 20 } )
  186. };
  187. // Gallardo materials
  188. CARS[ "gallardo" ].materials = {
  189. body: [
  190. [ "Orange", mlib[ "Orange" ] ],
  191. [ "Blue", mlib[ "Blue" ] ],
  192. [ "Red", mlib[ "Red" ] ],
  193. [ "Black", mlib[ "Black" ] ],
  194. [ "White", mlib[ "White" ] ],
  195. [ "Orange metal", mlib[ "Orange metal" ] ],
  196. [ "Blue metal", mlib[ "Blue metal" ] ],
  197. [ "Green metal", mlib[ "Green metal" ] ],
  198. [ "Black metal", mlib[ "Black metal" ] ],
  199. [ "Carmine", mlib[ "Carmine" ] ],
  200. [ "Gold", mlib[ "Gold" ] ],
  201. [ "Bronze", mlib[ "Bronze" ] ],
  202. [ "Chrome", mlib[ "Chrome" ] ]
  203. ]
  204. };
  205. m = CARS[ "gallardo" ].materials;
  206. mi = CARS[ "gallardo" ].init_material;
  207. CARS[ "gallardo" ].mmap = {
  208. 0: mlib[ "Pure chrome" ], // wheels chrome
  209. 1: mlib[ "Black rough" ], // tire
  210. 2: mlib[ "Black glass" ], // windshield
  211. 3: m.body[ mi ][ 1 ], // body
  212. 4: mlib[ "Red glass" ], // back lights
  213. 5: mlib[ "Yellow glass" ], // front lights
  214. 6: mlib[ "Dark chrome" ] // windshield rim
  215. };
  216. // Veyron materials
  217. CARS[ "veyron" ].materials = {
  218. body: [
  219. [ "Orange metal", mlib[ "Orange metal" ] ],
  220. [ "Blue metal", mlib[ "Blue metal" ] ],
  221. [ "Red metal", mlib[ "Red metal" ] ],
  222. [ "Green metal", mlib[ "Green metal" ] ],
  223. [ "Black metal", mlib[ "Black metal" ] ],
  224. [ "Gold", mlib[ "Gold" ] ],
  225. [ "Bronze", mlib[ "Bronze" ] ],
  226. [ "Chrome", mlib[ "Chrome" ] ]
  227. ],
  228. };
  229. m = CARS[ "veyron" ].materials;
  230. mi = CARS[ "veyron" ].init_material;
  231. CARS[ "veyron" ].mmap = {
  232. 0: mlib[ "Black rough" ], // tires + inside
  233. 1: mlib[ "Pure chrome" ], // wheels + extras chrome
  234. 2: m.body[ mi ][ 1 ], // back / top / front torso
  235. 3: mlib[ "Dark glass" ], // glass
  236. 4: mlib[ "Pure chrome" ], // sides torso
  237. 5: mlib[ "Pure chrome" ], // engine
  238. 6: mlib[ "Red glass 50" ], // backlights
  239. 7: mlib[ "Orange glass 50" ] // backsignals
  240. };
  241. // F50 materials
  242. CARS[ "f50" ].materials = {
  243. body: [
  244. [ "Orange", mlib[ "Orange" ] ],
  245. [ "Blue", mlib[ "Blue" ] ],
  246. [ "Red", mlib[ "Red" ] ],
  247. [ "Black", mlib[ "Black" ] ],
  248. [ "White", mlib[ "White" ] ],
  249. [ "Orange metal", mlib[ "Orange metal" ] ],
  250. [ "Blue metal", mlib[ "Blue metal" ] ],
  251. [ "Black metal", mlib[ "Black metal" ] ],
  252. [ "Carmine", mlib[ "Carmine" ] ],
  253. [ "Gold", mlib[ "Gold" ] ],
  254. [ "Bronze", mlib[ "Bronze" ] ],
  255. [ "Chrome", mlib[ "Chrome" ] ]
  256. ],
  257. };
  258. m = CARS[ "f50" ].materials;
  259. mi = CARS[ "f50" ].init_material;
  260. CARS[ "f50" ].mmap = {
  261. 0: mlib[ "Dark chrome" ], // interior + rim
  262. 1: mlib[ "Pure chrome" ], // wheels + gears chrome
  263. 2: mlib[ "Blue glass" ], // glass
  264. 3: m.body[ mi ][ 1 ], // torso mid + front spoiler
  265. 4: mlib[ "Darkgray shiny" ], // interior + behind seats
  266. 5: mlib[ "Darkgray shiny" ], // tiny dots in interior
  267. 6: m.body[ mi ][ 1 ], // back torso
  268. 7: m.body[ mi ][ 1 ], // right mirror decal
  269. 8: m.body[ mi ][ 1 ], // front decal
  270. 9: m.body[ mi ][ 1 ], // front torso
  271. 10: m.body[ mi ][ 1 ], // left mirror decal
  272. 11: mlib[ "Pure chrome" ], // engine
  273. 12: mlib[ "Darkgray rough" ], // tires side
  274. 13: mlib[ "Darkgray rough" ], // tires bottom
  275. 14: mlib[ "Darkgray shiny" ], // bottom
  276. 15: mlib[ "Black rough" ], // ???
  277. 16: mlib[ "Orange glass" ], // front signals
  278. 17: mlib[ "Dark chrome" ], // wheels center
  279. 18: mlib[ "Red glass" ], // back lights
  280. 19: mlib[ "Black rough" ], // ???
  281. 20: mlib[ "Red rough" ], // seats
  282. 21: mlib[ "Black rough" ], // back plate
  283. 22: mlib[ "Black rough" ], // front light dots
  284. 23: m.body[ mi ][ 1 ], // back torso
  285. 24: m.body[ mi ][ 1 ] // back torso center
  286. };
  287. // Camero materials
  288. CARS[ "camaro" ].materials = {
  289. body: [
  290. [ "Orange", mlib[ "Orange" ] ],
  291. [ "Blue", mlib[ "Blue" ] ],
  292. [ "Red", mlib[ "Red" ] ],
  293. [ "Black", mlib[ "Black" ] ],
  294. [ "White", mlib[ "White" ] ],
  295. [ "Orange metal", mlib[ "Orange metal" ] ],
  296. [ "Blue metal", mlib[ "Blue metal" ] ],
  297. [ "Red metal", mlib[ "Red metal" ] ],
  298. [ "Green metal", mlib[ "Green metal" ] ],
  299. [ "Black metal", mlib[ "Black metal" ] ],
  300. [ "Gold", mlib[ "Gold" ] ],
  301. [ "Bronze", mlib[ "Bronze" ] ],
  302. [ "Chrome", mlib[ "Chrome" ] ]
  303. ],
  304. };
  305. m = CARS[ "camaro" ].materials;
  306. mi = CARS[ "camaro" ].init_material;
  307. CARS[ "camaro" ].mmap = {
  308. 0: m.body[ mi ][ 1 ], // car body
  309. 1: mlib[ "Pure chrome" ], // wheels chrome
  310. 2: mlib[ "Pure chrome" ], // grille chrome
  311. 3: mlib[ "Dark chrome" ], // door lines
  312. 4: mlib[ "Light glass" ], // windshield
  313. 5: mlib[ "Gray shiny" ], // interior
  314. 6: mlib[ "Black rough" ], // tire
  315. 7: mlib[ "Fullblack rough" ], // tireling
  316. 8: mlib[ "Fullblack rough" ] // behind grille
  317. };
  318. loader.load( CARS[ "veyron" ].url, function( geometry ) { createScene( geometry, "veyron" ) } );
  319. for( var c in CARS ) initCarButton( c );
  320. //
  321. window.addEventListener( 'resize', onWindowResize, false );
  322. }
  323. function onWindowResize() {
  324. windowHalfX = window.innerWidth / 2;
  325. windowHalfY = window.innerHeight / 2;
  326. camera.aspect = window.innerWidth / window.innerHeight;
  327. camera.updateProjectionMatrix();
  328. effect.setSize( window.innerWidth, window.innerHeight );
  329. }
  330. function initCarButton( car ) {
  331. $( car ).addEventListener( 'click', function() {
  332. if ( ! CARS[ car ].object ) {
  333. loader.load( CARS[ car ].url, function( geometry ) { createScene( geometry, car ) } );
  334. } else {
  335. switchCar( car );
  336. }
  337. }, false );
  338. }
  339. function $( id ) { return document.getElementById( id ) }
  340. function button_name( car, index ) { return "m_" + car + "_" + index }
  341. function switchCar( car ) {
  342. for ( var c in CARS ) {
  343. if ( c != car && CARS[ c ].object ) {
  344. CARS[ c ].object.visible = false;
  345. CARS[ c ].buttons.style.display = "none";
  346. }
  347. }
  348. CARS[ car ].object.visible = true;
  349. CARS[ car ].buttons.style.display = "block";
  350. $( "car_name" ).innerHTML = CARS[ car ].name + " model";
  351. $( "car_author" ).innerHTML = CARS[ car ].author;
  352. }
  353. function createButtons( materials, car ) {
  354. var buttons, i, src = "";
  355. for( i = 0; i < materials.length; i++ ) {
  356. src += '<button id="' + button_name( car, i ) + '">' + materials[ i ][ 0 ] + '</button> ';
  357. }
  358. buttons = document.createElement("div");
  359. buttons.innerHTML = src;
  360. $( "buttons_materials" ).appendChild( buttons );
  361. return buttons;
  362. }
  363. function attachButtonMaterials( materials, faceMaterial, material_indices, car ) {
  364. for( var i = 0; i < materials.length; i++ ) {
  365. $( button_name( car, i ) ).counter = i;
  366. $( button_name( car, i ) ).addEventListener( 'click', function() {
  367. for ( var j = 0; j < material_indices.length; j ++ ) {
  368. faceMaterial.materials[ material_indices [ j ] ] = materials[ this.counter ][ 1 ];
  369. }
  370. }, false );
  371. }
  372. }
  373. function createScene( geometry, car ) {
  374. geometry.sortFacesByMaterialIndex();
  375. var m = new THREE.MultiMaterial(),
  376. s = CARS[ car ].scale * 1,
  377. r = CARS[ car ].init_rotation,
  378. materials = CARS[ car ].materials,
  379. mi = CARS[ car ].init_material,
  380. bm = CARS[ car ].body_materials;
  381. for( var i in CARS[ car ].mmap ) {
  382. m.materials[ i ] = CARS[ car ].mmap[ i ];
  383. }
  384. var mesh = new THREE.Mesh( geometry, m );
  385. mesh.rotation.x = r[ 0 ];
  386. mesh.rotation.y = r[ 1 ];
  387. mesh.rotation.z = r[ 2 ];
  388. mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
  389. scene.add( mesh );
  390. CARS[ car ].object = mesh;
  391. CARS[ car ].buttons = createButtons( materials.body, car );
  392. attachButtonMaterials( materials.body, m, bm, car );
  393. switchCar( car );
  394. }
  395. function onDocumentMouseMove(event) {
  396. mouseY = ( event.clientY - window.innerHeight );
  397. }
  398. //
  399. function animate() {
  400. requestAnimationFrame( animate );
  401. render();
  402. }
  403. function render() {
  404. var timer = -0.0002 * Date.now();
  405. camera.position.y += ( - mouseY - camera.position.y ) * .05;
  406. camera.position.x = 1000 * Math.cos( timer );
  407. camera.position.z = 1000 * Math.sin( timer );
  408. camera.lookAt( scene.position );
  409. effect.render( scene, camera );
  410. if ( STATS_ENABLED ) stats.update();
  411. }
  412. </script>
  413. </body>
  414. </html>