geometry-browser.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  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.setPixelRatio( window.devicePixelRatio );
  44. renderer.setSize( window.innerWidth, window.innerHeight );
  45. document.body.appendChild( renderer.domElement );
  46. var orbit = new THREE.OrbitControls( camera, renderer.domElement );
  47. orbit.enableZoom = false;
  48. var ambientLight = new THREE.AmbientLight( 0x000000 );
  49. scene.add( ambientLight );
  50. var lights = [];
  51. lights[0] = new THREE.PointLight( 0xffffff, 1, 0 );
  52. lights[1] = new THREE.PointLight( 0xffffff, 1, 0 );
  53. lights[2] = new THREE.PointLight( 0xffffff, 1, 0 );
  54. lights[0].position.set( 0, 200, 0 );
  55. lights[1].position.set( 100, 200, 100 );
  56. lights[2].position.set( -100, -200, -100 );
  57. scene.add( lights[0] );
  58. scene.add( lights[1] );
  59. scene.add( lights[2] );
  60. var mesh = new THREE.Object3D()
  61. mesh.add( new THREE.LineSegments(
  62. new THREE.Geometry(),
  63. new THREE.LineBasicMaterial({
  64. color: 0xffffff,
  65. transparent: true,
  66. opacity: 0.5
  67. })
  68. ));
  69. mesh.add( new THREE.Mesh(
  70. new THREE.Geometry(),
  71. new THREE.MeshPhongMaterial({
  72. color: 0x156289,
  73. emissive: 0x072534,
  74. side: THREE.DoubleSide,
  75. shading: THREE.FlatShading
  76. })
  77. ));
  78. var options = chooseFromHash( mesh );
  79. scene.add( mesh );
  80. var prevFog = false;
  81. var render = function () {
  82. requestAnimationFrame( render );
  83. var time = Date.now() * 0.001;
  84. if( !options.fixed ) {
  85. mesh.rotation.x += 0.005;
  86. mesh.rotation.y += 0.005;
  87. }
  88. renderer.render( scene, camera );
  89. };
  90. window.addEventListener( 'resize', function () {
  91. camera.aspect = window.innerWidth / window.innerHeight;
  92. camera.updateProjectionMatrix();
  93. renderer.setSize( window.innerWidth, window.innerHeight );
  94. }, false );
  95. render();
  96. </script>
  97. </body>
  98. </html>