materials_reflection.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4. <title>three.js - spherical reflection</title>
  5. <meta charset="utf-8">
  6. <style type="text/css">
  7. body {
  8. background-color: #000000;
  9. margin: 0px;
  10. overflow: hidden;
  11. }
  12. #info {
  13. position: absolute;
  14. top: 0px; width: 100%;
  15. color: #ffffff;
  16. padding: 5px;
  17. font-family: Monospace;
  18. font-size: 13px;
  19. text-align: center;
  20. }
  21. a {
  22. color: #ffffff;
  23. }
  24. a:hover {
  25. color: #0080ff;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div id="container"></div>
  31. <div id="info">
  32. <a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - spherical reflection demo.<br />
  33. Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>. Reflection texture by <a href="http://kewlers.scene.org/" target="_blank">Kewlers</a>.
  34. </div>
  35. <script type="text/javascript" src="../build/Three.js"></script>
  36. <script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
  37. <script type="text/javascript" src="obj/WaltHead.js"></script>
  38. <script type="text/javascript">
  39. var camera, scene, renderer,
  40. particle1, particle2, particle2,
  41. light1, light2, light3,
  42. geometry, mesh;
  43. init();
  44. setInterval( loop, 1000 / 60 );
  45. function init() {
  46. var container = document.getElementById( 'container' );
  47. camera = new THREE.Camera( 65, window.innerWidth / window.innerHeight, 1, 1000 );
  48. camera.position.z = 100;
  49. scene = new THREE.Scene();
  50. geometry = new WaltHead();
  51. geometry.computeVertexNormals();
  52. mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { env_map: ImageUtils.loadTexture( 'textures/metal.jpg', new THREE.SphericalReflectionMapping() ) } ) );
  53. mesh.overdraw = true;
  54. scene.addObject( mesh );
  55. renderer = new THREE.CanvasRenderer();
  56. renderer.setSize( window.innerWidth, window.innerHeight );
  57. container.appendChild( renderer.domElement );
  58. }
  59. function loop() {
  60. var time = new Date().getTime() * 0.0005;
  61. mesh.rotation.y -= 0.01;
  62. renderer.render(scene, camera);
  63. }
  64. </script>
  65. </body>
  66. </html>