@jdultra/threedtiles 3.0.5 → 3.0.6

package/README.md

@@ -87,8 +87,7 @@ ogc3DTile.rotateOnAxis(new THREE.Vector3(1,0,0), -Math.PI*0.5);
 ```
 
 # Displaying meshes on a globe
-I'm working on this project in parallel https://github.com/ebeaufay/UltraGlobe which allows displaying a globe with multi resolution imagery and elevation.
-I'll soon add a layer for 3DTiles.
+I'm working on this project in parallel https://github.com/ebeaufay/UltraGlobe which allows displaying a globe with multi resolution imagery, elevation and 3DTiles.
 
 # Mesh to 3DTiles Converter
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jdultra/threedtiles",
-    "version": "3.0.5",
+    "version": "3.0.6",
     "description": "An OGC 3DTiles viewer for Three.js",
     "main": "tileset.js",
     "scripts": {
@@ -26,7 +26,8 @@
         "gltf-validator": ">=2.0.0-dev.3.3",
         "lodash": ">=4.17.20",
         "regenerator-runtime": ">=0.13.7",
-        "three": "0.131.0"
+        "three": "0.131.0",
+        "js-utils-z": "1.2.1"
     },
     "devDependencies": {
         "@babel/core": "^7.12.9",
@@ -38,7 +39,7 @@
         "html-webpack-plugin": "^4.5.0",
         "mini-css-extract-plugin": "^1.3.1",
         "webpack": "4.44.2",
-        "webpack-cli": "3.3.12",
+        "webpack-cli": "^3.3.12",
         "webpack-dev-server": "3.11.0",
         "whatwg-fetch": "^3.5.0"
     }

package/src/cache/Cache.js

@@ -0,0 +1,44 @@
+
+import { LinkedHashMap } from 'js-utils-z';
+
+class Cache {
+    constructor(loader, counter, dispose, max) {
+        this.loader = loader;
+        this.counter = counter;
+        this.dispose = dispose;
+        this.max = max;
+        this.currentSize = 0;
+        this.objects = new LinkedHashMap();
+    }
+
+    get(name){
+        if(this.objects.has(name)){
+            const item = this.objects.remove(name);
+            item.users++;
+            this.objects.put(name, item, false);
+            return new Promise.resolve({dispose:()=>item.users--,content:item.content});
+        }else{
+            return this.loader(name).then(content=>{
+                const item = { users: 1, content: content };
+                this.objects.put(name, item, false);
+                currentSize+=this.counter(item);
+                checkSize();
+                return {dispose:()=>item.users--,content:item.content};
+            });
+        }
+    }
+
+    checkSize(){
+        let object = this.objects.head();
+        while(this.currentSize > this.max && !!object){
+            if(object.value.users <=0){
+                const item = this.objects.remove(object.key);
+                this.currentSize -= this.counter(item.content);
+                this.dispose(item.content);
+            }
+            object = object.next();
+        }
+    }
+}
+
+export{Cache};

package/src/index.js

@@ -62,14 +62,14 @@ function initLODMultiplierSlider(tileset) {
 function initScene() {
     const scene = new THREE.Scene();
     scene.background = new THREE.Color(0xFF0000);
-    scene.add(new THREE.AmbientLight(0xFFFFFF, 1.0));
+    scene.add(new THREE.AmbientLight(0xFFFFFF, 0.5));
 
-    /*var dirLight = new THREE.DirectionalLight(0xffffff, 0.5);
+    var dirLight = new THREE.DirectionalLight(0xffffff, 0.5);
     dirLight.position.set(-400, 500, -100);
     dirLight.target.position.set(0, 0, 0);
 
     scene.add(dirLight);
-    scene.add(dirLight.target);*/
+    scene.add(dirLight.target);
     return scene;
 }
 
@@ -116,7 +116,7 @@ function initStats(dom) {
 
 
 function initCamera() {
-    const camera = new THREE.PerspectiveCamera(30, window.offsetWidth / window.offsetHeight, 1, 10000);
+    const camera = new THREE.PerspectiveCamera(70, window.offsetWidth / window.offsetHeight, 1, 10000);
     camera.position.set(-60, 5, -30);
     camera.lookAt(-100, 0, 0);
 
@@ -128,8 +128,8 @@ function initTileset(scene) {
     const ogc3DTile = new OGC3DTile({
         url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
         //url: "https://storage.googleapis.com/ogc-3d-tiles/castleX/tileset.json",
-        //url: "./yamato/tileset.json",
-        //url: "./castle/tileset.json",
+        //url: "./apartment/tileset.json",
+        //url: "https://storage.googleapis.com/ogc-3d-tiles/berlinSubsetTiled/tileset.json",
         //url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
         //url: "https://s3.us-east-2.wasabisys.com/construkted-assets/arkcnfuk9fw/tileset.json",
         //url: "https://s3.us-east-2.wasabisys.com/construkted-assets/a73faxnydqk/tileset.json",
@@ -141,12 +141,14 @@ function initTileset(scene) {
         meshCallback: mesh => {
             //// Insert code to be called on every newly decoded mesh e.g.:
             mesh.material.wireframe = false;
-            mesh.material.side = THREE.FrontSide;
+            mesh.material.side = THREE.DoubleSide;
         }
     });
 
     //// The OGC3DTile object is a threejs Object3D so you may do all the usual opperations like transformations e.g.:
-    //ogc3DTile.translateOnAxis(new THREE.Vector3(1,0,0), 100)
+    //ogc3DTile.translateOnAxis(new THREE.Vector3(0,1,0), -10)
+    //ogc3DTile.translateOnAxis(new THREE.Vector3(1,0,0), -65)
+    //ogc3DTile.translateOnAxis(new THREE.Vector3(0,0,1), -80)
     //ogc3DTile.scale.set(0.01,0.01,0.01);
     //ogc3DTile.rotateOnAxis(new THREE.Vector3(1, 0, 0), -Math.PI * 0.5) // Z-UP to Y-UP
     //// It's up to the user to call updates on the tileset. You might call them whenever the camera moves or at regular time intervals like here

package/src/tileset/OGC3DTile.js

@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 import { OBB } from "../geometry/obb";
 import { B3DMDecoder } from "../decoder/B3DMDecoder";
+import {Cache} from "../cache/Cache";
 const path = require('path');
 
 const tilesToLoad = [];
@@ -11,7 +12,7 @@ function scheduleLoadTile(tile) {
 setInterval(() => {
     const tile = tilesToLoad.shift();
     if (!!tile) tile.load();
-}, 0)
+}, 5)
 
 const tempSphere = new THREE.Sphere(new THREE.Vector3(0, 0, 0, 1));
 
@@ -28,7 +29,8 @@ class OGC3DTile extends THREE.Object3D {
      *   parentBoundingVolume: optional,
      *   parentRefinement: optional,
      *   geometricErrorMultiplier: Double,
-     *   loadOutsideView: Boolean
+     *   loadOutsideView: Boolean,
+     *   cache : Cache
      * } properties 
      */
     constructor(properties) {
@@ -49,7 +51,7 @@ class OGC3DTile extends THREE.Object3D {
         this.json; // the json corresponding to this tile
         this.materialVisibility = false;
         this.inFrustum = true;
-
+        this.level = properties.level? properties.level : 0;
         this.hasMeshContent = false; // true when the provided json has a content field pointing to a B3DM file
         this.hasUnloadedJSONContent = false; // true when the provided json has a content field pointing to a JSON file that is not yet loaded
 
@@ -239,7 +241,7 @@ class OGC3DTile extends THREE.Object3D {
         function updateTree(metric) {
             // If this tile does not have mesh content but it has children
             if(metric<0 && self.hasMeshContent) return;
-            if (!self.hasMeshContent || metric < self.geometricError) {
+            if (!self.hasMeshContent || (metric < self.geometricError && !!self.meshContent)) {
                 if (!!self.json && !!self.json.children && self.childrenTiles.length != self.json.children.length) {
                     loadJsonChildren();
                     return;
@@ -289,6 +291,8 @@ class OGC3DTile extends THREE.Object3D {
                 });
                 if (allChildrenReady) {
                     self.changeContentVisibility(false);
+                }else{
+                    self.changeContentVisibility(true);
                 }
             }
         }
@@ -318,7 +322,8 @@ class OGC3DTile extends THREE.Object3D {
                     rootPath: self.rootPath,
                     geometricErrorMultiplier: self.geometricErrorMultiplier,
                     meshCallback: self.meshCallback,
-                    loadOutsideView: self.loadOutsideView
+                    loadOutsideView: self.loadOutsideView,
+                    level:self.level+1
                 });
                 self.childrenTiles.push(childTile);
                 self.add(childTile);
@@ -448,4 +453,28 @@ class OGC3DTile extends THREE.Object3D {
         this.childrenTiles.forEach(child => child.setGeometricErrorMultiplier(geometricErrorMultiplier));
     }
 }
-export { OGC3DTile };
+
+/**
+ * 
+ * @param {Integer} size a number of vertices 
+ */
+function createMeshCache(size = 5000000, meshCallback = ()=>{}){
+    /* return new Cache(
+        (url, self)=>{
+            fetch(url, { signal: self.controller.signal }).then(result => {
+                if (!result.ok) {
+                    throw new Error(`couldn't load "${properties.url}". Request failed with status ${result.status} : ${result.statusText}`);
+                }
+                result.arrayBuffer().then(buffer => B3DMDecoder.parseB3DM(buffer, self.meshCallback)).then(mesh => {
+                    mesh.traverse((o) => {
+                        if (o.isMesh) {
+                            o.material.visible = false;
+                        }
+                    });
+                    return mesh;
+                }).catch(error => { });
+            }
+        }
+    ) */
+}
+export { OGC3DTile, createMeshCache };