@jdultra/threedtiles 3.1.0 → 3.1.2

package/README.md

@@ -14,7 +14,7 @@ import { OGC3DTile } from "./tileset/OGC3DTile";
 ...
 
 const ogc3DTile = new OGC3DTile({
-    url: "https://ebeaufay.github.io/ThreedTilesViewer.github.io/momoyama/tileset.json"
+    url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json"
 });
 
 scene.add(ogc3DTile);
@@ -33,6 +33,9 @@ setInterval(function () {
 - Allows tilesets transformations. Translate, scale and rotate a tilesets in real-time.
 - callback on loaded geometry to assign a custom material or use the meshes for computations.
 - Optionally load low detail tiles outside of view frustum for correct shadows and basic mesh present when the camera moves quickly.
+- Share a cache between tileset instances
+- Automatically tune the geometric error multiplier to 60 FPS
+- Automatic scaling of the cache
 
 ### geometric Error Multiplier
 The geometric error multiplier allows you to multiply the geometric error by a factor.
@@ -43,20 +46,43 @@ you may also set this value at initialization:
 
 ```
 const ogc3DTile = new OGC3DTile({
-    url: "https://ebeaufay.github.io/ThreedTilesViewer.github.io/momoyama/tileset.json",
+    url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
     geometricErrorMultiplier: 2.0
 });
 ```
 A lower value will result in lower detail tiles being loaded and a higher value results in higher detail tiles being loaded.
 A value of 1.0 is the default.
 
+#### Automatic Geometric error multiplier
+In order to reach a steady 60 FPS, you can specify a TilesetStats object. 
+This object is basically the Stats object from the Three.js samples without the UI component.
+It must be updated in the animate function and given to the tileset at construction.
+```
+import TilesetStats from '@jdultra/threedtiles/src/tileset/TilesetStats';
+
+const tilesetStats = TilesetStats();
+
+const ogc3DTile = new OGC3DTile({
+    url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
+    stats: tilesetStats
+});
+
+function animate() {
+    
+    ...
+    
+    tilesetStats.update();
+}
+```
+
+
 ### load tiles outside of view
 By default, only the tiles that intersect the view frustum are loaded. When the camera moves, the scene will have to load the missing tiles.
 Instead of this behaviour, you can force the lowest possible LODs to be loaded for tiles around the view so that there are no gaps in the mesh when the camera moves or when displaying shadows.
 
 ```
 const ogc3DTile = new OGC3DTile({
-    url: "https://ebeaufay.github.io/ThreedTilesViewer.github.io/momoyama/tileset.json",
+    url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
     loadOutsideView: true
 });
 ```
@@ -66,13 +92,33 @@ Add a callback on loaded tiles in order to set a material or do some logic on th
 
 ```
 const ogc3DTile = new OGC3DTile({
-    url: "https://ebeaufay.github.io/ThreedTilesViewer.github.io/momoyama/tileset.json",
+    url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
     meshCallback: mesh => {
             mesh.material.wireframe = true;
         }
 });
 ```
 
+### Cache
+You may instanciate a cache through the TileLoader class and re-use it for several or all your tilesets. 
+The limitation is that all the tilesets using the same cache will have the same callback.
+
+If a TilesetStats object is passed, it will be used to monitor the size of the cache when the browser allows it, otherwise, each cache is limitted to 1000 items.
+
+```
+import { TileLoader } from "@jdultra/threedtiles/src/tileset/TileLoader";
+
+const ogc3DTile = new OGC3DTile({
+        url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
+        tileLoader: new TileLoader(mesh => {
+            //// Insert code to be called on every newly decoded mesh e.g.:
+            mesh.material.wireframe = false;
+            mesh.material.side = THREE.DoubleSide;
+        }, tilesetStats),
+        meshCallback: mesh => { mesh.material.wireframe = true;} // This callback will not be used as the callback provided to the TileLoader takes priority
+    });
+```
+
 ### Transformations
 The OGC 3DTile object is a regular three.js Object3D so it can be transformed via the standard three.js API:
 

package/index.html

@@ -4,6 +4,7 @@
 <head>
   <meta charset="utf-8" />
   <title>Three 3DTiles viewer sample</title>
+  <link rel="manifest" href="manifest.json">
 </head>
 
 <body>

package/manifest.json

@@ -0,0 +1,4 @@
+{
+    "display":      "fullscreen",
+    "orientation":  "landscape"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jdultra/threedtiles",
-    "version": "3.1.0",
+    "version": "3.1.2",
     "description": "An OGC 3DTiles viewer for Three.js",
     "main": "tileset.js",
     "scripts": {

package/src/index.js

@@ -7,8 +7,6 @@ import { TileLoader } from "./tileset/TileLoader";
 import { MapControls, OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
 
-
-
 const scene = initScene();
 const tilesetStats = TilesetStats();
 const domContainer = initDomContainer("screen");
@@ -21,7 +19,6 @@ const renderer = initRenderer(camera, domContainer);
 
 animate();
 
-
 function initScene() {
     const scene = new THREE.Scene();
     scene.background = new THREE.Color(0x000000);

package/src/tileset/OGC3DTile.js

@@ -45,7 +45,9 @@ class OGC3DTile extends THREE.Object3D {
         if (properties.stats) {
             // Automatic geometric error multiplier
             this.stats = properties.stats;
+
             setIntervalAsync(() => {
+                if (!!document.hidden) return;
                 const framerate = self.stats.fps();
                 if (framerate < 0) return;
                 if (framerate < 58) {
@@ -53,7 +55,6 @@ class OGC3DTile extends THREE.Object3D {
                 } else if (framerate > 58) {
                     self.setGeometricErrorMultiplier(self.geometricErrorMultiplier + 0.05);
                 }
-                self.setGeometricErrorMultiplier(self.geometricErrorMultiplier * (self.stats.fps() / 60));
             }, 1000);
         }