canvas_materials_reflection.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js canvas - spherical reflection</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-color: #000000;
  10. margin: 0px;
  11. overflow: hidden;
  12. }
  13. #info {
  14. position: absolute;
  15. top: 0px; width: 100%;
  16. color: #ffffff;
  17. padding: 5px;
  18. font-family: Monospace;
  19. font-size: 13px;
  20. text-align: center;
  21. }
  22. a {
  23. color: #ffffff;
  24. }
  25. a:hover {
  26. color: #0080ff;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div id="container"></div>
  32. <div id="info">
  33. <a href="http://threejs.org" target="_blank">three.js</a> - spherical reflection demo.<br />
  34. Walt Disney head by <a href="http://davidoreilly.com/post/18087489343/disneyhead" target="_blank">David OReilly</a>. Reflection texture by <a href="http://kewlers.scene.org/" target="_blank">Kewlers</a>.
  35. </div>
  36. <script src="../build/three.js"></script>
  37. <script src="js/renderers/Projector.js"></script>
  38. <script src="js/renderers/CanvasRenderer.js"></script>
  39. <script>
  40. var camera, scene, renderer,
  41. particle1, particle2, particle2,
  42. light1, light2, light3,
  43. loader, mesh;
  44. init();
  45. animate();
  46. function init() {
  47. var container = document.getElementById( 'container' );
  48. camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
  49. camera.position.set( 0, - 6, 100 );
  50. scene = new THREE.Scene();
  51. loader = new THREE.JSONLoader();
  52. loader.load( 'obj/WaltHeadLo.js', function ( geometry ) {
  53. geometry.computeVertexNormals();
  54. var envMap = new THREE.TextureLoader().load( 'textures/metal.jpg' );
  55. envMap.mapping = THREE.SphericalReflectionMapping;
  56. mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { envMap: envMap, overdraw: 0.5 } ) );
  57. scene.add( mesh );
  58. } );
  59. renderer = new THREE.CanvasRenderer();
  60. renderer.setPixelRatio( window.devicePixelRatio );
  61. renderer.setSize( window.innerWidth, window.innerHeight );
  62. container.appendChild( renderer.domElement );
  63. //
  64. window.addEventListener( 'resize', onWindowResize, false );
  65. }
  66. function onWindowResize() {
  67. camera.aspect = window.innerWidth / window.innerHeight;
  68. camera.updateProjectionMatrix();
  69. renderer.setSize( window.innerWidth, window.innerHeight );
  70. }
  71. //
  72. function animate() {
  73. requestAnimationFrame( animate );
  74. render();
  75. }
  76. function render() {
  77. var time = Date.now() * 0.0005;
  78. if ( mesh ) mesh.rotation.y -= 0.01;
  79. renderer.render( scene, camera );
  80. }
  81. </script>
  82. </body>
  83. </html>