webgl_helpers.html 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - helpers</title>
  5. <meta charset="utf-8">
  6. <style>
  7. body {
  8. margin: 0px;
  9. background-color: #000000;
  10. overflow: hidden;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <script src="../build/three.min.js"></script>
  16. <script>
  17. var camera, scene, renderer;
  18. var mesh, faceNormalsHelper, vertexNormalsHelper;
  19. init();
  20. animate();
  21. function init() {
  22. renderer = new THREE.WebGLRenderer();
  23. renderer.setSize( window.innerWidth, window.innerHeight );
  24. document.body.appendChild( renderer.domElement );
  25. //
  26. camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
  27. camera.position.z = 400;
  28. scene = new THREE.Scene();
  29. var light = new THREE.PointLight();
  30. light.position.set( 200, 100, 150 );
  31. scene.add( light );
  32. scene.add( new THREE.PointLightHelper( light, 5 ) );
  33. var loader = new THREE.JSONLoader();
  34. loader.load( 'obj/leeperrysmith/LeePerrySmith.js', function ( geometry, materials ) {
  35. var material = new THREE.MeshLambertMaterial();
  36. mesh = new THREE.Mesh( geometry, material );
  37. mesh.scale.multiplyScalar( 50 );
  38. scene.add( mesh );
  39. faceNormalsHelper = new THREE.FaceNormalsHelper( mesh, 10 );
  40. scene.add( faceNormalsHelper );
  41. vertexNormalsHelper = new THREE.VertexNormalsHelper( mesh, 10 );
  42. scene.add( vertexNormalsHelper );
  43. var helper = new THREE.WireframeHelper( mesh );
  44. helper.material.depthTest = false;
  45. helper.material.opacity = 0.25;
  46. helper.material.transparent = true;
  47. scene.add( helper );
  48. scene.add( new THREE.BoxHelper( mesh ) );
  49. } );
  50. //
  51. window.addEventListener( 'resize', onWindowResize, false );
  52. }
  53. function onWindowResize() {
  54. camera.aspect = window.innerWidth / window.innerHeight;
  55. camera.updateProjectionMatrix();
  56. renderer.setSize( window.innerWidth, window.innerHeight );
  57. }
  58. function animate() {
  59. requestAnimationFrame( animate );
  60. if ( mesh !== undefined ) {
  61. mesh.rotation.y += 0.01;
  62. faceNormalsHelper.update();
  63. vertexNormalsHelper.update();
  64. }
  65. renderer.render( scene, camera );
  66. }
  67. </script>
  68. </body>
  69. </html>