@jdultra/threedtiles 5.0.0 → 5.1.1

package/README.md

@@ -20,7 +20,8 @@ import { OGC3DTile } from "./tileset/OGC3DTile";
 ...
 
 const ogc3DTile = new OGC3DTile({
-    url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json"
+    url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
+    renderer: renderer
 });
 
 scene.add(ogc3DTile);
@@ -45,6 +46,7 @@ Currently, the library is limmited to B3DM files.
 - Optimal tile load order
 - Occlusion culling
 - Instanced tilesets
+- Center tileset and re-orient geolocated data
 
 ### geometric Error Multiplier
 The geometric error multiplier allows you to multiply the geometric error by a factor.
@@ -56,6 +58,7 @@ you may also set this value at initialization:
 ```
 const ogc3DTile = new OGC3DTile({
     url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
+    renderer: renderer,
     geometricErrorMultiplier: 2.0
 });
 ```
@@ -66,11 +69,12 @@ A value of 1.0 is the default.
 
 ### 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 and the user might see some holes in the model.
-Instead of this behaviour, you can force the lowest possible LODs to be loaded for tiles outside the view so that there are no gaps in the mesh when the camera moves. This also allows displaying shadows correctly.
+Instead of this behaviour, you can force the lowest possible LODs to be loaded for tiles outside the view so that there are no gaps in the mesh when the camera moves. This also allows displaying shadows from parts of the scene that are not in the view.
 
 ```
 const ogc3DTile = new OGC3DTile({
     url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
+    renderer: renderer,
     loadOutsideView: true
 });
 ```
@@ -84,11 +88,13 @@ This can be useful to position the tileset at a specific location when it is not
 ```
 const ogc3DTile = new OGC3DTile({
     url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
-    onLoadCallback: tilese => {
-            console.log(tileset.boundingVolume);
+    renderer: renderer,
+    onLoadCallback: tileset => {
+            console.log(tileset.json.boundingVolume);
         }
 });
 ```
+Note that the callback is called with the OGC3DTile object as parameter and that this object has a "json" property giving you access to the original tileset.json with it's transform, geometric error, bounding volume, etc...
 
 #### Mesh callback
 Add a callback on loaded tiles in order to set a material or do some logic on the meshes.
@@ -96,6 +102,7 @@ Add a callback on loaded tiles in order to set a material or do some logic on th
 ```
 const ogc3DTile = new OGC3DTile({
     url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
+    renderer: renderer,
     meshCallback: mesh => {
             mesh.material.wireframe = true;
             mesh.material.side = THREE.DoubleSide;
@@ -116,6 +123,7 @@ import { TileLoader } from "@jdultra/threedtiles/src/tileset/TileLoader";
 
 const ogc3DTile = new OGC3DTile({
         url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
+        renderer: renderer,
         tileLoader: new TileLoader(mesh => {
             //// Insert code to be called on every newly decoded mesh e.g.:
             mesh.material.wireframe = false;
@@ -133,6 +141,7 @@ The OGC 3DTile object is a regular three.js Object3D so it can be transformed vi
 ```
 const ogc3DTile = new OGC3DTile({
     url: "https://ebeaufay.github.io/ThreedTilesViewer.github.io/momoyama/tileset.json"
+    renderer: renderer,
 });
 
 ogc3DTile.translateOnAxis(new THREE.Vector3(0,1,0), -450);
@@ -156,6 +165,7 @@ This service must be passed to every OGC3DTiles object like so:
 ```
 const ogc3DTile = new OGC3DTile({
         url: "path/to/tileset.json",
+        renderer: renderer,
         occlusionCullingService: occlusionCullingService
     });
 ```
