@jdultra/threedtiles 3.1.4 → 3.1.5

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/README.md +2 -2
  2. package/index.html +43 -0
  3. package/package.json +1 -1
  4. package/src/index.js +25 -10
  5. package/src/tileset/OGC3DTile.js +7 -2
package/README.md CHANGED
@@ -4,8 +4,6 @@
4
4
 
5
5
  demo : https://ebeaufay.github.io/ThreedTilesViewer.github.io/
6
6
 
7
- Currently, the library is limmited to B3DM files.
8
-
9
7
  Adding a tileset to a scene is as easy as :
10
8
 
11
9
  ```
@@ -27,6 +25,8 @@ setInterval(function () {
27
25
  }, 200);
28
26
  ```
29
27
 
28
+ Currently, the library is limmited to B3DM files.
29
+
30
30
  ## Features
31
31
 
32
32
  - Handles nested tileset.json files which are loaded on the fly (a tileset.json may point to another tileset.json file as its child).
package/index.html CHANGED
@@ -5,10 +5,53 @@
5
5
  <meta charset="utf-8" />
6
6
  <title>Three 3DTiles viewer sample</title>
7
7
  <link rel="manifest" href="manifest.json">
8
+ <style>
9
+ .slidecontainer {
10
+ width: 100%;
11
+ }
12
+
13
+ .slider {
14
+ -webkit-appearance: none;
15
+ width: 100%;
16
+ height: 15px;
17
+ border-radius: 5px;
18
+ background: #d3d3d3;
19
+ outline: none;
20
+ opacity: 0.7;
21
+ -webkit-transition: .2s;
22
+ transition: opacity .2s;
23
+ }
24
+
25
+ .slider:hover {
26
+ opacity: 1;
27
+ }
28
+
29
+ .slider::-webkit-slider-thumb {
30
+ -webkit-appearance: none;
31
+ appearance: none;
32
+ width: 25px;
33
+ height: 25px;
34
+ border-radius: 50%;
35
+ background: #0439aa;
36
+ cursor: pointer;
37
+ }
38
+
39
+ .slider::-moz-range-thumb {
40
+ width: 25px;
41
+ height: 25px;
42
+ border-radius: 50%;
43
+ background: #04AA6D;
44
+ cursor: pointer;
45
+ }
46
+ </style>
8
47
  </head>
9
48
 
10
49
  <body>
11
50
  <div id="screen"></div>
51
+ <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.1" class="slider" id="lodMultiplier" >
53
+ <p style="color: #0439aa;">LOD multiplier: <span id="multiplierValue"></span></p>
54
+ </div>
12
55
  <div style="position: absolute; bottom: 1%; z-index: 100;">
13
56
  <a href="https://openheritage3d.org/project.php?id=taz6-n215">ORIGINAL MODEL</a>
14
57
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jdultra/threedtiles",
3
- "version": "3.1.4",
3
+ "version": "3.1.5",
4
4
  "description": "An OGC 3DTiles viewer for Three.js",
5
5
  "main": "tileset.js",
6
6
  "scripts": {
package/src/index.js CHANGED
@@ -11,6 +11,7 @@ const scene = initScene();
11
11
  const domContainer = initDomContainer("screen");
12
12
  const camera = initCamera();
13
13
  const ogc3DTiles = initTileset(scene);
14
+ initLODMultiplierSlider(ogc3DTiles)
14
15
  const controller = initController(camera, domContainer);
15
16
 
16
17
  const stats = initStats(domContainer);
@@ -78,15 +79,18 @@ function initTileset(scene) {
78
79
 
79
80
  const ogc3DTile = new OGC3DTile({
80
81
  url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tiledWithSkirts/tileset.json",
81
- geometricErrorMultiplier: 1.0,
82
+ geometricErrorMultiplier: 0.8,
82
83
  loadOutsideView: true,
83
84
  tileLoader: new TileLoader(mesh => {
84
85
  //// Insert code to be called on every newly decoded mesh e.g.:
85
86
  mesh.material.wireframe = false;
86
87
  mesh.material.side = THREE.DoubleSide;
87
- }, 1000)
88
+ }, 1000),
89
+ onLoadCallback: tileset => {
90
+ console.log(tileset.json)
91
+ }
88
92
  });
