index.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. import { ThreeTilesRenderer } from '../src/index.js';
  2. import {
  3. Scene,
  4. DirectionalLight,
  5. AmbientLight,
  6. WebGLRenderer,
  7. PerspectiveCamera,
  8. CameraHelper,
  9. Box3,
  10. Raycaster,
  11. Vector2,
  12. Mesh,
  13. CylinderBufferGeometry,
  14. MeshBasicMaterial,
  15. Group,
  16. TorusBufferGeometry
  17. } from 'three';
  18. import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
  19. import * as dat from 'three/examples/jsm/libs/dat.gui.module.js';
  20. import Stats from 'three/examples/jsm/libs/stats.module.js';
  21. let camera, controls, scene, renderer, tiles, cameraHelper;
  22. let thirdPersonCamera, thirdPersonRenderer, thirdPersonControls;
  23. let box;
  24. let raycaster, mouse, rayIntersect;
  25. let offsetParent;
  26. let statsContainer, stats;
  27. let params = {
  28. 'errorTarget': 6,
  29. 'errorThreshold': 60,
  30. 'maxDepth': 15,
  31. 'loadSiblings': true,
  32. 'up': '+Y',
  33. 'displayBounds': false,
  34. 'showThirdPerson': true,
  35. 'reload': reinstantiateTiles,
  36. };
  37. init();
  38. animate();
  39. function reinstantiateTiles() {
  40. const url = window.location.hash.replace( /^#/, '' ) || './SampleTileset/tileset.json';
  41. if ( tiles ) {
  42. offsetParent.remove( tiles.group );
  43. }
  44. tiles = new ThreeTilesRenderer( url, camera, renderer );
  45. offsetParent.add( tiles.group );
  46. }
  47. function init() {
  48. // Third person camera view
  49. thirdPersonCamera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 3000 );
  50. thirdPersonCamera.position.set( 50, 40, 40 );
  51. thirdPersonCamera.lookAt( 0, 0, 0 );
  52. thirdPersonRenderer = new WebGLRenderer( { antialias: true } );
  53. thirdPersonRenderer.setPixelRatio( window.devicePixelRatio );
  54. thirdPersonRenderer.setSize( window.innerWidth, window.innerHeight );
  55. thirdPersonRenderer.setClearColor( 0x0f1416 );
  56. document.body.appendChild( thirdPersonRenderer.domElement );
  57. thirdPersonRenderer.domElement.style.position = 'fixed';
  58. thirdPersonRenderer.domElement.style.left = '5px';
  59. thirdPersonRenderer.domElement.style.bottom = '5px';
  60. thirdPersonControls = new OrbitControls( thirdPersonCamera, thirdPersonRenderer.domElement );
  61. thirdPersonControls.screenSpacePanning = false;
  62. thirdPersonControls.minDistance = 1;
  63. thirdPersonControls.maxDistance = 2000;
  64. // primary camera view
  65. scene = new Scene();
  66. renderer = new WebGLRenderer( { antialias: true } );
  67. renderer.setPixelRatio( window.devicePixelRatio );
  68. renderer.setSize( window.innerWidth, window.innerHeight );
  69. renderer.setClearColor( 0x151c1f );
  70. renderer.gammaInput = true;
  71. renderer.gameOutput = true;
  72. document.body.appendChild( renderer.domElement );
  73. camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
  74. camera.position.set( 100, 100, 100 );
  75. cameraHelper = new CameraHelper( camera );
  76. scene.add( cameraHelper );
  77. // controls
  78. controls = new OrbitControls( camera, renderer.domElement );
  79. controls.screenSpacePanning = false;
  80. controls.minDistance = 1;
  81. controls.maxDistance = 2000;
  82. // lights
  83. var dirLight = new DirectionalLight( 0xffffff );
  84. dirLight.position.set( 1, 1, 1 );
  85. scene.add( dirLight );
  86. var ambLight = new AmbientLight( 0x222222 );
  87. scene.add( ambLight );
  88. box = new Box3();
  89. offsetParent = new Group();
  90. scene.add( offsetParent );
  91. // Raycasting init
  92. raycaster = new Raycaster();
  93. mouse = new Vector2();
  94. rayIntersect = new Group();
  95. const rayIntersectMat = new MeshBasicMaterial( { color: 0xe91e63 } );
  96. const rayMesh = new Mesh( new CylinderBufferGeometry( 0.25, 0.25, 10 ), rayIntersectMat );
  97. rayMesh.rotation.x = Math.PI / 2;
  98. rayMesh.position.z += 5;
  99. rayIntersect.add( rayMesh );
  100. const rayRing = new Mesh( new TorusBufferGeometry( 1.5, 0.2, 16, 100 ), rayIntersectMat );
  101. rayIntersect.add( rayRing );
  102. scene.add( rayIntersect );
  103. reinstantiateTiles();
  104. onWindowResize();
  105. window.addEventListener( 'resize', onWindowResize, false );
  106. window.addEventListener( 'mousemove', onMouseMove, false );
  107. // GUI
  108. const gui = new dat.GUI();
  109. const tiles = gui.addFolder( 'Tiles Options' );
  110. tiles.add( params, 'loadSiblings' );
  111. tiles.add( params, 'errorTarget' ).min( 0 ).max( 50 );
  112. tiles.add( params, 'errorThreshold' ).min( 0 ).max( 1000 );
  113. tiles.add( params, 'maxDepth' ).min( 1 ).max( 100 );
  114. tiles.add( params, 'up', [ '+Y', '-Z' ] );
  115. tiles.open();
  116. gui.add( params, 'displayBounds' );
  117. gui.add( params, 'showThirdPerson' );
  118. gui.add( params, 'reload' );
  119. gui.open();
  120. statsContainer = document.createElement( 'div' );
  121. statsContainer.style.position = 'absolute';
  122. statsContainer.style.top = 0;
  123. statsContainer.style.left = 0;
  124. statsContainer.style.color = 'white';
  125. statsContainer.style.width = '100%';
  126. statsContainer.style.textAlign = 'center';
  127. statsContainer.style.padding = '10px';
  128. document.body.appendChild( statsContainer );
  129. // Stats
  130. stats = new Stats();
  131. stats.showPanel( 0 );
  132. document.body.appendChild( stats.dom );
  133. }
  134. function onWindowResize() {
  135. thirdPersonCamera.aspect = window.innerWidth / window.innerHeight;
  136. thirdPersonCamera.updateProjectionMatrix();
  137. thirdPersonRenderer.setSize( Math.floor( window.innerWidth / 3 ), Math.floor( window.innerHeight / 3 ) );
  138. camera.aspect = window.innerWidth / window.innerHeight;
  139. camera.updateProjectionMatrix();
  140. renderer.setSize( window.innerWidth, window.innerHeight );
  141. }
  142. function onMouseMove( e ) {
  143. mouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
  144. mouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;
  145. raycaster.setFromCamera( mouse, camera );
  146. const results = raycaster.intersectObject( tiles.group, true );
  147. if ( results.length ) {
  148. const closestHit = results[ 0 ];
  149. const point = closestHit.point;
  150. const normal = closestHit.face.normal;
  151. rayIntersect.position.copy( point );
  152. rayIntersect.lookAt(
  153. point.x + normal.x,
  154. point.y + normal.y,
  155. point.z + normal.z
  156. );
  157. }
  158. }
  159. function animate() {
  160. // update options
  161. tiles.errorTarget = params.errorTarget;
  162. tiles.errorThreshold = params.errorThreshold;
  163. tiles.loadSiblings = params.loadSiblings;
  164. tiles.maxDepth = params.maxDepth;
  165. tiles.displayBounds = params.displayBounds;
  166. // update tiles
  167. tiles.update();
  168. window.tiles = tiles;
  169. offsetParent.rotation.set( 0, 0, 0 );
  170. if ( params.up === '-Z' ) {
  171. offsetParent.rotation.x = Math.PI / 2;
  172. }
  173. // update tiles center
  174. if ( tiles.getBounds( box ) ) {
  175. box.getCenter( tiles.group.position );
  176. tiles.group.position.multiplyScalar( - 1 );
  177. }
  178. stats.begin();
  179. render();
  180. stats.end();
  181. requestAnimationFrame( animate );
  182. }
  183. function render() {
  184. // render primary view
  185. cameraHelper.visible = false;
  186. renderer.render( scene, camera );
  187. // render third person view
  188. thirdPersonRenderer.domElement.style.visibility = params.showThirdPerson ? 'visible' : 'hidden';
  189. if ( params.showThirdPerson ) {
  190. cameraHelper.visible = true;
  191. thirdPersonRenderer.render( scene, thirdPersonCamera );
  192. }
  193. statsContainer.innerText =
  194. `Downloading: ${tiles.stats.downloading} Parsing: ${tiles.stats.parsing} Visible: ${tiles.group.children.length}`;
  195. }