@jdultra/threedtiles 4.0.2 → 4.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/index.html +3 -3
  2. package/package.json +1 -1
  3. package/src/index.js +36 -32
  4. package/src/tileset/OGC3DTile.js +2 -1
  5. package/src/tileset/instanced/InstancedTile.js +2 -1
package/index.html CHANGED
@@ -47,10 +47,10 @@
47
47
 
48
48
  <body>
49
49
  <div id="screen"></div>
50
- <div style="position: absolute; top: 1%; z-index: 100; right:1%; ">
51
- <input type="range" min="0.0" max="1.0" value="1.0", step="0.001" class="slider" id="lodMultiplier" >
50
+ <!-- <div style="position: absolute; top: 1%; z-index: 100; right:1%; ">
51
+ <input type="range" min="0.0" max="1.0" value="0.5", step="0.001" class="slider" id="lodMultiplier" >
52
52
  <p style="color: #0439aa;">LOD multiplier: <span id="multiplierValue"></span></p>
53
- </div>
53
+ </div> -->
54
54
  </body>
55
55
 
56
56
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jdultra/threedtiles",
3
- "version": "4.0.2",
3
+ "version": "4.0.3",
4
4
  "description": "An OGC 3DTiles viewer for Three.js",
5
5
  "main": "tileset.js",
