webgl_geometry_large_mesh.html 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - geometry - large mesh</title>
  5. <meta charset="utf-8">
  6. <style type="text/css">
  7. body {
  8. background:#000;
  9. color:#fff;
  10. padding:0;
  11. margin:0;
  12. overflow:hidden;
  13. font-family:georgia;
  14. text-align:center;
  15. }
  16. h1 { }
  17. a { color:skyblue }
  18. canvas { pointer-events:none; z-index:10; }
  19. #log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
  20. #d { text-align:center; margin:1em 0 -18em 0; z-index:0; position:relative; display:block }
  21. .button { background:orange; color:#fff; padding:0.2em 0.5em; cursor:pointer }
  22. .inactive { background:#999; color:#eee }
  23. </style>
  24. </head>
  25. <body>
  26. <div id="d">
  27. <h1>Large mesh test</h1>
  28. <span id="rcanvas" class="button inactive">2d canvas renderer</span>
  29. <span id="rwebgl" class="button">WebGL renderer</span>
  30. <br/>
  31. <p>Lucy model from <a href="http://graphics.stanford.edu/data/3Dscanrep/">Stanford 3d scanning repository</a>
  32. (decimated with <a href="http://meshlab.sourceforge.net/">Meshlab</a>).
  33. <p>Please be patient while the mesh is loading. It may take a while, it's 2MB file.
  34. <br/>
  35. <p>Best viewed in Chrome 8/9 or Firefox 4 using WebGL renderer.
  36. <p>Canvas renderer is very slow for this demo and only diffuse material works there.
  37. <p>Use the flag --allow-file-access-from-files if working localy in Chrome.
  38. </div>
  39. <pre id="log"></pre>
  40. <script type="text/javascript" src="../build/Three.js"></script>
  41. <script type="text/javascript" src="../src/extras/io/Loader.js"></script>
  42. <script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
  43. <script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
  44. <script type="text/javascript" src="js/Stats.js"></script>
  45. <script type="text/javascript">
  46. var SCREEN_WIDTH = window.innerWidth;
  47. var SCREEN_HEIGHT = window.innerHeight;
  48. var FLOOR = -250;
  49. var container;
  50. var stats;
  51. var camera;
  52. var scene;
  53. var canvasRenderer, webglRenderer;
  54. var loader;
  55. var mesh, zmesh, lightMesh;
  56. var directionalLight, pointLight;
  57. var mouseX = 0;
  58. var mouseY = 0;
  59. var windowHalfX = window.innerWidth / 2;
  60. var windowHalfY = window.innerHeight / 2;
  61. var render_canvas = 1, render_gl = 1;
  62. var has_gl = 0;
  63. var bcanvas = document.getElementById("rcanvas");
  64. var bwebgl = document.getElementById("rwebgl");
  65. document.addEventListener('mousemove', onDocumentMouseMove, false);
  66. init();
  67. animate();
  68. render_canvas = !has_gl;
  69. bwebgl.style.display = has_gl ? "inline" : "none";
  70. bcanvas.className = render_canvas ? "button" : "button inactive";
  71. function addMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
  72. mesh = new THREE.Mesh( geometry, material );
  73. mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
  74. mesh.position.x = x;
  75. mesh.position.y = y;
  76. mesh.position.z = z;
  77. mesh.rotation.x = rx;
  78. mesh.rotation.y = ry;
  79. mesh.rotation.z = rz;
  80. mesh.overdraw = true;
  81. mesh.updateMatrix();
  82. scene.addObject(mesh);
  83. }
  84. function init() {
  85. container = document.createElement('div');
  86. document.body.appendChild(container);
  87. camera = new THREE.Camera( 50, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
  88. camera.position.z = 1500;
  89. camera.updateMatrix();
  90. scene = new THREE.Scene();
  91. // LIGHTS
  92. var ambient = new THREE.AmbientLight( 0x101010 );
  93. scene.addLight( ambient );
  94. directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
  95. directionalLight.position.x = 1;
  96. directionalLight.position.y = 1;
  97. directionalLight.position.z = 2;
  98. directionalLight.position.normalize();
  99. scene.addLight( directionalLight );
  100. pointLight = new THREE.PointLight( 0xffaa00 );
  101. pointLight.position.x = 0;
  102. pointLight.position.y = 0;
  103. pointLight.position.z = 0;
  104. scene.addLight( pointLight );
  105. // light representation
  106. sphere = new Sphere( 100, 16, 8, 1 );
  107. lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
  108. lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
  109. lightMesh.position = pointLight.position;
  110. lightMesh.overdraw = true;
  111. lightMesh.updateMatrix();
  112. scene.addObject(lightMesh);
  113. if ( render_gl ) {
  114. try {
  115. webglRenderer = new THREE.WebGLRenderer();
  116. webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
  117. webglRenderer.domElement.style.position = "relative";
  118. container.appendChild( webglRenderer.domElement );
  119. has_gl = 1;
  120. }
  121. catch (e) {
  122. }
  123. }
  124. if( render_canvas ) {
  125. canvasRenderer = new THREE.CanvasRenderer();
  126. canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
  127. container.appendChild( canvasRenderer.domElement );
  128. }
  129. stats = new Stats();
  130. stats.domElement.style.position = 'absolute';
  131. stats.domElement.style.top = '0px';
  132. stats.domElement.style.zIndex = 100;
  133. container.appendChild( stats.domElement );
  134. bcanvas.addEventListener("click", toggleCanvas, false);
  135. bwebgl.addEventListener("click", toggleWebGL, false);
  136. loader = new THREE.Loader( true );
  137. document.body.appendChild( loader.statusDomElement );
  138. var s = (new Date).getTime(),
  139. callback = function( geometry ) { createScene( geometry, s ) };
  140. //loader.loadAscii( { model: 'obj/lucy/Lucy100k_slim.js', callback: callback } );
  141. loader.loadBinary( { model: 'obj/lucy/Lucy100k_bin.js', callback: callback } );
  142. }
  143. function createScene( geometry, start ) {
  144. addMesh( geometry, 0.75, 900, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x990000, shininess: 30 } ) );
  145. addMesh( geometry, 0.75, 300, 0, 0, 0,0,0, new THREE.MeshFaceMaterial( ) );
  146. addMesh( geometry, 0.75, -300, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x111111, specular: 0xffaa00, shininess: 10 } ) );
  147. addMesh( geometry, 0.75, -900, 0, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x555555, specular: 0x666666, shininess: 10 } ) );
  148. loader.statusDomElement.style.display = "none";
  149. log( "geometry.vertices: " + geometry.vertices.length );
  150. log( "geometry.faces: " + geometry.faces.length );
  151. log( "model loaded and created in " + ((new Date).getTime() - start) + " ms" );
  152. }
  153. function onDocumentMouseMove(event) {
  154. mouseX = ( event.clientX - windowHalfX );
  155. mouseY = ( event.clientY - windowHalfY );
  156. }
  157. //
  158. function animate() {
  159. requestAnimationFrame( animate );
  160. render();
  161. stats.update();
  162. }
  163. var r = 0;
  164. function render() {
  165. camera.position.x += ( mouseX - camera.position.x ) * .05;
  166. camera.position.y += ( - mouseY - camera.position.y ) * .05;
  167. camera.updateMatrix();
  168. lightMesh.position.x = 700*Math.cos(r);
  169. lightMesh.position.z = 700*Math.sin(r);
  170. lightMesh.updateMatrix();
  171. r += 0.01;
  172. if ( render_canvas ) canvasRenderer.render( scene, camera );
  173. if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
  174. stats.update();
  175. }
  176. function log(text) {
  177. var e = document.getElementById("log");
  178. e.innerHTML = text + "<br/>" + e.innerHTML;
  179. }
  180. function toggleCanvas() {
  181. render_canvas = !render_canvas;
  182. bcanvas.className = render_canvas ? "button" : "button inactive";
  183. render_gl = !render_canvas;
  184. bwebgl.className = render_gl ? "button" : "button inactive";
  185. if( has_gl )
  186. webglRenderer.domElement.style.display = render_gl ? "block" : "none";
  187. canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
  188. }
  189. function toggleWebGL() {
  190. render_gl = !render_gl;
  191. bwebgl.className = render_gl ? "button" : "button inactive";
  192. render_canvas = !render_gl;
  193. bcanvas.className = render_canvas ? "button" : "button inactive";
  194. if( has_gl )
  195. webglRenderer.domElement.style.display = render_gl ? "block" : "none";
  196. canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
  197. }
  198. </script>
  199. </body>
  200. </html>