89
-
93
+
90
94
 
91
95
  //// The OGC3DTile object is a threejs Object3D so you may do all the usual opperations like transformations e.g.:
92
96
  //ogc3DTile.translateOnAxis(new THREE.Vector3(0,1,0), -10)
@@ -99,20 +103,20 @@ function initTileset(scene) {
99
103
  // ogc3DTile.translateOnAxis(new THREE.Vector3(0,0,1), -9.5)
100
104
  //// 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
101
105
 
102
-
103
106
 
104
- var interval ;
107
+
108
+ var interval;
105
109
  document.addEventListener('keyup', (e) => {
106
110
  console.log(camera.position)
107
- if(!e.key || e.key !== "p") return;
108
- if(!!interval){
111
+ if (!e.key || e.key !== "p") return;
112
+ if (!!interval) {
109
113
  clearInterval(interval);
110
114
  interval = null;
111
- }else{
115
+ } else {
112
116
  startInterval();
113
117
  }
114
118
  });
115
- function startInterval(){
119
+ function startInterval() {
116
120
  interval = setIntervalAsync(function () {
117
121
  ogc3DTile.update(camera);
118
122
  }, 20);
@@ -123,10 +127,21 @@ function initTileset(scene) {
123
127
  return ogc3DTile;
124
128
  }
125
129
 
130
+ function initLODMultiplierSlider(tileset) {
131
+ var slider = document.getElementById("lodMultiplier");
132
+ var output = document.getElementById("multiplierValue");
133
+ output.innerHTML = slider.value;
134
+
135
+ slider.oninput = () => {
136
+ tileset.setGeometricErrorMultiplier(slider.value)
137
+ output.innerHTML = slider.value;
138
+ }
139
+ }
140
+
126
141
  function initController(camera, dom) {
127
142
  const controller = new OrbitControls(camera, dom);
128
143
 
129
- controller.target.set(-11.50895,0.058452500000001, 3.1369285);
144
+ controller.target.set(-11.50895, 0.058452500000001, 3.1369285);
130
145
  controller.minDistance = 1;
131
146
  controller.maxDistance = 5000;
132
147
  controller.update();
package/src/tileset/OGC3DTile.js CHANGED
@@ -25,7 +25,8 @@ class OGC3DTile extends THREE.Object3D {
25
25
  * tileLoader : TileLoader,
26
26
  * meshCallback: function,
27
27
  * cameraOnLoad: camera,
28
- * parentTile: OGC3DTile
28
+ * parentTile: OGC3DTile,
29
+ * onLoadCallback: function
29
30
  * } properties
30
31
  */
31
32
  constructor(properties) {
@@ -66,13 +67,17 @@ class OGC3DTile extends THREE.Object3D {
66
67
 
67
68
  if (!!properties.json) { // If this tile is created as a child of another tile, properties.json is not null
68
69
  self.setup(properties);
70
+ if (properties.onLoadCallback) properties.onLoadCallback(self);
69
71
  } else if (properties.url) { // If only the url to the tileset.json is provided
70
72
  self.controller = new AbortController();
71
73
  fetch(properties.url, { signal: self.controller.signal }).then(result => {
72
74
  if (!result.ok) {
73
75
  throw new Error(`couldn't load "${properties.url}". Request failed with status ${result.status} : ${result.statusText}`);
74
76
  }
75
- result.json().then(json => self.setup({ rootPath: path.dirname(properties.url), json: json }))
77
+ result.json().then(json => {
78
+ self.setup({ rootPath: path.dirname(properties.url), json: json });
79
+ if (properties.onLoadCallback) properties.onLoadCallback(self);
80
+ });
76
81
  });
77
82
  }
78
83
  }