webgl_loader_lwo.html 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - LWO loader</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <link type="text/css" rel="stylesheet" href="main.css">
  8. </head>
  9. <body>
  10. <div id="info">
  11. <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - LWOLoader<br />
  12. Loader for Lightwave LWO V3 file format, by <a href="https://discoverthreejs.com/" target="_blank" rel="noopener">Discover three.js</a>
  13. </div>
  14. <script src="../build/three.js"></script>
  15. <script src="js/loaders/LWOLoader.js"></script>
  16. <script src="js/controls/OrbitControls.js"></script>
  17. <script src="js/WebGL.js"></script>
  18. <script src="js/libs/stats.min.js"></script>
  19. <script>
  20. if ( WEBGL.isWebGLAvailable() === false ) {
  21. document.body.appendChild( WEBGL.getWebGLErrorMessage() );
  22. }
  23. var container, stats, controls;
  24. var camera, scene, renderer;
  25. function init() {
  26. container = document.createElement( 'div' );
  27. document.body.appendChild( container );
  28. camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 200 );
  29. camera.position.set( 5, 4, 20 );
  30. scene = new THREE.Scene();
  31. scene.background = new THREE.Color( 0xa0a0a0 );
  32. var ambientLight = new THREE.HemisphereLight( 0xddeeff, 0x0f0e0d, 2 );
  33. var mainLight = new THREE.DirectionalLight( 0xffffff, 2 );
  34. mainLight.position.set( 10, 10, - 10 );
  35. scene.add( ambientLight, mainLight );
  36. var grid = new THREE.GridHelper( 200, 20, 0x000000, 0x000000 );
  37. grid.material.opacity = 0.2;
  38. grid.material.transparent = true;
  39. scene.add( grid );
  40. var loader = new THREE.LWOLoader();
  41. loader.load( 'models/lwo/StandardMaterials.lwo', function ( lwo ) {
  42. const mesh = lwo.meshes[ 0 ];
  43. mesh.position.set( 3, 6, 0 );
  44. scene.add( mesh );
  45. } );
  46. renderer = new THREE.WebGLRenderer( { antialias: true } );
  47. renderer.setPixelRatio( window.devicePixelRatio );
  48. renderer.setSize( window.innerWidth, window.innerHeight );
  49. renderer.physicallyCorrectLights = true;
  50. renderer.gammaFactor = 2.2;
  51. renderer.gammaOutput = true;
  52. container.appendChild( renderer.domElement );
  53. controls = new THREE.OrbitControls( camera, renderer.domElement );
  54. controls.target.y = 4;
  55. controls.update();
  56. renderer.setAnimationLoop( function () {
  57. stats.begin();
  58. renderer.render( scene, camera );
  59. stats.end();
  60. } );
  61. window.addEventListener( 'resize', onWindowResize, false );
  62. // stats
  63. stats = new Stats();
  64. container.appendChild( stats.dom );
  65. }
  66. function onWindowResize() {
  67. camera.aspect = window.innerWidth / window.innerHeight;
  68. camera.updateProjectionMatrix();
  69. renderer.setSize( window.innerWidth, window.innerHeight );
  70. }
  71. init();
  72. </script>
  73. </body>
  74. </html>