@jdultra/threedtiles 6.0.3 → 7.0.0

package/README.md

@@ -6,12 +6,16 @@ The fastest 3DTiles viewer for three.js
 
 [Photogrametry (OBJ conversion)](https://ebeaufay.github.io/ThreedTilesViewer.github.io/)
 
+[Point cloud vs Mesh](https://www.jdultra.com/pointmeshing/index.html)
+
 [PBR material (GlTF conversion)](https://www.jdultra.com/pbr/)
 
 [Occlusion culling (IFC conversion)](https://www.jdultra.com/occlusion/index.html)
 
 [Instanced Tileset (pilot a swarm of highly detailed spaceships)](https://www.jdultra.com/instanced/index.html)
 
+NPM dependency: "@jdultra/threedtiles": "^6.0.4"
+
 Adding a tileset to a scene is as easy as :
 
 ```
@@ -44,6 +48,13 @@ Unzip and run :
 
 > npm run dev
 
+## Mesh to 3DTiles Converter
+
+If you need to convert meshes to 3DTiles, from small assets to gigabytes of data, contact me for a trial on UltraMesh tool.
+It works for all types of meshes: photogrametry, BIM, colored or textured meshes with a single texture atlas or many individual textures.
+There's support for OBJ, IFC and glTF meshes and las/laz point clouds.
+I aim for optimal quality in terms of mesh, texture and tileset structure for optimal streaming.
+Contact: emeric.beaufays@jdultra.com
 
 ## Features
 
@@ -339,17 +350,3 @@ setInterval(() => {
 ```
 
 window#requestIdleCallback is also a good option but the rate of updates becomes slightly unpredictable.
-
-# Projects that use this library
-https://github.com/ebeaufay/UltraGlobe allows displaying a globe with multi resolution imagery, elevation and 3DTiles.
-
-If you have a project that stems from this code. I'd love to link to it here and I'm always open to implementing extra features.
-Contact: emeric.beaufays@jdultra.com
-
-
-# Mesh to 3DTiles Converter
-
-I also have code to convert meshes to 3DTiles with no limit to the size of the dataset relative to faces or textures.
-It works for all types of meshes: photogrametry, BIM, colored or textured meshes with a single texture atlas or many individual textures. 
-The code is not open source but feel free to contact me for a trial.
-Contact: emeric.beaufays@jdultra.com

package/package.json

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

package/src/decoder/B3DMDecoder.js

@@ -26,8 +26,8 @@ function parseB3DM(arrayBuffer, meshCallback, geometricError, zUpToYUp) {
 		String.fromCharCode(dataView.getUint8(3));
 	console.assert(magic === 'b3dm');
 
-	const version = dataView.getUint32(4, true);
-	console.assert(version === 1);
+	//const version = dataView.getUint32(4, true);
+	//console.assert(version === 1);
 
 	const byteLength = dataView.getUint32(8, true);
 	console.assert(byteLength === arrayBuffer.byteLength);
@@ -70,6 +70,13 @@ function parseB3DM(arrayBuffer, meshCallback, geometricError, zUpToYUp) {
 			if (rtcCenter) {
 				tempMatrix.makeTranslation(rtcCenter[0], rtcCenter[1], rtcCenter[2])
 				model.scene.applyMatrix4(tempMatrix);
+			}else if(!!model.userData.gltfExtensions.CESIUM_RTC){
+				tempMatrix.makeTranslation(model.userData.gltfExtensions.CESIUM_RTC.center[0], model.userData.gltfExtensions.CESIUM_RTC.center[1], model.userData.gltfExtensions.CESIUM_RTC.center[2])
+				model.scene.applyMatrix4(tempMatrix);
+			}
+			
+			if(!zUpToYUp){
+				model.scene.applyMatrix4(zUpToYUpMatrix);
 			}
 			
 			model.scene.traverse((o) => {

package/src/geometry/obb.js

@@ -2,10 +2,10 @@ import { Matrix3, Sphere, Vector3 } from "three";
 
 class OBB {
     constructor(values) {
-        this.center = new Vector3(values[0], values[2], -values[1]);
-        var e1 = new Vector3(values[3], values[5], values[4]);
-        var e2 = new Vector3(values[6], values[8], values[7]);
-        var e3 = new Vector3(values[9], values[11], values[10]);
+        this.center = new Vector3(values[0], values[1], values[2]);
+        var e1 = new Vector3(values[3], values[4], values[4]);
+        var e2 = new Vector3(values[6], values[7], values[8]);
+        var e3 = new Vector3(values[9], values[10], values[11]);
 
         this.halfWidth = e1.length();
         this.halfHeight = e2.length();

package/src/index.js

@@ -8,11 +8,10 @@ import { setIntervalAsync } from 'set-interval-async/dynamic';
 import { OcclusionCullingService } from "./tileset/OcclusionCullingService";
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
 import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
-import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 
 import { InstancedOGC3DTile } from "./tileset/instanced/InstancedOGC3DTile.js"
 import { InstancedTileLoader } from "./tileset/instanced/InstancedTileLoader.js"
+import { Sky } from 'three/addons/objects/Sky.js';
 
 
 const occlusionCullingService = new OcclusionCullingService();
@@ -23,7 +22,8 @@ const domContainer = initDomContainer("screen");
 const camera = initCamera(domContainer.offsetWidth, domContainer.offsetHeight);
 const stats = initStats(domContainer);
 const renderer = initRenderer(camera, domContainer);
-const ogc3DTiles = initTileset(scene, 1.0);
+const ogc3DTiles = initTileset(scene, 2.0);
+
 
 //const instancedTileLoader = createInstancedTileLoader(scene);
 //initInstancedTilesets(instancedTileLoader);
@@ -34,7 +34,41 @@ const composer = initComposer(scene, camera, renderer);
 
 animate();
 
+let sky, sun;
+initSky();
+function initSky() {
+    sky = new Sky();
+    sky.scale.setScalar(450000);
+    scene.add(sky);
+
+    sun = new THREE.Vector3();
+
+    const effectController = {
+        turbidity: 10,
+        rayleigh: 1,
+        mieCoefficient: 0.005,
+        mieDirectionalG: 0.3,
+        elevation: 5,
+        azimuth: 40,
+        exposure: renderer.toneMappingExposure
+    };
+
+    const uniforms = sky.material.uniforms;
+    uniforms['turbidity'].value = effectController.turbidity;
+    uniforms['rayleigh'].value = effectController.rayleigh;
+    uniforms['mieCoefficient'].value = effectController.mieCoefficient;
+    uniforms['mieDirectionalG'].value = effectController.mieDirectionalG;
+
+    const phi = THREE.MathUtils.degToRad(90 - effectController.elevation);
+    const theta = THREE.MathUtils.degToRad(effectController.azimuth);
+
+    sun.setFromSphericalCoords(1, phi, theta);
 
+    uniforms['sunPosition'].value.copy(sun);
+
+    renderer.toneMappingExposure = effectController.exposure;
+    renderer.render(scene, camera);
+}
 function initComposer(scene, camera, renderer) {
     const renderScene = new RenderPass(scene, camera);
     //const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 0.4, 0.5, 0);
@@ -49,9 +83,14 @@ function initScene() {
     const scene = new THREE.Scene();
     scene.matrixAutoUpdate = false;
     //scene.matrixWorldAutoUpdate = false;
-    scene.background = new THREE.Color(0x888888);
-    scene.add(new THREE.AmbientLight(0xFFFFFF, 1.0));
-    
+    scene.background = new THREE.Color(0xE5E3E4);
+    const dirLight = new THREE.DirectionalLight(0xFFFFFF, 1.0);
+    dirLight.position.set(100,100,100);
+    dirLight.lookAt(new THREE.Vector3(0,0,0));
+    //scene.add(new THREE.AmbientLight(0xFFFFFF, 1.0));
+
+    scene.add(dirLight)
+
     /* 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 })));
@@ -111,14 +150,7 @@ function initStats(dom) {
 }
 
 
-function initCamera(width, height) {
-    const camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 1000);
-    camera.position.set(-0.5,-0.7,10);
-    camera.lookAt(0,0,0);
 
-    camera.matrixAutoUpdate = true;
-    return camera;
-}
 
 function initTileset(scene, gem) {
 
@@ -126,32 +158,32 @@ function initTileset(scene, gem) {
         //// 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
-    }, points=>{
-        points.material.size = Math.min(1.0,0.5*Math.sqrt(points.geometricError));
+        //mesh.material.metalness = 0.0
+    }, points => {
+        points.material.size = Math.min(1.0, 0.5 * Math.sqrt(points.geometricError));
         points.material.sizeAttenuation = true;
     });
 
     const ogc3DTile = new OGC3DTile({
-        url: "https://storage.googleapis.com/ogc-3d-tiles/baltimore/tileset.json",
-        //url: "http://localhost:8080/tileset.json",
         //url: "https://storage.googleapis.com/ogc-3d-tiles/berlinTileset/tileset.json",
+        //url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tiledWithSkirts/tileset.json",
+        url: "http://localhost:8080/tileset.json",
         geometricErrorMultiplier: 1,
-        loadOutsideView: false,
+        loadOutsideView: true,
         tileLoader: tileLoader,
         //occlusionCullingService: occlusionCullingService,
         static: false,
-        centerModel:true,
-        renderer: renderer,
-         
+        centerModel: true,
+        renderer: renderer
+
     });
     setIntervalAsync(function () {
         ogc3DTile.update(camera);
     }, 10);
 
-    
+    //ogc3DTile.scale.set(0.1,0.1,0.1)
 
-    //ogc3DTile.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * -0.5) // Z-UP to Y-UP
+    //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
@@ -181,13 +213,13 @@ function initInstancedTilesets(instancedTileLoader) {
 
 
     const tileset = new InstancedOGC3DTile({
-        url: "https://storage.googleapis.com/ogc-3d-tiles/berlinTileset/tileset.json",
-        //url: "http://localhost:8080/tileset.json",
+        //url: "https://storage.googleapis.com/ogc-3d-tiles/berlinTileset/tileset.json",
+        url: "http://localhost:8080/tileset.json",
         geometricErrorMultiplier: 0.1,
         loadOutsideView: true,
         tileLoader: instancedTileLoader,
         static: false,
-        centerModel:true,
+        centerModel: true,
         renderer: renderer
     });
     //tileset.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * -0.5) // Z-UP to Y-UP
@@ -227,15 +259,23 @@ function initLODMultiplierSlider(instancedTilesets) {
     }
 }
 
+function initCamera(width, height) {
+    const camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 20000);
+    camera.position.set(50, 50, 50);
+    camera.lookAt(0, 0, 0);
+
+    camera.matrixAutoUpdate = true;
+    return camera;
+}
 function initController(camera, dom) {
     const controller = new OrbitControls(camera, dom);
 
     //controller.target.set(4629210.73133627, 435359.7901640832, 4351492.357788198);
-    controller.target.set(0,0,0);
+    controller.target.set(0, 0, 0);
 
 
     controller.minDistance = 0.1;
-    controller.maxDistance = 1000;
+    controller.maxDistance = 10000;
     controller.update();
     return controller;
 }

package/src/tileset/OGC3DTile.js

@@ -9,7 +9,7 @@ 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 rendererSize = new THREE.Vector2(1000,1000);
 const tempQuaternion = new THREE.Quaternion();
 
 
@@ -90,7 +90,7 @@ class OGC3DTile extends THREE.Object3D {
         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
-
+        this.centerModel = properties.centerModel;
         this.abortController = new AbortController();
         this.layers.disable(0);
 
@@ -106,7 +106,7 @@ 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) {
+                    if (!!self.centerModel) {
                         const tempSphere = new THREE.Sphere();
                         if (self.boundingVolume instanceof OBB) {
                             // box
@@ -162,12 +162,14 @@ class OGC3DTile extends THREE.Object3D {
         } else {
             this.geometricError = properties.parentGeometricError;
         }
+
         // decode transform
-        if (!!this.json.transform) {
+        if (!!this.json.transform && !this.centerModel) {
             let mat = new THREE.Matrix4();
             mat.elements = this.json.transform;
             this.applyMatrix4(mat);
         }
+        
         // decode volume
         if (!!this.json.boundingVolume) {
             if (!!this.json.boundingVolume.box) {
@@ -180,7 +182,7 @@ class OGC3DTile extends THREE.Object3D {
                 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]);
+                this.boundingVolume = new THREE.Sphere(new THREE.Vector3(sphere[0], sphere[1], sphere[2]), sphere[3]);
             } else {
                 this.boundingVolume = properties.parentBoundingVolume;
             }
@@ -188,6 +190,8 @@ class OGC3DTile extends THREE.Object3D {
             this.boundingVolume = properties.parentBoundingVolume;
         }
 
+        
+
         if (!!this.json.content) { //if there is a content, json or otherwise, schedule it to be loaded 
             if (!!this.json.content.uri && this.json.content.uri.includes("json")) {
                 this.hasUnloadedJSONContent = true;
@@ -222,9 +226,7 @@ class OGC3DTile extends THREE.Object3D {
             if (!!url) {
                 if (url.includes(".b3dm") || url.includes(".glb") || url.includes(".gltf")) {
                     self.contentURL = url;
-                    if(!!self.json.boundingVolume.region){
-                        //self.applyMatrix4(zUpToYUp);
-                    }
+                    
                     self.tileLoader.get(self.abortController, this.uuid, url, mesh => {
                         if (!!self.deleted) return;
                         mesh.traverse((o) => {
@@ -423,7 +425,8 @@ class OGC3DTile extends THREE.Object3D {
                     cameraOnLoad: camera,
                     occlusionCullingService: self.occlusionCullingService,
                     renderer: self.renderer,
-                    static: self.static
+                    static: self.static,
+                    centerModel: false
                 });
                 self.childrenTiles.push(childTile);
                 self.add(childTile);
@@ -535,7 +538,7 @@ class OGC3DTile extends THREE.Object3D {
         }
         self.materialVisibility = visibility
         
-        self.meshDisplayed = false;
+        self.meshDisplayed = true;
         if (!!self.meshContent.traverse) {
             self.meshContent.traverse(function (element) {
                 if (element.material) setMeshVisibility(element, visibility);
@@ -582,7 +585,9 @@ class OGC3DTile extends THREE.Object3D {
             return 0;
         }
         const scale = this.matrixWorld.getMaxScaleOnAxis();
-        this.renderer.getDrawingBufferSize(rendererSize);
+        if(!!this.renderer){
+            this.renderer.getDrawingBufferSize(rendererSize);
+        }
         let s = rendererSize.y;
         let fov = camera.fov;
         if (camera.aspect < 1) {

package/src/tileset/instanced/InstancedTile.js

@@ -65,6 +65,7 @@ class InstancedTile extends THREE.Object3D {
         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
+        this.centerModel = properties.centerModel;
 
         this.deleted = false;
         this.abortController = new AbortController();
@@ -82,7 +83,7 @@ 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) {
+                if (!!self.centerModel) {
                     const tempSphere = new THREE.Sphere();
                     if (self.boundingVolume instanceof OBB) {
                         // box
@@ -155,7 +156,7 @@ class InstancedTile extends THREE.Object3D {
             this.geometricError = properties.parentGeometricError;
         }
         // decode transform
-        if (!!this.json.transform) {
+        if (!!this.json.transform && !this.centerModel) {
             let mat = new THREE.Matrix4();
             mat.elements = this.json.transform;
             this.master.applyMatrix4(mat);
@@ -374,7 +375,8 @@ class InstancedTile extends THREE.Object3D {
                     level: self.level + 1,
                     tileLoader: self.tileLoader,
                     cameraOnLoad: camera,
-                    master: self.master
+                    master: self.master,
+                    centerModel: false
                 });
                 self.childrenTiles.push(childTile);
                 //self.add(childTile);