webgl_loader_vrml.html 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - loaders - vrml 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. <style>
  9. body {
  10. color: #444;
  11. }
  12. a {
  13. color: #08f;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div id="info">
  19. <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> -
  20. vrml format loader test
  21. <!--model from <a href="http://cs.iupui.edu/~aharris/webDesign/vrml/" target="_blank" rel="noopener">VRML 2.0 Tutorial</a>,-->
  22. </div>
  23. <script type="module">
  24. import * as THREE from '../build/three.module.js';
  25. import Stats from './jsm/libs/stats.module.js';
  26. import { OrbitControls } from './jsm/controls/OrbitControls.js';
  27. import { VRMLLoader } from './jsm/loaders/VRMLLoader.js';
  28. var camera, scene, renderer, stats;
  29. init();
  30. animate();
  31. function init() {
  32. camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
  33. camera.position.z = 6;
  34. scene = new THREE.Scene();
  35. scene.add( camera );
  36. // light
  37. var dirLight = new THREE.DirectionalLight( 0xffffff );
  38. dirLight.position.set( 200, 200, 1000 ).normalize();
  39. camera.add( dirLight );
  40. camera.add( dirLight.target );
  41. var loader = new VRMLLoader();
  42. loader.load( 'models/vrml/house.wrl', function ( object ) {
  43. scene.add( object );
  44. } );
  45. // renderer
  46. renderer = new THREE.WebGLRenderer();
  47. renderer.setPixelRatio( window.devicePixelRatio );
  48. renderer.setSize( window.innerWidth, window.innerHeight );
  49. document.body.appendChild( renderer.domElement );
  50. // controls
  51. var controls = new OrbitControls( camera, renderer.domElement );
  52. //
  53. stats = new Stats();
  54. document.body.appendChild( stats.dom );
  55. //
  56. window.addEventListener( 'resize', onWindowResize, false );
  57. }
  58. function onWindowResize() {
  59. camera.aspect = window.innerWidth / window.innerHeight;
  60. camera.updateProjectionMatrix();
  61. renderer.setSize( window.innerWidth, window.innerHeight );
  62. }
  63. function animate() {
  64. requestAnimationFrame( animate );
  65. renderer.render( scene, camera );
  66. stats.update();
  67. }
  68. </script>
  69. </body>
  70. </html>