webgl_materials_cubemap_balls_refraction.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - materials - cube refraction [balls]</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:#777;
  10. padding:0;
  11. margin:0;
  12. font-weight: bold;
  13. overflow:hidden;
  14. }
  15. #info {
  16. position: absolute;
  17. top: 0px; width: 100%;
  18. color: #ffffff;
  19. padding: 5px;
  20. font-family:Monospace;
  21. font-size:13px;
  22. text-align:center;
  23. z-index:1000;
  24. }
  25. a {
  26. color: #ffffff;
  27. }
  28. #oldie a { color:#da0 }
  29. </style>
  30. </head>
  31. <body>
  32. <div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - webgl cube refraction demo. skybox by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a></div>
  33. <script src="../build/three.min.js"></script>
  34. <script src="js/Detector.js"></script>
  35. <script>
  36. if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  37. var container;
  38. var camera, scene, renderer;
  39. var cameraCube, sceneCube;
  40. var mesh, lightMesh, geometry;
  41. var spheres = [];
  42. var directionalLight, pointLight;
  43. var mouseX = 0, mouseY = 0;
  44. var windowHalfX = window.innerWidth / 2;
  45. var windowHalfY = window.innerHeight / 2;
  46. document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  47. init();
  48. animate();
  49. function init() {
  50. container = document.createElement( 'div' );
  51. document.body.appendChild( container );
  52. camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
  53. camera.position.z = 3200;
  54. cameraCube = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
  55. scene = new THREE.Scene();
  56. sceneCube = new THREE.Scene();
  57. var geometry = new THREE.SphereGeometry( 100, 32, 16 );
  58. var path = "textures/cube/skybox/";
  59. var format = '.jpg';
  60. var urls = [
  61. path + 'px' + format, path + 'nx' + format,
  62. path + 'py' + format, path + 'ny' + format,
  63. path + 'pz' + format, path + 'nz' + format
  64. ];
  65. var textureCube = THREE.ImageUtils.loadTextureCube( urls, new THREE.CubeRefractionMapping() );
  66. var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );
  67. for ( var i = 0; i < 500; i ++ ) {
  68. var mesh = new THREE.Mesh( geometry, material );
  69. mesh.position.x = Math.random() * 10000 - 5000;
  70. mesh.position.y = Math.random() * 10000 - 5000;
  71. mesh.position.z = Math.random() * 10000 - 5000;
  72. mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;
  73. scene.add( mesh );
  74. spheres.push( mesh );
  75. }
  76. // Skybox
  77. var shader = THREE.ShaderLib[ "cube" ];
  78. shader.uniforms[ "tCube" ].value = textureCube;
  79. var material = new THREE.ShaderMaterial( {
  80. fragmentShader: shader.fragmentShader,
  81. vertexShader: shader.vertexShader,
  82. uniforms: shader.uniforms,
  83. depthWrite: false,
  84. side: THREE.BackSide
  85. } ),
  86. mesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), material );
  87. sceneCube.add( mesh );
  88. //
  89. renderer = new THREE.WebGLRenderer();
  90. renderer.setSize( window.innerWidth, window.innerHeight );
  91. renderer.autoClear = false;
  92. container.appendChild( renderer.domElement );
  93. //
  94. window.addEventListener( 'resize', onWindowResize, false );
  95. }
  96. function onWindowResize() {
  97. windowHalfX = window.innerWidth / 2,
  98. windowHalfY = window.innerHeight / 2,
  99. camera.aspect = window.innerWidth / window.innerHeight;
  100. camera.updateProjectionMatrix();
  101. cameraCube.aspect = window.innerWidth / window.innerHeight;
  102. cameraCube.updateProjectionMatrix();
  103. renderer.setSize( window.innerWidth, window.innerHeight );
  104. }
  105. function onDocumentMouseMove(event) {
  106. mouseX = ( event.clientX - windowHalfX ) * 10;
  107. mouseY = ( event.clientY - windowHalfY ) * 10;
  108. }
  109. //
  110. function animate() {
  111. requestAnimationFrame( animate );
  112. render();
  113. }
  114. function render() {
  115. var timer = 0.0001 * Date.now();
  116. for ( var i = 0, il = spheres.length; i < il; i ++ ) {
  117. var sphere = spheres[ i ];
  118. sphere.position.x = 5000 * Math.cos( timer + i );
  119. sphere.position.y = 5000 * Math.sin( timer + i * 1.1 );
  120. }
  121. camera.position.x += ( mouseX - camera.position.x ) * .05;
  122. camera.position.y += ( - mouseY - camera.position.y ) * .05;
  123. camera.lookAt( scene.position );
  124. cameraCube.rotation.copy( camera.rotation );
  125. renderer.render( sceneCube, cameraCube );
  126. renderer.render( scene, camera );
  127. }
  128. </script>
  129. </body>
  130. </html>