canvas_materials_normal.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4. <title>three.js canvas - normal material</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: #808080;
  16. padding: 5px;
  17. font-family: Monospace;
  18. font-size: 13px;
  19. text-align: center;
  20. }
  21. a {
  22. color: #ffffff;
  23. text-decoration: none;
  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://github.com/mrdoob/three.js" target="_blank">three.js</a> - normal material.<br />
  34. Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
  35. </div>
  36. <script type="text/javascript" src="../build/Three.js"></script>
  37. <script type="text/javascript" src="obj/WaltHead.js"></script>
  38. <script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
  39. <script type="text/javascript">
  40. var camera, scene, renderer,
  41. object;
  42. init();
  43. animate();
  44. function init() {
  45. var container = document.getElementById( 'container' );
  46. camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
  47. camera.position.z = 1000;
  48. scene = new THREE.Scene();
  49. object = new THREE.Mesh( new WaltHead(), new THREE.MeshNormalMaterial() );
  50. object.overdraw = true;
  51. object.scale.x = object.scale.y = object.scale.z = 10;
  52. scene.addObject( object );
  53. renderer = new THREE.CanvasRenderer();
  54. renderer.setSize( window.innerWidth, window.innerHeight );
  55. container.appendChild( renderer.domElement );
  56. }
  57. //
  58. function animate() {
  59. requestAnimationFrame( animate );
  60. render();
  61. }
  62. function render() {
  63. var time = new Date().getTime() * 0.0005;
  64. object.rotation.x -= 0.005;
  65. object.rotation.y -= 0.01;
  66. renderer.render( scene, camera );
  67. }
  68. </script>
  69. </body>
  70. </html>