@@ -201,11 +211,12 @@ const instancedTileLoader = new InstancedTileLoader(scene, mesh => {
 const instancedTilesets = [];
 for (let i = 0; i < 100; i++) {
     const tileset = new InstancedOGC3DTile({
-    url: "https://storage.googleapis.com/ogc-3d-tiles/droneship/tileset.json",
-    geometricErrorMultiplier: 1.0,
-    loadOutsideView: false,
-    tileLoader: instancedTileLoader,
-    static: true // when static is set to true, don't forget to call InstancedOGC3DTile#updateMatrix manually
+        url: "https://storage.googleapis.com/ogc-3d-tiles/droneship/tileset.json",
+        renderer: renderer,
+        geometricErrorMultiplier: 1.0,
+        loadOutsideView: false,
+        tileLoader: instancedTileLoader,
+        static: true // when static is set to true, don't forget to call InstancedOGC3DTile#updateMatrix manually
     });
     
     tileset.translateOnAxis(new THREE.Vector3(1, 0, 0), 50 * i);
@@ -230,6 +241,19 @@ function animate() {
 animate();
 
 ```
+### Center tileset and re-orient geolocated data
+
+OGC3DTiles data is not necessarily centered on the origin and when it's georeferenced, it's also rotated relative to the cartesian coordinate system.
+The optional property "centerModel" will center the model on the origin. In the case of georeferenced models, identified as those using the "region" bounding volume, it will also rotate it so that it's up-axis alligns with the y axis.
+
+```
+const ogc3DTile = new OGC3DTile({
+    url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
+    renderer: renderer,
+    centerModel:true
+});
+```
+This property is also available for instanced models.
 
 ### static tilesets and other performance tips
 When you know your tileset will be static, you can specify it in the OGC3DTile object constructor parameter.
@@ -238,6 +262,7 @@ This will skip recalculating the transformation matrix of every tile each frame
 ```
 const ogc3DTile = new OGC3DTile({
         url: "path/to/tileset.json",
+        renderer: renderer,
         static: true
     });
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jdultra/threedtiles",
-    "version": "5.0.0",
+    "version": "5.1.1",
     "description": "An OGC 3DTiles viewer for Three.js",
     "main": "tileset.js",
     "scripts": {
@@ -31,15 +31,15 @@
         "path-browserify": "^1.0.1",
         "regenerator-runtime": "^0.13.11",
         "set-interval-async": "^2.0.3",
-        "three": "0.146.0",
+        "three": "0.148.0",
         "uuid": "^8.3.2"
     },
     "devDependencies": {
-        "@babel/core": "^7.20.2",
+        "@babel/core": "^7.20.12",
         "@babel/preset-env": "^7.20.2",
         "babel-loader": "^8.3.0",
         "copy-webpack-plugin": "^6.3.2",
-        "core-js": "^3.26.1",
+        "core-js": "^3.27.1",
         "html-loader": "^1.3.2",
         "html-webpack-plugin": "^4.5.0",
         "mini-css-extract-plugin": "^1.6.2",

package/src/decoder/B3DMDecoder.js

@@ -1,12 +1,18 @@
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
 import * as THREE from 'three';
+import {FeatureTable, BatchTable} from './FeatureTable';
 
 const gltfLoader = new GLTFLoader();
 const dracoLoader = new DRACOLoader();
+const tempMatrix = new THREE.Matrix4();
 dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.4.3/');
 gltfLoader.setDRACOLoader(dracoLoader);
-const dummy = new THREE.Object3D();
+const zUpToYUp = new THREE.Matrix4();
+zUpToYUp.set(1,0,0,0,
+			0,0,-1,0,
+			0,1,0,0,
+			0,0,0,1);
 //const legacyGLTFLoader = new LegacyGLTFLoader();
 
 function parseB3DM(arrayBuffer, meshCallback) {
@@ -31,10 +37,10 @@ function parseB3DM(arrayBuffer, meshCallback) {
 	const batchTableBinaryByteLength = dataView.getUint32(24, true);
 
 	const featureTableStart = 28;
-	//const featureTable = new FeatureTable( arrayBuffer, featureTableStart, featureTableJSONByteLength, featureTableBinaryByteLength );
+	const featureTable = new FeatureTable(arrayBuffer, featureTableStart, featureTableJSONByteLength, featureTableBinaryByteLength);
 
 	const batchTableStart = featureTableStart + featureTableJSONByteLength + featureTableBinaryByteLength;
-	//const batchTable = new BatchTable( arrayBuffer, featureTable.getData( 'BATCH_LENGTH' ), batchTableStart, batchTableJSONByteLength, batchTableBinaryByteLength );
+	const batchTable = new BatchTable(arrayBuffer, featureTable.getData('BATCH_LENGTH'), batchTableStart, batchTableJSONByteLength, batchTableBinaryByteLength);
 
 	const glbStart = batchTableStart + batchTableJSONByteLength + batchTableBinaryByteLength;
 	const glbBytes = new Uint8Array(arrayBuffer, glbStart, byteLength - glbStart);
@@ -48,6 +54,7 @@ function parseB3DM(arrayBuffer, meshCallback) {
 		gltfLoader.parse(gltfBuffer, null, model => {
 
 			////TODO
+
 			//model.batchTable = b3dm.batchTable;
 			//model.featureTable = b3dm.featureTable;
 
@@ -55,8 +62,18 @@ function parseB3DM(arrayBuffer, meshCallback) {
 			//model.scene.featureTable = b3dm.featureTable;
 
 			//const scene = mergeColoredObject(model.scene);
+
+			//model.scene.applyMatrix4(ytozUpMatrix);
+
+			const rtcCenter = featureTable.getData('RTC_CENTER');
+			if (rtcCenter) {
+				tempMatrix.makeTranslation(rtcCenter[0], rtcCenter[1], rtcCenter[2])
+				model.scene.applyMatrix4(tempMatrix);
+			}
+			
 			model.scene.traverse((o) => {
 				if (o.isMesh) {
+					o.applyMatrix4(zUpToYUp);
 					if (!!meshCallback) {
 						meshCallback(o);
 					}
@@ -76,11 +93,11 @@ const B3DMDecoder = {
 
 		return parseB3DM(arrayBuffer, meshCallback).then(mesh => {
 			let instancedMesh;
+			mesh.updateWorldMatrix(false, true)
 			mesh.traverse(child => {
 				if (child.isMesh) {
 					instancedMesh = new THREE.InstancedMesh(child.geometry, child.material, maxCount);
-					instancedMesh.baseMatrix = child.matrix;
-					//console.log(child.matrix.elements[12])
+					instancedMesh.baseMatrix = child.matrixWorld;
 				}
 			});
 			return instancedMesh;

package/src/decoder/FeatureTable.js

@@ -0,0 +1,169 @@
+/**
+ * This class is taken straight from NASA-AMMOS library.
+ * https://github.com/NASA-AMMOS/3DTilesRendererJS/blob/master/src/utilities/FeatureTable.js
+ */
+
+const utf8decoder = new TextDecoder();
+export class FeatureTable {
+
+    constructor(buffer, start, headerLength, binLength) {
+
+        this.buffer = buffer;
+        this.binOffset = start + headerLength;
+        this.binLength = binLength;
+
+        let header = null;
+        if (headerLength !== 0) {
+
+            try {
+                const headerData = new Uint8Array(buffer, start, headerLength);
+                header = JSON.parse(utf8decoder.decode(headerData));
+              } catch (e) {
+                header = {};
+               }
+
+        } else {
+
+            header = {};
+
+        }
+        this.header = header;
+
+    }
+
+    getKeys() {
+
+        return Object.keys(this.header);
+
+    }
+
+    getData(key, count, defaultComponentType = null, defaultType = null) {
+
+        const header = this.header;
+
+        if (!(key in header)) {
+
+            return null;
+
+        }
+
+        const feature = header[key];
+        if (!(feature instanceof Object)) {
+
+            return feature;
+
+        } else if (Array.isArray(feature)) {
+
+            return feature;
+
+        } else {
+
+            const { buffer, binOffset, binLength } = this;
+            const byteOffset = feature.byteOffset || 0;
+            const featureType = feature.type || defaultType;
+            const featureComponentType = feature.componentType || defaultComponentType;
+
+            if ('type' in feature && defaultType && feature.type !== defaultType) {
+
+                throw new Error('FeatureTable: Specified type does not match expected type.');
+
+            }
+
+            let stride;
+            switch (featureType) {
+
+                case 'SCALAR':
+                    stride = 1;
+                    break;
+
+                case 'VEC2':
+                    stride = 2;
+                    break;
+
+                case 'VEC3':
+                    stride = 3;
+                    break;
+
+                case 'VEC4':
+                    stride = 4;
+                    break;
+
+                default:
+                    throw new Error(`FeatureTable : Feature type not provided for "${key}".`);
+
+            }
+
+            let data;
+            const arrayStart = binOffset + byteOffset;
+            const arrayLength = count * stride;
+
+            switch (featureComponentType) {
+
+                case 'BYTE':
+                    data = new Int8Array(buffer, arrayStart, arrayLength);
+                    break;
+
+                case 'UNSIGNED_BYTE':
+                    data = new Uint8Array(buffer, arrayStart, arrayLength);
+                    break;
+
+                case 'SHORT':
+                    data = new Int16Array(buffer, arrayStart, arrayLength);
+                    break;
+
+                case 'UNSIGNED_SHORT':
+                    data = new Uint16Array(buffer, arrayStart, arrayLength);
+                    break;
+
+                case 'INT':
+                    data = new Int32Array(buffer, arrayStart, arrayLength);
+                    break;
+
+                case 'UNSIGNED_INT':
+                    data = new Uint32Array(buffer, arrayStart, arrayLength);
+                    break;
+
+                case 'FLOAT':
+                    data = new Float32Array(buffer, arrayStart, arrayLength);
+                    break;
+
+                case 'DOUBLE':
+                    data = new Float64Array(buffer, arrayStart, arrayLength);
+                    break;
+
+                default:
+                    throw new Error(`FeatureTable : Feature component type not provided for "${key}".`);
+
+            }
+
+            const dataEnd = arrayStart + arrayLength * data.BYTES_PER_ELEMENT;
+            if (dataEnd > binOffset + binLength) {
+
+                throw new Error('FeatureTable: Feature data read outside binary body length.');
+
+            }
+
+            return data;
+
+        }
+
+    }
+
+}
+
+export class BatchTable extends FeatureTable {
+
+    constructor(buffer, batchSize, start, headerLength, binLength) {
+
+        super(buffer, start, headerLength, binLength);
+        this.batchSize = batchSize;
+
+    }
+
+    getData(key, componentType = null, type = null) {
+
+        return super.getData(key, this.batchSize, componentType, type);
+
+    }
+
+}

package/src/index.js

@@ -14,7 +14,6 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { InstancedOGC3DTile } from "./tileset/instanced/InstancedOGC3DTile.js"
 import { InstancedTileLoader } from "./tileset/instanced/InstancedTileLoader.js"
 
-import { B3DMDecoder } from "./decoder/B3DMDecoder";
 
 const occlusionCullingService = new OcclusionCullingService();
 occlusionCullingService.setSide(THREE.DoubleSide);
@@ -24,35 +23,15 @@ const domContainer = initDomContainer("screen");
 const camera = initCamera(domContainer.offsetWidth, domContainer.offsetHeight);
 const stats = initStats(domContainer);
 const renderer = initRenderer(camera, domContainer);
-//const ogc3DTiles = initTileset(scene);
+const ogc3DTiles = initTileset(scene, 1.0);
 
-
-const instancedTileLoader = createInstancedTileLoader(scene);
-initInstancedTilesets(instancedTileLoader);
+//const instancedTileLoader = createInstancedTileLoader(scene);
+//initInstancedTilesets(instancedTileLoader);
 
 const controller = initController(camera, domContainer);
 
 const composer = initComposer(scene, camera, renderer);
 
-
-/* fetch("https://storage.googleapis.com/ogc-3d-tiles/droneship/1/2007.b3dm").then(result => {
-    
-    if (!result.ok) {
-        console.error("could not load tile with path : " + path)
-        throw new Error(`couldn't load "${path}". Request failed with status ${result.status} : ${result.statusText}`);
-    }
-    return result.arrayBuffer();
-
-})
-.then(resultArrayBuffer=>{
-    return B3DMDecoder.parseB3DMInstanced(resultArrayBuffer, self.meshCallback, 1);
-})
-.then(mesh=>{
-    scene.add(mesh)
-        
-}) */
-
-
 animate();
 
 
@@ -70,10 +49,10 @@ function initScene() {
     const scene = new THREE.Scene();
     scene.matrixAutoUpdate = false;
     //scene.matrixWorldAutoUpdate = false;
-    scene.background = new THREE.Color(0x404040);
+    scene.background = new THREE.Color(0xffffff);
     scene.add(new THREE.AmbientLight(0xFFFFFF, 1.0));
 
-    /*const light = new THREE.PointLight(0xbbbbff, 2, 5000);
+    /* const light = new THREE.PointLight(0xbbbbff, 2, 5000);
     const sphere = new THREE.SphereGeometry(2, 16, 8);
     light.add(new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0xbbbbff })));
     scene.add(light);
@@ -84,9 +63,9 @@ function initScene() {
     const sphere2 = new THREE.SphereGeometry(2, 16, 8);
     light2.add(new THREE.Mesh(sphere2, new THREE.MeshBasicMaterial({ color: 0xffbbbb })));
     scene.add(light2);
-    light2.position.set(200, 100, -100);*/
+    light2.position.set(200, 100, -100); */
+
 
-    
     return scene;
 }
 
@@ -134,119 +113,94 @@ function initStats(dom) {
 
 function initCamera(width, height) {
     const camera = new THREE.PerspectiveCamera(60, width / height, 1, 100000);
-    camera.position.set(-400.060421028462592,-14.561785966685625,700.123058268059668);
-    
+    camera.position.set(10000,0,0);
+    camera.lookAt(0,0,0);
+
     camera.matrixAutoUpdate = true;
     return camera;
 }
 
-function initTileset(scene) {
+function initTileset(scene, gem) {
 
     const 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;
         mesh.material.metalness = 0.0
-    }, 1000)
+    }, 100);
+
     const ogc3DTile = new OGC3DTile({
-        //url: "http://localhost:8080/tileset.json",
-        //url: "https://storage.googleapis.com/ogc-3d-tiles/droneship/tileset.json",
-        url: "https://storage.googleapis.com/ogc-3d-tiles/berlinTileset/tileset.json",
-        //url: "https://s3.eu-central-2.wasabisys.com/construkted-assets-eu/ands2ty8orz/tileset.json",
-        //url: "https://s3.eu-central-2.wasabisys.com/construkted-assets-eu/an7opcnyije/tileset.json",
-        //url: "https://s3.eu-central-2.wasabisys.com/construkted-assets-eu/ands2ty8orz/tileset.json",
-        //url: "https://s3.eu-central-2.wasabisys.com/construkted-assets-eu/a88b3sungng/tileset.json",
-        geometricErrorMultiplier: 0.01,
+        //url: "https://sampledata.luciad.com/data/ogc3dtiles/LucerneAirborneMesh/tileset.json",
+        url: "https://sampleservices.luciad.com/ogc/3dtiles/marseille-mesh/tileset.json",
+        //url: "https://storage.googleapis.com/ogc-3d-tiles/baltimore/tileset.json",
+        //url: "http://localhost:8082/tileset.json",
+        geometricErrorMultiplier: gem,
         loadOutsideView: false,
         tileLoader: tileLoader,
         //occlusionCullingService: occlusionCullingService,
         static: false,
-        renderer: renderer
-
-    });
-
-
-
-
-    //// The OGC3DTile object is a threejs Object3D so you may do all the usual opperations like transformations e.g.:
-    ogc3DTile.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * -0.5) // Z-UP to Y-UP
-    ogc3DTile.scale.set(100.0,100.0,100.0)
-    //// If the OGC3DTile object is marked as "static" (constructorParameter), these operations will not work.
-
-
-
-    //// 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
-
-
-
-    var interval;
-    document.addEventListener('keyup', (e) => {
-        console.log(camera.position)
-        if (!!e.key && e.key !== "p") {
-
-            if (!!interval) {
-                clearInterval(interval);
-                interval = null;
-            } else {
-                startInterval();
+        centerModel:true,
+        renderer: renderer,
+        onLoadCallback: (tile)=>{
+            if (!!tile.json.boundingVolume.region) {
+                const halfHeight = (tile.json.boundingVolume.region[5] - tile.json.boundingVolume.region[4]) * 0.5;
+                ogc3DTile.translateOnAxis(new THREE.Vector3(0, 1, 0), halfHeight);
+                //ogc3DTile.updateWorldMatrix(true, true);
             }
         }
-        if (!!e.key && e.key !== "l") {
-
-            console.log("new THREE.Vector3(" + camera.position.x + "," + camera.position.y + "," + camera.position.z + ")");
-            console.log("new THREE.Quaternion(" + camera.quaternion.x + "," + camera.quaternion.y + "," + camera.quaternion.z + "," + camera.quaternion.w + ")");
-
-        }
 
     });
-    function startInterval() {
-        interval = setIntervalAsync(function () {
-            ogc3DTile.update(camera);
+    setIntervalAsync(function () {
+        ogc3DTile.update(camera);
+    }, 20);
 
-        }, 20);
-    }
-    startInterval();
+    
+
+    //ogc3DTile.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * -0.5) // Z-UP to Y-UP
+    //ogc3DTile.translateOnAxis(new THREE.Vector3(0, 0, 1), 1)
+    /* 
+    ogc3DTile.translateOnAxis(new THREE.Vector3(0, 0, 1), 10) // Z-UP to Y-UP
+    ogc3DTile.translateOnAxis(new THREE.Vector3(0, 1, 0), 18.5) // Z-UP to Y-UP */
+    scene.add(ogc3DTile);
 
-    scene.add(ogc3DTile)
     return ogc3DTile;
 }
 
+
 function createInstancedTileLoader(scene) {
     return new InstancedTileLoader(scene, mesh => {
         //// Insert code to be called on every newly decoded mesh e.g.:
         mesh.material.wireframe = false;
         mesh.material.side = THREE.DoubleSide;
-    }, 1000, 3375);
+        mesh.material.metalness = 0.0;
+    }, 0, 1);
 }
 function initInstancedTilesets(instancedTileLoader) {
 
+    /*new GLTFLoader().load('http://localhost:8080/test.glb', function ( gltf ) {
+        scene.add(gltf.scene);
+    } );*/
+
     const instancedTilesets = [];
 
-    for (let x = 0; x < 15; x++) {
-        for (let y = 0; y < 15; y++) {
-            for (let z = 0; z < 15; z++) {
-                const tileset = new InstancedOGC3DTile({
-                    url: "https://storage.googleapis.com/ogc-3d-tiles/droneship/tileset.json",
-                    //url: "https://storage.googleapis.com/ogc-3d-tiles/berlinTileset/tileset.json",
-                    //url: "http://localhost:8080/tileset.json",
-                    geometricErrorMultiplier: 1.0,
-                    loadOutsideView: true,
-                    tileLoader: instancedTileLoader,
-                    static: true,
-                    renderer: renderer
-                });
-                //tileset.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * -0.5) // Z-UP to Y-UP
-                tileset.translateOnAxis(new THREE.Vector3(1, 0, 0), 50 * x)
-                tileset.translateOnAxis(new THREE.Vector3(0, 1, 0), 50 * y)
-                tileset.translateOnAxis(new THREE.Vector3(0, 0, 1), 50 * z)
-                tileset.updateMatrix()
-                scene.add(tileset);
-                instancedTilesets.push(tileset);
 
+    const tileset = new InstancedOGC3DTile({
+        //url: "https://storage.googleapis.com/ogc-3d-tiles/berlinTileset/tileset.json",
+        url: "https://sampleservices.luciad.com/ogc/3dtiles/marseille-mesh/tileset.json",
+        //url: "https://s3.eu-central-2.wasabisys.com/construkted-assets-eu/ab13lasdc9i/tileset.json",
+        //url: "http://localhost:8081/tileset.json",
+        geometricErrorMultiplier: 1.0,
+        loadOutsideView: true,
+        tileLoader: instancedTileLoader,
+        static: false,
+        centerModel:true,
+        renderer: renderer
+    });
+    //tileset.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * -0.5) // Z-UP to Y-UP
 
-            }
-        }
-    }
+    tileset.updateMatrix()
+    scene.add(tileset);
+    instancedTilesets.push(tileset);
 
     scene.updateMatrixWorld(true)
     function now() {
@@ -255,14 +209,14 @@ function initInstancedTilesets(instancedTileLoader) {
     let updateIndex = 0;
     setInterval(() => {
         let startTime = now();
-        do{
+        do {
             const frustum = new THREE.Frustum();
             frustum.setFromProjectionMatrix(new THREE.Matrix4().multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse));
             instancedTilesets[updateIndex].update(camera, frustum);
-            updateIndex= (updateIndex+1)%instancedTilesets.length;
-        }while(updateIndex < instancedTilesets.length && now()-startTime<4);
-    },40);
-    
+            updateIndex = (updateIndex + 1) % instancedTilesets.length;
+        } while (updateIndex < instancedTilesets.length && now() - startTime < 4);
+    }, 40);
+
     //initLODMultiplierSlider(instancedTilesets);
 }
 
@@ -273,7 +227,7 @@ function initLODMultiplierSlider(instancedTilesets) {
 
     slider.oninput = () => {
         instancedTilesets.forEach(tileset => {
-            tileset.setGeometricErrorMultiplier(slider.value*0.1)
+            tileset.setGeometricErrorMultiplier(slider.value * 0.1)
         })
         output.innerHTML = slider.value;
     }
@@ -283,7 +237,10 @@ function initController(camera, dom) {
     const controller = new OrbitControls(camera, dom);
 
     controller.target.set(0,0,0);
-    controller.minDistance = 0.01;
+//controller.target.set(0,0,0);
+
+
+    controller.minDistance = 0.1;
     controller.maxDistance = 100000;
     controller.update();
     return controller;
@@ -292,7 +249,7 @@ function initController(camera, dom) {
 
 function animate() {
     requestAnimationFrame(animate);
-    instancedTileLoader.update();
+    //instancedTileLoader.update();
     composer.render();
     //occlusionCullingService.update(scene, renderer, camera)
     stats.update();

package/src/tileset/OGC3DTile.js

@@ -5,8 +5,12 @@ import { v4 as uuidv4 } from "uuid";
 import * as path from "path-browserify"
 import { clamp } from "three/src/math/MathUtils";
 
-const tempSphere = new THREE.Sphere(new THREE.Vector3(0, 0, 0, 1));
+const tempSphere = new THREE.Sphere(new THREE.Vector3(0, 0, 0), 1);
+const tempVec1 = new THREE.Vector3(0, 0, 0);
+const tempVec2 = new THREE.Vector3(0, 0, 0);
+const upVector = new THREE.Vector3(0, 1, 0);
 const rendererSize = new THREE.Vector2();
+const tempQuaternion = new THREE.Quaternion();
 
 class OGC3DTile extends THREE.Object3D {
 
@@ -28,6 +32,7 @@ class OGC3DTile extends THREE.Object3D {
      *   onLoadCallback: function,
      *   occlusionCullingService: OcclusionCullingService,
      *   static: Boolean,
+     *   centerModel: Boolean
      *   renderer: Renderer
      * } properties 
      */
@@ -63,6 +68,7 @@ class OGC3DTile extends THREE.Object3D {
         if (this.static) {
             this.matrixAutoUpdate = false;
         }
+
         // declare properties specific to the tile for clarity
         this.childrenTiles = [];
         this.meshContent;
@@ -84,6 +90,7 @@ class OGC3DTile extends THREE.Object3D {
         if (!!properties.json) { // If this tile is created as a child of another tile, properties.json is not null
             self.setup(properties);
             if (properties.onLoadCallback) properties.onLoadCallback(self);
+
         } else if (properties.url) { // If only the url to the tileset.json is provided
             fetch(properties.url, { signal: self.abortController.signal }).then(result => {
                 if (!result.ok) {
@@ -92,6 +99,33 @@ class OGC3DTile extends THREE.Object3D {
                 result.json().then(json => {
                     self.setup({ rootPath: path.dirname(properties.url), json: json });
                     if (properties.onLoadCallback) properties.onLoadCallback(self);
+                    if (!!properties.centerModel) {
+                        const tempSphere = new THREE.Sphere();
+                        if (self.boundingVolume instanceof OBB) {
+                            // box
+                            tempSphere.copy(self.boundingVolume.sphere);
+                        } else if (self.boundingVolume instanceof THREE.Sphere) {
+                            //sphere
+                            tempSphere.copy(self.boundingVolume);
+                        }
+
+                        //tempSphere.applyMatrix4(self.matrixWorld);
+                        if (!!this.json.boundingVolume.region) {
+                            this.transformWGS84ToCartesian(
+                                (this.json.boundingVolume.region[0] + this.json.boundingVolume.region[2]) * 0.5,
+                                (this.json.boundingVolume.region[1] + this.json.boundingVolume.region[3]) * 0.5,
+                                (this.json.boundingVolume.region[4] + this.json.boundingVolume.region[5]) * 0.5,
+                                tempVec1);
+                            
+                            tempQuaternion.setFromUnitVectors(tempVec1.normalize(), upVector.normalize());
+                            self.applyQuaternion(tempQuaternion);
+                        }
+                        
+                        self.translateX(-tempSphere.center.x * self.scale.x);
+                        self.translateY(-tempSphere.center.y * self.scale.y);
+                        self.translateZ(-tempSphere.center.z * self.scale.z);
+
+                    }
                 });
             });
         }
@@ -133,7 +167,10 @@ class OGC3DTile extends THREE.Object3D {
                 this.boundingVolume = new OBB(this.json.boundingVolume.box);
             } else if (!!this.json.boundingVolume.region) {
                 const region = this.json.boundingVolume.region;
-                this.boundingVolume = new THREE.Box3(new THREE.Vector3(region[0], region[2], region[4]), new THREE.Vector3(region[1], region[3], region[5]));
+                this.transformWGS84ToCartesian(region[0], region[1], region[4], tempVec1);
+                this.transformWGS84ToCartesian(region[2], region[3], region[5], tempVec2);
+                tempVec1.lerp(tempVec2, 0.5);
+                this.boundingVolume = new THREE.Sphere(new THREE.Vector3(tempVec1.x, tempVec1.y, tempVec1.z), tempVec1.distanceTo(tempVec2));
             } else if (!!this.json.boundingVolume.sphere) {
                 const sphere = this.json.boundingVolume.sphere;
                 this.boundingVolume = new THREE.Sphere(new THREE.Vector3(sphere[0], sphere[2], -sphere[1]), sphere[3]);
@@ -518,39 +555,30 @@ class OGC3DTile extends THREE.Object3D {
             tempSphere.copy(this.boundingVolume);
             tempSphere.applyMatrix4(this.matrixWorld);
             if (!frustum.intersectsSphere(tempSphere)) return -1;
-        } else if (this.boundingVolume instanceof THREE.Box3) {
-            // Region
-            // Region not supported
-            //throw Error("Region bounding volume not supported");
-            return -1;
+        } else {
+            console.error("unsupported shape");
+            return -1
+
         }
 
         /////// return metric based on geometric error and distance
-        if (this.boundingVolume instanceof OBB || this.boundingVolume instanceof THREE.Sphere) {
-            // box
-            const distance = Math.max(0, camera.position.distanceTo(tempSphere.center) - tempSphere.radius);
-            if (distance == 0) {
-                return 0;
-            }
-            const scale = this.matrixWorld.getMaxScaleOnAxis();
-            this.renderer.getDrawingBufferSize(rendererSize);
-            let s = rendererSize.y;
-            let fov = camera.fov;
-            if(camera.aspect < 1){
-                fov *= camera.aspect;
-                s = rendererSize.x;
-            }
-
-            let lambda = 2.0 * Math.tan(0.5 * fov * 0.01745329251994329576923690768489) * distance;
-            
-            return (window.devicePixelRatio * 16 * lambda) / (s * scale);
 
-        } else if (this.boundingVolume instanceof THREE.Box3) {
-            // Region
-            // Region not supported
-            //throw Error("Region bounding volume not supported");
-            return -1;
+        const distance = Math.max(0, camera.position.distanceTo(tempSphere.center) - tempSphere.radius);
+        if (distance == 0) {
+            return 0;
         }
+        const scale = this.matrixWorld.getMaxScaleOnAxis();
+        this.renderer.getDrawingBufferSize(rendererSize);
+        let s = rendererSize.y;
+        let fov = camera.fov;
+        if (camera.aspect < 1) {
+            fov *= camera.aspect;
+            s = rendererSize.x;
+        }
+
+        let lambda = 2.0 * Math.tan(0.5 * fov * 0.01745329251994329576923690768489) * distance;
+
+        return (window.devicePixelRatio * 16 * lambda) / (s * scale);
     }
 
     getSiblings() {
@@ -583,8 +611,8 @@ class OGC3DTile extends THREE.Object3D {
             tempSphere.applyMatrix4(this.matrixWorld);
             //if (!frustum.intersectsSphere(tempSphere)) return -1;
         }
-        if (this.boundingVolume instanceof THREE.Box3) {
-            return -1; // region not supported
+        else {
+            console.error("unsupported shape")
         }
         return Math.max(0, camera.position.distanceTo(tempSphere.center) - tempSphere.radius);
     }
@@ -592,5 +620,21 @@ class OGC3DTile extends THREE.Object3D {
         this.geometricErrorMultiplier = geometricErrorMultiplier;
         this.childrenTiles.forEach(child => child.setGeometricErrorMultiplier(geometricErrorMultiplier));
     }
+
+    transformWGS84ToCartesian(lon, lat, h, sfct) {
+        const a = 6378137.0;
+        const e = 0.006694384442042;
+        const N = a / (Math.sqrt(1.0 - (e * Math.pow(Math.sin(lat), 2))));
+        const cosLat = Math.cos(lat);
+        const cosLon = Math.cos(lon);
+        const sinLat = Math.sin(lat);
+        const sinLon = Math.sin(lon);
+        const nPh = (N + h);
+        const x = nPh * cosLat * cosLon;
+        const y = nPh * cosLat * sinLon;
+        const z = (0.993305615557957 * N + h) * sinLat;
+
+        sfct.set(x, y, z);
+    }
 }
 export { OGC3DTile };

package/src/tileset/instanced/InstancedTile.js

@@ -4,8 +4,13 @@ import { v4 as uuidv4 } from "uuid";
 import * as path from "path-browserify";
 import * as _ from "lodash";
 
-const tempSphere = new THREE.Sphere(new THREE.Vector3(0, 0, 0, 1));
+const tempSphere = new THREE.Sphere(new THREE.Vector3(0, 0, 0), 1);
+const tempVec1 = new THREE.Vector3(0, 0, 0);
+const tempVec2 = new THREE.Vector3(0, 0, 0);
+const upVector = new THREE.Vector3(0, 1, 0);
 const rendererSize = new THREE.Vector2();
+const tempQuaternion = new THREE.Quaternion();
+const tempMatrix = new THREE.Matrix4();
 
 class InstancedTile extends THREE.Object3D {
 
@@ -23,7 +28,8 @@ class InstancedTile extends THREE.Object3D {
      *   meshCallback: function,
      *   cameraOnLoad: camera,
      *   parentTile: OGC3DTile,
-     *   onLoadCallback: function
+     *   onLoadCallback: function,
+     *   centerModel: Boolean
      * } properties 
      */
     constructor(properties) {
@@ -76,7 +82,35 @@ class InstancedTile extends THREE.Object3D {
                 //json = JSON.parse(JSON.stringify(json))
                 const p = path.dirname(url);
                 self.setup({ rootPath: p, json: json });
+                if (!!properties.centerModel) {
+                    const tempSphere = new THREE.Sphere();
+                    if (self.boundingVolume instanceof OBB) {
+                        // box
+                        tempSphere.copy(self.boundingVolume.sphere);
+                    } else if (self.boundingVolume instanceof THREE.Sphere) {
+                        //sphere
+                        tempSphere.copy(self.boundingVolume);
+                    }
+
+                    //tempSphere.applyMatrix4(self.matrixWorld);
+                    if (!!this.json.boundingVolume.region) {
+                        self.transformWGS84ToCartesian(
+                            (self.json.boundingVolume.region[0] + self.json.boundingVolume.region[2]) * 0.5,
+                            (self.json.boundingVolume.region[1] + self.json.boundingVolume.region[3]) * 0.5,
+                            (self.json.boundingVolume.region[4] + self.json.boundingVolume.region[5]) * 0.5,
+                            tempVec1);
+                        
+                        tempQuaternion.setFromUnitVectors(tempVec1.normalize(), upVector.normalize());
+                        self.master.applyQuaternion(tempQuaternion);
+                        self.master.updateWorldMatrix(false, false)
+                    }
+                    tempMatrix.makeTranslation(-tempSphere.center.x * self.scale.x, -tempSphere.center.y * self.scale.y, -tempSphere.center.z * self.scale.z);
+                    //self.master.applyMatrix4(tempMatrix);
+                    self.master.matrix.multiply(tempMatrix);
+		            self.master.matrix.decompose( self.master.position, self.master.quaternion, self.master.scale );
+                }
                 if (properties.onLoadCallback) properties.onLoadCallback(self);
+
             }
             self.tileLoader.get(self.abortController, properties.url, self.uuid, self);
 
@@ -132,7 +166,10 @@ class InstancedTile extends THREE.Object3D {
                 this.boundingVolume = new OBB(this.json.boundingVolume.box);
             } else if (!!this.json.boundingVolume.region) {
                 const region = this.json.boundingVolume.region;
-                this.boundingVolume = new THREE.Box3(new THREE.Vector3(region[0], region[2], region[4]), new THREE.Vector3(region[1], region[3], region[5]));
+                this.transformWGS84ToCartesian(region[0], region[1], region[4], tempVec1);
+                this.transformWGS84ToCartesian(region[2], region[3], region[5], tempVec2);
+                tempVec1.lerp(tempVec2, 0.5);
+                this.boundingVolume = new THREE.Sphere(new THREE.Vector3(tempVec1.x, tempVec1.y, tempVec1.z), tempVec1.distanceTo(tempVec2));
             } else if (!!this.json.boundingVolume.sphere) {
                 const sphere = this.json.boundingVolume.sphere;
                 this.boundingVolume = new THREE.Sphere(new THREE.Vector3(sphere[0], sphere[2], -sphere[1]), sphere[3]);
@@ -188,6 +225,8 @@ class InstancedTile extends THREE.Object3D {
 
             }
         }
+        self.matrixWorldNeedsUpdate = true;
+        self.updateWorldMatrix(true,true)
     }
 
     loadMesh(mesh) {
@@ -440,11 +479,9 @@ class InstancedTile extends THREE.Object3D {
             tempSphere.copy(this.boundingVolume);
             tempSphere.applyMatrix4(this.master.matrixWorld);
             if (!frustum.intersectsSphere(tempSphere)) return -1;
-        } else if (this.boundingVolume instanceof THREE.Box3) {
-            // Region
-            // Region not supported
-            //throw Error("Region bounding volume not supported");
-            return -1;
+        } else {
+            console.error("unsupported shape");
+            return -1
         }
 
         /////// return metric based on geometric error and distance
@@ -505,8 +542,8 @@ class InstancedTile extends THREE.Object3D {
             tempSphere.applyMatrix4(this.master.matrixWorld);
             //if (!frustum.intersectsSphere(tempSphere)) return -1;
         }
-        if (this.boundingVolume instanceof THREE.Box3) {
-            return -1; // region not supported
+        else {
+            console.error("unsupported shape")
         }
         return Math.max(0, camera.position.distanceTo(tempSphere.center) - tempSphere.radius);
     }
@@ -515,5 +552,21 @@ class InstancedTile extends THREE.Object3D {
         const self = this;
         return self.master.matrixWorld;
     }
+
+    transformWGS84ToCartesian(lon, lat, h, sfct) {
+        const a = 6378137.0;
+        const e = 0.006694384442042;
+        const N = a / (Math.sqrt(1.0 - (e * Math.pow(Math.sin(lat), 2))));
+        const cosLat = Math.cos(lat);
+        const cosLon = Math.cos(lon);
+        const sinLat = Math.sin(lat);
+        const sinLon = Math.sin(lon);
+        const nPh = (N + h);
+        const x = nPh * cosLat * cosLon;
+        const y = nPh * cosLat * sinLon;
+        const z = (0.993305615557957 * N + h) * sinLat;
+
+        sfct.set(x, y, z);
+    }
 }
 export { InstancedTile };

package/src/tileset/instanced/MeshTile.js

@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 import { InstancedMesh } from 'three';
 
+const t = new THREE.Matrix4();
 class MeshTile{
     constructor(scene){
         const self = this;
@@ -60,7 +61,12 @@ class MeshTile{
                 self.instancedTiles[i].meshContent = self.instancedMesh;
                 if(self.instancedTiles[i].materialVisibility && !!self.instancedTiles[i].meshContent){
                     self.instancedMesh.count++;
-                    self.instancedMesh.setMatrixAt(self.instancedMesh.count-1, self.reuseableMatrix.multiplyMatrices(self.instancedTiles[i].getWorldMatrix(), self.instancedMesh.baseMatrix) )
+                    self.reuseableMatrix.set(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
+                    self.reuseableMatrix.multiply(self.instancedTiles[i].master.matrixWorld);
+                    self.reuseableMatrix.multiply(self.instancedMesh.baseMatrix);
+                    self.instancedMesh.setMatrixAt(self.instancedMesh.count-1, self.reuseableMatrix );
+                    self.instancedMesh.getMatrixAt(0, t);
+                    console.log()
                 }
                 
             }