@jdultra/threedtiles 5.1.0 → 5.1.2

package/README.md

@@ -46,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.
@@ -88,11 +89,12 @@ 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",
     renderer: renderer,
-    onLoadCallback: tilese => {
-            console.log(tileset.boundingVolume);
+    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.
@@ -239,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.

package/package.json

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

package/src/decoder/B3DMDecoder.js

@@ -8,7 +8,7 @@ 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 legacyGLTFLoader = new LegacyGLTFLoader();
 
 function parseB3DM(arrayBuffer, meshCallback) {
@@ -63,7 +63,7 @@ function parseB3DM(arrayBuffer, meshCallback) {
 
 			const rtcCenter = featureTable.getData('RTC_CENTER');
 			if (rtcCenter) {
-				tempMatrix.makeTranslation(rtcCenter[0], rtcCenter[2], -rtcCenter[1])
+				tempMatrix.makeTranslation(rtcCenter[0], rtcCenter[1], rtcCenter[2])
 				model.scene.applyMatrix4(tempMatrix);
 			}
 			

package/src/index.js

@@ -32,7 +32,6 @@ const controller = initController(camera, domContainer);
 
 const composer = initComposer(scene, camera, renderer);
 
-
 animate();
 
 
@@ -128,24 +127,35 @@ function initTileset(scene, gem) {
         mesh.material.wireframe = false;
         mesh.material.side = THREE.DoubleSide;
         mesh.material.metalness = 0.0
-    }, 100)
+    }, 100);
+
     const ogc3DTile = new OGC3DTile({
         //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",
+        //url: "https://storage.googleapis.com/ogc-3d-tiles/berlinTileset/tileset.json",
         geometricErrorMultiplier: gem,
         loadOutsideView: false,
         tileLoader: tileLoader,
         //occlusionCullingService: occlusionCullingService,
         static: false,
         centerModel:true,
-        renderer: renderer
+        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);
+            }
+        } */
 
     });
     setIntervalAsync(function () {
         ogc3DTile.update(camera);
     }, 20);
+
+    
+
     //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)
     /* 
@@ -176,9 +186,9 @@ function initInstancedTilesets(instancedTileLoader) {
 
     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://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",
+        //url: "http://localhost:8081/tileset.json",
         geometricErrorMultiplier: 1.0,
         loadOutsideView: true,
         tileLoader: instancedTileLoader,

package/src/tileset/OGC3DTile.js

@@ -11,6 +11,11 @@ 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 zUpToYUp = new THREE.Matrix4();
+zUpToYUp.set(1,0,0,0,
+			0,0,-1,0,
+			0,1,0,0,
+			0,0,0,1);
 
 class OGC3DTile extends THREE.Object3D {
 
@@ -116,9 +121,8 @@ class OGC3DTile extends THREE.Object3D {
                                 (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);
-                            tempVec2.set(tempVec1.x, tempVec1.z, -tempVec1.y);
                             
-                            tempQuaternion.setFromUnitVectors(tempVec2.normalize(), upVector.normalize());
+                            tempQuaternion.setFromUnitVectors(tempVec1.normalize(), upVector.normalize());
                             self.applyQuaternion(tempQuaternion);
                         }
                         
@@ -171,7 +175,7 @@ class OGC3DTile extends THREE.Object3D {
                 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.z, -tempVec1.y), tempVec1.distanceTo(tempVec2));
+                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]);
@@ -216,10 +220,14 @@ class OGC3DTile extends THREE.Object3D {
             if (!!url) {
                 if (url.includes(".b3dm")) {
                     self.contentURL = url;
+                    const rotateToYUp = !!self.json.boundingVolume.region;
                     self.tileLoader.get(self.abortController, this.uuid, url, mesh => {
                         if (!!self.deleted) return;
                         mesh.traverse((o) => {
                             if (o.isMesh) {
+                                if(rotateToYUp){
+                                    o.applyMatrix4(zUpToYUp);
+                                }
                                 o.layers.disable(0);
                                 if (self.occlusionCullingService) {
                                     const position = o.geometry.attributes.position;

package/src/tileset/instanced/InstancedTile.js

@@ -99,9 +99,8 @@ class InstancedTile extends THREE.Object3D {
                             (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);
-                        tempVec2.set(tempVec1.x, tempVec1.z, -tempVec1.y);
                         
-                        tempQuaternion.setFromUnitVectors(tempVec2.normalize(), upVector.normalize());
+                        tempQuaternion.setFromUnitVectors(tempVec1.normalize(), upVector.normalize());
                         self.master.applyQuaternion(tempQuaternion);
                         self.master.updateWorldMatrix(false, false)
                     }
@@ -170,7 +169,7 @@ class InstancedTile extends THREE.Object3D {
                 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.z, -tempVec1.y), tempVec1.distanceTo(tempVec2));
+                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]);