geometry-browser.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Three.js Geometry Browser</title>
  6. <style>
  7. @font-face {
  8. font-family: 'inconsolata';
  9. src: url('../files/inconsolata.woff') format('woff');
  10. font-weight: normal;
  11. font-style: normal;
  12. }
  13. body {
  14. margin:0;
  15. font-family: 'inconsolata';
  16. font-size: 15px;
  17. line-height: 18px;
  18. overflow: hidden;
  19. }
  20. canvas { width: 100%; height: 100% }
  21. #newWindow {
  22. display: block;
  23. position: absolute;
  24. bottom: 0.3em;
  25. left: 0.5em;
  26. color: #fff;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <a id='newWindow' href='./geometry-browser.html' target='_blank'>Open in New Window</a>
  32. <script src="../../build/three.min.js"></script>
  33. <script src='../../examples/js/libs/dat.gui.min.js'></script>
  34. <script src="../../examples/js/controls/OrbitControls.js"></script>
  35. <script src='js/geometry.js'></script>
  36. <script>
  37. document.getElementById('newWindow').href += window.location.hash;
  38. var gui = new dat.GUI();
  39. var scene = new THREE.Scene();
  40. var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 50 );
  41. camera.position.z = 30;
  42. var renderer = new THREE.WebGLRenderer({antialias: true});
  43. renderer.setSize( window.innerWidth, window.innerHeight );
  44. document.body.appendChild( renderer.domElement );
  45. var orbit = new THREE.OrbitControls( camera, renderer.domElement );
  46. orbit.noZoom = true;
  47. var ambientLight = new THREE.AmbientLight( 0x000000 );
  48. scene.add( ambientLight );
  49. var lights = [];
  50. lights[0] = new THREE.PointLight( 0xffffff, 1, 0 );
  51. lights[1] = new THREE.PointLight( 0xffffff, 1, 0 );
  52. lights[2] = new THREE.PointLight( 0xffffff, 1, 0 );
  53. lights[0].position.set( 0, 200, 0 );
  54. lights[1].position.set( 100, 200, 100 );
  55. lights[2].position.set( -100, -200, -100 );
  56. scene.add( lights[0] );
  57. scene.add( lights[1] );
  58. scene.add( lights[2] );
  59. var mesh = THREE.SceneUtils.createMultiMaterialObject(
  60. new THREE.Geometry(),
  61. [
  62. new THREE.MeshBasicMaterial({
  63. color: 0xffffff,
  64. side: THREE.DoubleSide,
  65. wireframe: true,
  66. transparent: true,
  67. opacity: 0.5
  68. }),
  69. new THREE.MeshPhongMaterial({
  70. color: 0x156289,
  71. emissive: 0x072534,
  72. side: THREE.DoubleSide,
  73. shading: THREE.FlatShading
  74. })
  75. ]
  76. )
  77. chooseFromHash( mesh );
  78. scene.add( mesh );
  79. var prevFog = false;
  80. var render = function () {
  81. requestAnimationFrame( render );
  82. var time = Date.now() * 0.001;
  83. mesh.rotation.x += 0.005;
  84. mesh.rotation.y += 0.005;
  85. renderer.render( scene, camera );
  86. };
  87. window.addEventListener( 'resize', function () {
  88. camera.aspect = window.innerWidth / window.innerHeight;
  89. camera.updateProjectionMatrix();
  90. renderer.setSize( window.innerWidth, window.innerHeight );
  91. }, false );
  92. render();
  93. </script>
  94. </body>
  95. </html>