pntsExample.js 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. import { PNTSLoader } from '../src/index.js';
  2. import {
  3. Scene,
  4. DirectionalLight,
  5. AmbientLight,
  6. WebGLRenderer,
  7. PerspectiveCamera,
  8. sRGBEncoding,
  9. PCFSoftShadowMap,
  10. } from 'three';
  11. import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
  12. let camera, controls, scene, renderer;
  13. let dirLight;
  14. init();
  15. animate();
  16. function init() {
  17. scene = new Scene();
  18. // primary camera view
  19. renderer = new WebGLRenderer( { antialias: true } );
  20. renderer.setPixelRatio( window.devicePixelRatio );
  21. renderer.setSize( window.innerWidth, window.innerHeight );
  22. renderer.setClearColor( 0x151c1f );
  23. renderer.shadowMap.enabled = true;
  24. renderer.shadowMap.type = PCFSoftShadowMap;
  25. renderer.outputEncoding = sRGBEncoding;
  26. document.body.appendChild( renderer.domElement );
  27. camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 4000 );
  28. camera.position.set( 2, 2, 2 );
  29. // controls
  30. controls = new OrbitControls( camera, renderer.domElement );
  31. controls.screenSpacePanning = false;
  32. controls.minDistance = 1;
  33. controls.maxDistance = 2000;
  34. // lights
  35. dirLight = new DirectionalLight( 0xffffff, 1.25 );
  36. dirLight.position.set( 1, 2, 3 ).multiplyScalar( 40 );
  37. dirLight.castShadow = true;
  38. dirLight.shadow.bias = - 0.01;
  39. dirLight.shadow.mapSize.setScalar( 2048 );
  40. const shadowCam = dirLight.shadow.camera;
  41. shadowCam.left = - 200;
  42. shadowCam.bottom = - 200;
  43. shadowCam.right = 200;
  44. shadowCam.top = 200;
  45. shadowCam.updateProjectionMatrix();
  46. scene.add( dirLight );
  47. const ambLight = new AmbientLight( 0xffffff, 0.05 );
  48. scene.add( ambLight );
  49. new PNTSLoader()
  50. .load( 'https://raw.githubusercontent.com/CesiumGS/3d-tiles-samples/main/1.0/TilesetWithRequestVolume/points.pnts' )
  51. .then( res => {
  52. console.log( res );
  53. scene.add( res.scene );
  54. } );
  55. onWindowResize();
  56. window.addEventListener( 'resize', onWindowResize, false );
  57. }
  58. function onWindowResize() {
  59. camera.aspect = window.innerWidth / window.innerHeight;
  60. renderer.setPixelRatio( window.devicePixelRatio );
  61. renderer.setSize( window.innerWidth, window.innerHeight );
  62. camera.updateProjectionMatrix();
  63. }
  64. function animate() {
  65. requestAnimationFrame( animate );
  66. render();
  67. }
  68. function render() {
  69. renderer.render( scene, camera );
  70. }