@jdultra/threedtiles 3.1.5 → 3.2.0
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.
- package/README.md +1 -1
- package/index.html +1 -2
- package/package.json +2 -2
- package/src/decoder/B3DMDecoder.js +5 -4
- package/src/index.js +14 -9
- package/src/tileset/OGC3DTile.js +1 -1
- package/src/tileset/TileLoader.js +24 -15
- package/manifest.json +0 -4
package/README.md
CHANGED
package/index.html
CHANGED
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="utf-8" />
|
|
6
6
|
<title>Three 3DTiles viewer sample</title>
|
|
7
|
-
<link rel="manifest" href="manifest.json">
|
|
8
7
|
<style>
|
|
9
8
|
.slidecontainer {
|
|
10
9
|
width: 100%;
|
|
@@ -49,7 +48,7 @@
|
|
|
49
48
|
<body>
|
|
50
49
|
<div id="screen"></div>
|
|
51
50
|
<div style="position: absolute; top: 1%; z-index: 100; right:1%; ">
|
|
52
|
-
<input type="range" min="0.1" max="2" value="1.0", step="0.
|
|
51
|
+
<input type="range" min="0.1" max="2" value="1.0", step="0.001" class="slider" id="lodMultiplier" >
|
|
53
52
|
<p style="color: #0439aa;">LOD multiplier: <span id="multiplierValue"></span></p>
|
|
54
53
|
</div>
|
|
55
54
|
<div style="position: absolute; bottom: 1%; z-index: 100;">
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jdultra/threedtiles",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.2.0",
|
|
4
4
|
"description": "An OGC 3DTiles viewer for Three.js",
|
|
5
5
|
"main": "tileset.js",
|
|
6
6
|
"scripts": {
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"path-browserify": "^1.0.1",
|
|
32
32
|
"regenerator-runtime": ">=0.13.7",
|
|
33
33
|
"set-interval-async": "^2.0.3",
|
|
34
|
-
"three": "0.
|
|
34
|
+
"three": "0.140.2",
|
|
35
35
|
"uuid": "^8.3.2"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
|
|
2
2
|
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
|
|
3
|
-
import { LegacyGLTFLoader } from './LegacyGLTFLoader.js';
|
|
3
|
+
//import { LegacyGLTFLoader } from './LegacyGLTFLoader.js';
|
|
4
4
|
|
|
5
5
|
const gltfLoader = new GLTFLoader();
|
|
6
6
|
const dracoLoader = new DRACOLoader();
|
|
7
7
|
dracoLoader.setDecoderPath( 'https://www.gstatic.com/draco/versioned/decoders/1.4.3/' );
|
|
8
8
|
gltfLoader.setDRACOLoader( dracoLoader );
|
|
9
|
-
const legacyGLTFLoader = new LegacyGLTFLoader();
|
|
9
|
+
//const legacyGLTFLoader = new LegacyGLTFLoader();
|
|
10
10
|
const B3DMDecoder = {
|
|
11
11
|
parseB3DM: (arrayBuffer, meshCallback) => {
|
|
12
12
|
const dataView = new DataView(arrayBuffer);
|
|
@@ -64,7 +64,8 @@ const B3DMDecoder = {
|
|
|
64
64
|
});
|
|
65
65
|
resolve(model.scene);
|
|
66
66
|
}, error=>{
|
|
67
|
-
|
|
67
|
+
console.error(error);
|
|
68
|
+
/* legacyGLTFLoader.parse(gltfBuffer, model => {
|
|
68
69
|
|
|
69
70
|
////TODO
|
|
70
71
|
//model.batchTable = b3dm.batchTable;
|
|
@@ -83,7 +84,7 @@ const B3DMDecoder = {
|
|
|
83
84
|
}
|
|
84
85
|
});
|
|
85
86
|
resolve(model.scene);
|
|
86
|
-
}, null);
|
|
87
|
+
}, null); */
|
|
87
88
|
});
|
|
88
89
|
});
|
|
89
90
|
}
|
package/src/index.js
CHANGED
|
@@ -21,8 +21,10 @@ animate();
|
|
|
21
21
|
|
|
22
22
|
function initScene() {
|
|
23
23
|
const scene = new THREE.Scene();
|
|
24
|
-
scene.background = new THREE.Color(
|
|
25
|
-
scene.add(new THREE.AmbientLight(0xFFFFFF,
|
|
24
|
+
scene.background = new THREE.Color(0xaaffcc);
|
|
25
|
+
scene.add(new THREE.AmbientLight(0xFFFFFF, 0.5));
|
|
26
|
+
const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
|
|
27
|
+
scene.add( directionalLight );
|
|
26
28
|
return scene;
|
|
27
29
|
}
|
|
28
30
|
|
|
@@ -70,7 +72,7 @@ function initStats(dom) {
|
|
|
70
72
|
|
|
71
73
|
function initCamera() {
|
|
72
74
|
const camera = new THREE.PerspectiveCamera(70, window.offsetWidth / window.offsetHeight, 1, 10000);
|
|
73
|
-
camera.position.set(
|
|
75
|
+
camera.position.set(20, 10, 20);
|
|
74
76
|
|
|
75
77
|
return camera;
|
|
76
78
|
}
|
|
@@ -79,11 +81,13 @@ function initTileset(scene) {
|
|
|
79
81
|
|
|
80
82
|
const ogc3DTile = new OGC3DTile({
|
|
81
83
|
url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tiledWithSkirts/tileset.json",
|
|
82
|
-
|
|
84
|
+
//url: "http://localhost:8080/tileset.json",
|
|
85
|
+
geometricErrorMultiplier: 1.0,
|
|
83
86
|
loadOutsideView: true,
|
|
84
87
|
tileLoader: new TileLoader(mesh => {
|
|
85
88
|
//// Insert code to be called on every newly decoded mesh e.g.:
|
|
86
|
-
mesh.material.wireframe =
|
|
89
|
+
//mesh.material.wireframe = true;
|
|
90
|
+
//mesh.material = new THREE.MeshBasicMaterial({color:new THREE.Color("rgb("+Math.floor(Math.random()*256)+", "+Math.floor(Math.random()*256)+", "+Math.floor(Math.random()*256)+")")})
|
|
87
91
|
mesh.material.side = THREE.DoubleSide;
|
|
88
92
|
}, 1000),
|
|
89
93
|
onLoadCallback: tileset => {
|
|
@@ -92,19 +96,20 @@ function initTileset(scene) {
|
|
|
92
96
|
});
|
|
93
97
|
|
|
94
98
|
|
|
99
|
+
|
|
95
100
|
//// The OGC3DTile object is a threejs Object3D so you may do all the usual opperations like transformations e.g.:
|
|
96
101
|
//ogc3DTile.translateOnAxis(new THREE.Vector3(0,1,0), -10)
|
|
97
102
|
//ogc3DTile.translateOnAxis(new THREE.Vector3(1,0,0), -65)
|
|
98
103
|
//ogc3DTile.translateOnAxis(new THREE.Vector3(0,0,1), -80)
|
|
99
|
-
|
|
100
|
-
//ogc3DTile.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI *
|
|
104
|
+
ogc3DTile.scale.set(1,1,1);
|
|
105
|
+
//ogc3DTile.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI * 0.5) // Z-UP to Y-UP
|
|
101
106
|
// ogc3DTile.translateOnAxis(new THREE.Vector3(1,0,0), -16.5)
|
|
102
107
|
// ogc3DTile.translateOnAxis(new THREE.Vector3(0,1,0), 0)
|
|
103
108
|
// ogc3DTile.translateOnAxis(new THREE.Vector3(0,0,1), -9.5)
|
|
104
109
|
//// 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
|
|
105
110
|
|
|
106
111
|
|
|
107
|
-
|
|
112
|
+
|
|
108
113
|
var interval;
|
|
109
114
|
document.addEventListener('keyup', (e) => {
|
|
110
115
|
console.log(camera.position)
|
|
@@ -141,7 +146,7 @@ function initLODMultiplierSlider(tileset) {
|
|
|
141
146
|
function initController(camera, dom) {
|
|
142
147
|
const controller = new OrbitControls(camera, dom);
|
|
143
148
|
|
|
144
|
-
controller.target.set(
|
|
149
|
+
controller.target.set(0, 0, 0);
|
|
145
150
|
controller.minDistance = 1;
|
|
146
151
|
controller.maxDistance = 5000;
|
|
147
152
|
controller.update();
|
package/src/tileset/OGC3DTile.js
CHANGED
|
@@ -174,7 +174,7 @@ class OGC3DTile extends THREE.Object3D {
|
|
|
174
174
|
self.meshContent = mesh;
|
|
175
175
|
}, !self.cameraOnLoad ? () => 0 : () => {
|
|
176
176
|
return self.calculateDistanceToCamera(self.cameraOnLoad);
|
|
177
|
-
}, () => self.getSiblings(), self.level
|
|
177
|
+
}, () => self.getSiblings(), self.level);
|
|
178
178
|
} else if (url.includes(".json")) {
|
|
179
179
|
self.tileLoader.get(this.uuid, url, json => {
|
|
180
180
|
if (!!self.deleted) return;
|
|
@@ -6,20 +6,24 @@ const ready = [];
|
|
|
6
6
|
const downloads = [];
|
|
7
7
|
const nextReady = [];
|
|
8
8
|
const nextDownloads = [];
|
|
9
|
+
let concurentDownloads = 0;
|
|
9
10
|
|
|
10
11
|
function scheduleDownload(f) {
|
|
11
12
|
downloads.unshift(f);
|
|
12
13
|
}
|
|
13
14
|
function download() {
|
|
14
|
-
if
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
nextDownload.
|
|
15
|
+
if(concurentDownloads<10){
|
|
16
|
+
if (nextDownloads.length == 0) {
|
|
17
|
+
getNextDownloads();
|
|
18
|
+
if (nextDownloads.length == 0) return;
|
|
19
|
+
}
|
|
20
|
+
const nextDownload = nextDownloads.shift();
|
|
21
|
+
if (!!nextDownload && nextDownload.shouldDoDownload()) {
|
|
22
|
+
nextDownload.doDownload();
|
|
23
|
+
}
|
|
21
24
|
}
|
|
22
|
-
|
|
25
|
+
|
|
26
|
+
return;
|
|
23
27
|
}
|
|
24
28
|
function meshReceived(cache, register, key, distanceFunction, getSiblings, level, uuid) {
|
|
25
29
|
ready.unshift([cache, register, key, distanceFunction, getSiblings, level, uuid]);
|
|
@@ -117,11 +121,12 @@ function getNextReady() {
|
|
|
117
121
|
}
|
|
118
122
|
}
|
|
119
123
|
setIntervalAsync(()=>{
|
|
120
|
-
|
|
124
|
+
download();
|
|
125
|
+
/* const start = Date.now();
|
|
121
126
|
let uploaded = 0;
|
|
122
127
|
do{
|
|
123
128
|
uploaded = download();
|
|
124
|
-
}while(uploaded > 0 && (Date.now() - start)<= 2 )
|
|
129
|
+
}while(uploaded > 0 && (Date.now() - start)<= 2 ) */
|
|
125
130
|
|
|
126
131
|
},10);
|
|
127
132
|
setIntervalAsync(()=>{
|
|
@@ -129,7 +134,7 @@ setIntervalAsync(()=>{
|
|
|
129
134
|
let loaded = 0;
|
|
130
135
|
do{
|
|
131
136
|
loaded = loadBatch();
|
|
132
|
-
}while(loaded > 0 && (Date.now() - start)<=
|
|
137
|
+
}while(loaded > 0 && (Date.now() - start)<= 0 )
|
|
133
138
|
|
|
134
139
|
},10);
|
|
135
140
|
|
|
@@ -141,7 +146,7 @@ class TileLoader {
|
|
|
141
146
|
this.register = {};
|
|
142
147
|
}
|
|
143
148
|
|
|
144
|
-
get(tileIdentifier, path, callback, distanceFunction, getSiblings, level
|
|
149
|
+
get(tileIdentifier, path, callback, distanceFunction, getSiblings, level) {
|
|
145
150
|
const self = this;
|
|
146
151
|
const key = simplifyPath(path);
|
|
147
152
|
|
|
@@ -160,12 +165,14 @@ class TileLoader {
|
|
|
160
165
|
|
|
161
166
|
const cachedObject = self.cache.get(key);
|
|
162
167
|
if (!!cachedObject) {
|
|
163
|
-
meshReceived(self.cache, self.register, key, distanceFunction, getSiblings, level,
|
|
168
|
+
meshReceived(self.cache, self.register, key, distanceFunction, getSiblings, level, tileIdentifier);
|
|
164
169
|
} else if (Object.keys(self.register[key]).length == 1) {
|
|
165
170
|
let downloadFunction;
|
|
166
171
|
if (path.includes(".b3dm")) {
|
|
167
172
|
downloadFunction = () => {
|
|
173
|
+
concurentDownloads++;
|
|
168
174
|
fetch(path).then(result => {
|
|
175
|
+
concurentDownloads--;
|
|
169
176
|
if (!result.ok) {
|
|
170
177
|
console.error("could not load tile with path : " + path)
|
|
171
178
|
throw new Error(`couldn't load "${path}". Request failed with status ${result.status} : ${result.statusText}`);
|
|
@@ -173,14 +180,16 @@ class TileLoader {
|
|
|
173
180
|
result.arrayBuffer().then(buffer => B3DMDecoder.parseB3DM(buffer, self.meshCallback)).then(mesh => {
|
|
174
181
|
self.cache.put(key, mesh);
|
|
175
182
|
self.checkSize();
|
|
176
|
-
meshReceived(self.cache, self.register, key, distanceFunction, getSiblings, level,
|
|
183
|
+
meshReceived(self.cache, self.register, key, distanceFunction, getSiblings, level, tileIdentifier);
|
|
177
184
|
});
|
|
178
185
|
|
|
179
186
|
});
|
|
180
187
|
}
|
|
181
188
|
}else if (path.includes(".json")) {
|
|
182
189
|
downloadFunction = () => {
|
|
190
|
+
concurentDownloads++;
|
|
183
191
|
fetch(path).then(result => {
|
|
192
|
+
concurentDownloads--;
|
|
184
193
|
if (!result.ok) {
|
|
185
194
|
console.error("could not load tile with path : " + path)
|
|
186
195
|
throw new Error(`couldn't load "${path}". Request failed with status ${result.status} : ${result.statusText}`);
|
|
@@ -201,7 +210,7 @@ class TileLoader {
|
|
|
201
210
|
"distanceFunction": distanceFunction,
|
|
202
211
|
"getSiblings": getSiblings,
|
|
203
212
|
"level": level,
|
|
204
|
-
"uuid":
|
|
213
|
+
"uuid": tileIdentifier
|
|
205
214
|
})
|
|
206
215
|
}
|
|
207
216
|
}
|
package/manifest.json
DELETED