Update the es-module example (#168)

Author: Avnerus

README.md

@@ -85,7 +85,7 @@ The library supports [three.js](https://threejs.org/) r160 and uses its GLTF, Dr
 Refer to the `browserslist` field in [package.json](./package.json) for target browsers.
 
 ### 1. ES Module
-Download [dist/three-loader-3dtiles.esm.min.js](dist/three-loader-3dtiles.esm.min.js) and use an `importmap` to import the dependencies. See [here](examples/installation/es-module) for a full example. 
+Use an `importmap` to import the dependencies from the npm. See [here](examples/installation/es-module) for a full example. 
 
 #### **`index.html`**
   ```html
@@ -94,7 +94,7 @@ Download [dist/three-loader-3dtiles.esm.min.js](dist/three-loader-3dtiles.esm.mi
       "imports": {
         "three": "https://unpkg.com/[email protected]/build/three.module.js",
         "three/examples/jsm/": "https://unpkg.com/[email protected]/examples/jsm/",
-        "three-loader-3dtiles" : "../../../../dist/lib/three-loader-3dtiles.js"
+        "three-loader-3dtiles" : "https://unpkg.com/three-loader-3dtiles/dist/lib/three-loader-3dtiles.js"
       }
     }
   </script>

examples/installation/es-module/index.html

@@ -10,7 +10,7 @@
       "imports": {
         "three": "https://unpkg.com/[email protected]/build/three.module.js",
         "three/examples/jsm/": "https://unpkg.com/[email protected]/examples/jsm/",
-        "three-loader-3dtiles" : "../../../../dist/lib/three-loader-3dtiles.js"
+        "three-loader-3dtiles" : "https://unpkg.com/three-loader-3dtiles/dist/lib/three-loader-3dtiles.js"
       }
     }
   </script>

examples/installation/es-module/index.js

@@ -11,7 +11,7 @@ import {
   Clock,
   SRGBColorSpace,
   GridHelper,
-  AmbientLight
+  Vector2,
 } from 'three'
 
 const scene = new Scene()
@@ -34,6 +34,8 @@ canvasParent.appendChild(renderer.domElement);
 
 let tilesRuntime = undefined;
 
+const viewportSize = new Vector2();
+
 
 async function loadTileset() {
   const result = await Loader3DTiles.load( 
@@ -43,6 +45,7 @@ async function loadTileset() {
       options: {
         dracoDecoderPath: 'https://unpkg.com/[email protected]/examples/jsm/libs/draco',
         basisTranscoderPath: 'https://unpkg.com/[email protected]/examples/jsm/libs/basis',
+        resetTransform: true,
         debug: true
       }
   }
@@ -60,14 +63,15 @@ function render() {
   const dt = clock.getDelta()
   controls.update();
   if (tilesRuntime) {
-    tilesRuntime.update(dt, canvasParent.clientHeight, camera)
+    tilesRuntime.update(dt, viewportSize, camera)
   }
   renderer.render(scene, camera)
   window.requestAnimationFrame(render)
 }
 
 function onWindowResize() {
   renderer.setSize(canvasParent.clientWidth, canvasParent.clientHeight);
+  renderer.getSize(viewportSize)
   camera.aspect = canvasParent.clientWidth / canvasParent.clientHeight;
   camera.updateProjectionMatrix();
 }

src/util.ts

@@ -25,7 +25,6 @@ import { Tile3D } from '@loaders.gl/tiles';
 import { Plane as MathGLPlane } from '@math.gl/culling';
 import { Matrix3 as MathGLMatrix3 } from '@math.gl/core';
 import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils'
-
 import { Gradient } from './gradients'
 
 // From https://github.com/potree/potree/blob/master/src/materials/PointCloudMaterial.js