6
6
  "scripts": {
package/src/index.js CHANGED
@@ -70,9 +70,9 @@ function initScene() {
70
70
  const scene = new THREE.Scene();
71
71
  scene.matrixAutoUpdate = false;
72
72
  scene.background = new THREE.Color(0x000000);
73
- scene.add(new THREE.AmbientLight(0xFFFFFF, 0.2));
73
+ scene.add(new THREE.AmbientLight(0xFFFFFF, 1.0));
74
74
 
75
- const light = new THREE.PointLight(0xbbbbff, 2, 5000);
75
+ /*const light = new THREE.PointLight(0xbbbbff, 2, 5000);
76
76
  const sphere = new THREE.SphereGeometry(2, 16, 8);
77
77
  light.add(new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0xbbbbff })));
78
78
  scene.add(light);
@@ -83,7 +83,7 @@ function initScene() {
83
83
  const sphere2 = new THREE.SphereGeometry(2, 16, 8);
84
84
  light2.add(new THREE.Mesh(sphere2, new THREE.MeshBasicMaterial({ color: 0xffbbbb })));
85
85
  scene.add(light2);
86
- light2.position.set(200, 100, -100);
86
+ light2.position.set(200, 100, -100);*/
87
87
 
88
88
  scene.matrixWorldAutoUpdate = true;
89
89
  return scene;
@@ -132,8 +132,8 @@ function initStats(dom) {
132
132
 
133
133
 
134
134
  function initCamera() {
135
- const camera = new THREE.PerspectiveCamera(40, window.offsetWidth / window.offsetHeight, 1, 100000);
136
- camera.position.set(100, 10, 100);
135
+ const camera = new THREE.PerspectiveCamera(70, window.offsetWidth / window.offsetHeight, 1.0, 100000);
136
+ camera.position.set(-800, 800, 800);
137
137
  camera.matrixAutoUpdate = true;
138
138
  return camera;
139
139
  }
@@ -143,12 +143,14 @@ function initTileset(scene) {
143
143
  const tileLoader = new TileLoader(mesh => {
144
144
  //// Insert code to be called on every newly decoded mesh e.g.:
145
145
  mesh.material.wireframe = false;
146
- mesh.material.side = THREE.FrontSide;
146
+ mesh.material.side = THREE.DoubleSide;
147
147
  }, 1000)
148
148
  const ogc3DTile = new OGC3DTile({
149
+ //url: "http://localhost:8080/tileset.json",
149
150
  //url: "https://storage.googleapis.com/ogc-3d-tiles/droneship/tileset.json",
150
151
  url: "https://storage.googleapis.com/ogc-3d-tiles/berlinTileset/tileset.json",
151
- geometricErrorMultiplier: 0.1,
152
+ //url: "https://s3.eu-central-2.wasabisys.com/construkted-assets-eu/ands2ty8orz/tileset.json",
153
+ geometricErrorMultiplier: 0.01,
152
154
  loadOutsideView: false,
153
155
  tileLoader: tileLoader,
154
156
  //occlusionCullingService: occlusionCullingService,
@@ -161,6 +163,7 @@ function initTileset(scene) {
161
163
 
162
164
  //// The OGC3DTile object is a threejs Object3D so you may do all the usual opperations like transformations e.g.:
163
165
  ogc3DTile.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * -0.5) // Z-UP to Y-UP
166
+ //ogc3DTile.scale.set(10.0,10.0,10.0)
164
167
  //// If the OGC3DTile object is marked as "static" (constructorParameter), these operations will not work.
165
168
 
166
169
 
@@ -205,28 +208,29 @@ function createInstancedTileLoader(scene) {
205
208
  return new InstancedTileLoader(scene, mesh => {
206
209
  //// Insert code to be called on every newly decoded mesh e.g.:
207
210
  mesh.material.wireframe = false;
208
- mesh.material.side = THREE.FrontSide;
209
- }, 1000, 1000);
211
+ mesh.material.side = THREE.DoubleSide;
212
+ }, 1000, 125);
210
213
  }
211
214
  function initInstancedTilesets(instancedTileLoader) {
212
215
 
213
216
  const instancedTilesets = [];
214
217
 
215
- for (let x = 0; x < 10; x++) {
216
- for (let y = 0; y < 10; y++) {
217
- for (let z = 0; z < 10; z++) {
218
+ for (let x = 0; x < 5; x++) {
219
+ for (let y = 0; y < 5; y++) {
220
+ for (let z = 0; z < 5; z++) {
218
221
  const tileset = new InstancedOGC3DTile({
219
- url: "https://storage.googleapis.com/ogc-3d-tiles/droneship/tileset.json",
222
+ //url: "https://storage.googleapis.com/ogc-3d-tiles/droneship/tileset.json",
223
+ url: "https://storage.googleapis.com/ogc-3d-tiles/berlinTileset/tileset.json",
220
224
  //url: "http://localhost:8080/tileset.json",
221
- geometricErrorMultiplier: 0.5,
222
- loadOutsideView: false,
225
+ geometricErrorMultiplier: 0.001,
226
+ loadOutsideView: true,
223
227
  tileLoader: instancedTileLoader,
224
228
  static: false,
225
229
  });
226
- tileset.rotateOnAxis(new THREE.Vector3(0, 0, 1), 50 * z)
227
- tileset.translateOnAxis(new THREE.Vector3(1, 0, 0), 50 * x)
228
- tileset.translateOnAxis(new THREE.Vector3(0, 1, 0), 50 * y)
229
- tileset.translateOnAxis(new THREE.Vector3(0, 0, 1), 50 * z)
230
+ tileset.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * -0.5) // Z-UP to Y-UP
231
+ tileset.translateOnAxis(new THREE.Vector3(1, 0, 0), 3500 * x)
232
+ tileset.translateOnAxis(new THREE.Vector3(0, 1, 0), 3500 * y)
233
+ //tileset.translateOnAxis(new THREE.Vector3(0, 0, 1), 50 * z)
230
234
  scene.add(tileset);
231
235
  instancedTilesets.push(tileset);
232
236
 
@@ -234,19 +238,19 @@ function initInstancedTilesets(instancedTileLoader) {
234
238
  }
235
239
  }
236
240
  }
237
-
238
- idleCallback();
239
-
240
- function idleCallback() {
241
- instancedTilesets.forEach(tileset=>{
242
- tileset.update(camera);
243
- })
244
- setTimeout(() => {
245
- window.requestIdleCallback(idleCallback, { timeout: 50 })
246
- }, 20)
247
-
241
+ function now() {
242
+ return (typeof performance === 'undefined' ? Date : performance).now(); // see #10732
248
243
  }
249
- initLODMultiplierSlider(instancedTilesets);
244
+ let updateIndex = 0;
245
+ setInterval(() => {
246
+ let startTime = now();
247
+ do{
248
+ instancedTilesets[updateIndex].update(camera);
249
+ updateIndex= (updateIndex+1)%instancedTilesets.length;
250
+ }while(updateIndex < instancedTilesets.length && now()-startTime<4);
251
+ },50);
252
+
253
+ //initLODMultiplierSlider(instancedTilesets);
250
254
  }
251
255
 
252
256
  function initLODMultiplierSlider(instancedTilesets) {
@@ -256,7 +260,7 @@ function initLODMultiplierSlider(instancedTilesets) {
256
260
 
257
261
  slider.oninput = () => {
258
262
  instancedTilesets.forEach(tileset => {
259
- tileset.setGeometricErrorMultiplier(slider.value)
263
+ tileset.setGeometricErrorMultiplier(slider.value*0.1)
260
264
  })
261
265
  output.innerHTML = slider.value;
262
266
  }
package/src/tileset/OGC3DTile.js CHANGED
@@ -530,7 +530,8 @@ class OGC3DTile extends THREE.Object3D {
530
530
  return 0;
531
531
  }
532
532
  const scale = this.matrixWorld.getMaxScaleOnAxis();
533
- return (((distance / Math.pow(scale, 2)) / 100) / this.geometricErrorMultiplier);
533
+ return Math.pow(distance, 2) /(this.geometricErrorMultiplier*this.geometricError*Math.pow(scale,2.0)*35);
534
+ //return (((distance / Math.pow(scale, 2)) / 100) / this.geometricErrorMultiplier);
534
535
  } else if (this.boundingVolume instanceof THREE.Box3) {
535
536
  // Region
536
537
  // Region not supported
package/src/tileset/instanced/InstancedTile.js CHANGED
@@ -457,7 +457,8 @@ class InstancedTile extends THREE.Object3D {
457
457
  return 0;
458
458
  }
459
459
  const scale = this.master.matrixWorld.getMaxScaleOnAxis();
460
- return (((distance / Math.pow(scale, 2)) / 100) / this.master.geometricErrorMultiplier);
460
+ //return (((distance / Math.pow(scale, 2)) / 100) / this.master.geometricErrorMultiplier);
461
+ return Math.pow(distance, 2) /(this.master.geometricErrorMultiplier*this.geometricError*Math.pow(scale,2.0)*35);
461
462
  } else if (this.boundingVolume instanceof THREE.Box3) {
462
463
  // Region
463
464
  // Region not supported