webgl_loader_vtk.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - loaders - vtk 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="https://threejs.org" target="_blank" rel="noopener">three.js</a> -
  12. vtk formats loader test<br />
  13. Legacy vtk model from <a href="http://www.cc.gatech.edu/projects/large_models/" target="_blank" rel="noopener">The GeorgiaTech Lagre Geometric Model Archive</a>
  14. </div>
  15. <script type="module">
  16. import * as THREE from '../build/three.module.js';
  17. import Stats from './jsm/libs/stats.module.js';
  18. import { TrackballControls } from './jsm/controls/TrackballControls.js';
  19. import { VTKLoader } from './jsm/loaders/VTKLoader.js';
  20. var container, stats;
  21. var camera, controls, scene, renderer;
  22. init();
  23. animate();
  24. function init() {
  25. camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
  26. camera.position.z = 0.2;
  27. scene = new THREE.Scene();
  28. scene.add( camera );
  29. // light
  30. var dirLight = new THREE.DirectionalLight( 0xffffff );
  31. dirLight.position.set( 200, 200, 1000 ).normalize();
  32. camera.add( dirLight );
  33. camera.add( dirLight.target );
  34. var material = new THREE.MeshLambertMaterial( { color: 0xffffff, side: THREE.DoubleSide } );
  35. var loader = new VTKLoader();
  36. loader.load( "models/vtk/bunny.vtk", function ( geometry ) {
  37. geometry.center();
  38. geometry.computeVertexNormals();
  39. var mesh = new THREE.Mesh( geometry, material );
  40. mesh.position.set( - 0.075, 0.005, 0 );
  41. mesh.scale.multiplyScalar( 0.2 );
  42. scene.add( mesh );
  43. } );
  44. var loader1 = new VTKLoader();
  45. loader1.load( 'models/vtk/cube_ascii.vtp', function ( geometry ) {
  46. geometry.computeVertexNormals();
  47. geometry.center();
  48. var material = new THREE.MeshLambertMaterial( { color: 0x00ff00, side: THREE.DoubleSide } );
  49. var mesh = new THREE.Mesh( geometry, material );
  50. mesh.position.set( - 0.025, 0, 0 );
  51. mesh.scale.multiplyScalar( 0.01 );
  52. scene.add( mesh );
  53. } );
  54. var loader2 = new VTKLoader();
  55. loader2.load( 'models/vtk/cube_binary.vtp', function ( geometry ) {
  56. geometry.computeVertexNormals();
  57. geometry.center();
  58. var material = new THREE.MeshLambertMaterial( { color: 0x0000ff, side: THREE.DoubleSide } );
  59. var mesh = new THREE.Mesh( geometry, material );
  60. mesh.position.set( 0.025, 0, 0 );
  61. mesh.scale.multiplyScalar( 0.01 );
  62. scene.add( mesh );
  63. } );
  64. var loader3 = new VTKLoader();
  65. loader3.load( 'models/vtk/cube_no_compression.vtp', function ( geometry ) {
  66. geometry.computeVertexNormals();
  67. geometry.center();
  68. var material = new THREE.MeshLambertMaterial( { color: 0xff0000, side: THREE.DoubleSide } );
  69. var mesh = new THREE.Mesh( geometry, material );
  70. mesh.position.set( 0.075, 0, 0 );
  71. mesh.scale.multiplyScalar( 0.01 );
  72. scene.add( mesh );
  73. } );
  74. // renderer
  75. renderer = new THREE.WebGLRenderer();
  76. renderer.setPixelRatio( window.devicePixelRatio );
  77. renderer.setSize( window.innerWidth, window.innerHeight );
  78. container = document.createElement( 'div' );
  79. document.body.appendChild( container );
  80. container.appendChild( renderer.domElement );
  81. // controls
  82. controls = new TrackballControls( camera, renderer.domElement );
  83. controls.rotateSpeed = 5.0;
  84. controls.zoomSpeed = 5;
  85. controls.panSpeed = 2;
  86. controls.staticMoving = true;
  87. stats = new Stats();
  88. container.appendChild( stats.dom );
  89. //
  90. window.addEventListener( 'resize', onWindowResize, false );
  91. }
  92. function onWindowResize() {
  93. camera.aspect = window.innerWidth / window.innerHeight;
  94. camera.updateProjectionMatrix();
  95. renderer.setSize( window.innerWidth, window.innerHeight );
  96. controls.handleResize();
  97. }
  98. function animate() {
  99. requestAnimationFrame( animate );
  100. controls.update();
  101. renderer.render( scene, camera );
  102. stats.update();
  103. }
  104. </script>
  105. </body>
  106. </html>