@needle-tools/gltf-progressive 1.0.0-alpha.12 → 1.0.0-alpha.14
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/CHANGELOG.md +7 -0
- package/README.md +6 -0
- package/examples/modelviewer.html +27 -0
- package/examples/react-three-fiber/.prettierrc +10 -0
- package/examples/react-three-fiber/index.html +26 -0
- package/examples/react-three-fiber/package-lock.json +3587 -0
- package/examples/react-three-fiber/package.json +35 -0
- package/examples/react-three-fiber/tsconfig.json +22 -0
- package/examples/react-three-fiber/vite.config.js +44 -0
- package/examples/threejs/index.html +51 -0
- package/examples/threejs/main.js +76 -0
- package/gltf-progressive.js +74 -68
- package/gltf-progressive.min.js +3 -3
- package/gltf-progressive.umd.cjs +3 -3
- package/lib/extension.js +8 -0
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -1
- package/lib/plugins/modelviewer.js +5 -1
- package/package.json +1 -1
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "react-typescript",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"main": "src/index.tsx",
|
|
5
|
+
"dependencies": {
|
|
6
|
+
"@needle-tools/gltf-progressive": "file:../..",
|
|
7
|
+
"react": "^18.0.0",
|
|
8
|
+
"react-dom": "^18.0.0",
|
|
9
|
+
"@react-three/drei": "^9.0.1",
|
|
10
|
+
"@react-three/fiber": "^8.0.6",
|
|
11
|
+
"three": "0.162.0",
|
|
12
|
+
"typescript": "4.7.4"
|
|
13
|
+
},
|
|
14
|
+
"devDependencies": {
|
|
15
|
+
"@types/react": "18.0.15",
|
|
16
|
+
"@types/react-dom": "17.0.0",
|
|
17
|
+
"@types/three": "0.162.0",
|
|
18
|
+
"typescript": "4.1.3",
|
|
19
|
+
"@vitejs/plugin-basic-ssl": "^1.0.1",
|
|
20
|
+
"vite": "<= 4.3.9",
|
|
21
|
+
"@vitejs/plugin-react": "^1.3.0"
|
|
22
|
+
},
|
|
23
|
+
"scripts": {
|
|
24
|
+
"start": "vite --host",
|
|
25
|
+
"build": "react-scripts build",
|
|
26
|
+
"test": "react-scripts test --env=jsdom",
|
|
27
|
+
"eject": "react-scripts eject"
|
|
28
|
+
},
|
|
29
|
+
"browserslist": [
|
|
30
|
+
">0.2%",
|
|
31
|
+
"not dead",
|
|
32
|
+
"not ie <= 11",
|
|
33
|
+
"not op_mini all"
|
|
34
|
+
]
|
|
35
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"jsx": "react",
|
|
4
|
+
"target": "ESNext",
|
|
5
|
+
"useDefineForClassFields": true,
|
|
6
|
+
"module": "ESNext",
|
|
7
|
+
"lib": ["ESNext", "DOM"],
|
|
8
|
+
"moduleResolution": "Node",
|
|
9
|
+
"strict": true,
|
|
10
|
+
"sourceMap": true,
|
|
11
|
+
"resolveJsonModule": true,
|
|
12
|
+
"esModuleInterop": true,
|
|
13
|
+
"noEmit": true,
|
|
14
|
+
"noUnusedLocals": false,
|
|
15
|
+
"noUnusedParameters": true,
|
|
16
|
+
"noImplicitReturns": true,
|
|
17
|
+
"noImplicitAny": false,
|
|
18
|
+
"experimentalDecorators": true,
|
|
19
|
+
"skipLibCheck": true
|
|
20
|
+
},
|
|
21
|
+
"include": ["./src"]
|
|
22
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import * as path from 'path';
|
|
2
|
+
import { defineConfig } from 'vite';
|
|
3
|
+
import react from '@vitejs/plugin-react';
|
|
4
|
+
import basicSsl from '@vitejs/plugin-basic-ssl'
|
|
5
|
+
|
|
6
|
+
export default defineConfig(async (command) => {
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
return {
|
|
10
|
+
base: "./",
|
|
11
|
+
assetsInclude: ['*'],
|
|
12
|
+
|
|
13
|
+
plugins: [
|
|
14
|
+
react(),
|
|
15
|
+
basicSsl(),
|
|
16
|
+
],
|
|
17
|
+
|
|
18
|
+
server: {
|
|
19
|
+
https: true,
|
|
20
|
+
proxy: { // workaround: specifying a proxy skips HTTP2 which is currently problematic in Vite since it causes session memory timeouts.
|
|
21
|
+
'https://localhost:3000': 'https://localhost:3000'
|
|
22
|
+
},
|
|
23
|
+
watch: {
|
|
24
|
+
awaitWriteFinish: {
|
|
25
|
+
stabilityThreshold: 500,
|
|
26
|
+
pollInterval: 1000
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
strictPort: true,
|
|
30
|
+
port: 3001
|
|
31
|
+
},
|
|
32
|
+
build: {
|
|
33
|
+
outDir: "./dist",
|
|
34
|
+
emptyOutDir: true,
|
|
35
|
+
keepNames: true,
|
|
36
|
+
},
|
|
37
|
+
resolve: {
|
|
38
|
+
alias: {
|
|
39
|
+
'react': () => path.resolve(__dirname, 'node_modules/react'),
|
|
40
|
+
'@react-three/fiber': () => path.resolve(__dirname, 'node_modules/@react-three/fiber'),
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
});
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<title>Threejs Progressive Loading</title>
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
margin: 0;
|
|
10
|
+
}
|
|
11
|
+
</style>
|
|
12
|
+
<script type="importmap">
|
|
13
|
+
{
|
|
14
|
+
"imports": {
|
|
15
|
+
"three": "https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js",
|
|
16
|
+
"three/addons/": "https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/",
|
|
17
|
+
"three/examples/": "https://cdn.jsdelivr.net/npm/three@latest/examples/",
|
|
18
|
+
"@needle-engine/gltf-progressive": "https://www.unpkg.com/@needle-tools/gltf-progressive@latest"
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
</script>
|
|
22
|
+
</head>
|
|
23
|
+
|
|
24
|
+
<body>
|
|
25
|
+
<script type="module" src="./main.js"></script>
|
|
26
|
+
<button class="show-source">Show Source</button>
|
|
27
|
+
</body>
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
<style>
|
|
31
|
+
.show-source {
|
|
32
|
+
position: fixed;
|
|
33
|
+
right: 1rem;
|
|
34
|
+
bottom: 1rem;
|
|
35
|
+
z-index: 100;
|
|
36
|
+
border-radius: .5rem;
|
|
37
|
+
border: none;
|
|
38
|
+
padding: .3rem .5rem;
|
|
39
|
+
}
|
|
40
|
+
</style>
|
|
41
|
+
<script>
|
|
42
|
+
document.addEventListener("DOMContentLoaded", () => {
|
|
43
|
+
document.querySelector('.show-source').addEventListener('click', () => {
|
|
44
|
+
const scriptSource = document.querySelector('script[type="module"]').src;
|
|
45
|
+
console.log(scriptSource);
|
|
46
|
+
window.open(scriptSource);
|
|
47
|
+
});
|
|
48
|
+
});
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
</html>
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import * as THREE from 'three';
|
|
2
|
+
import { EXRLoader } from 'three/addons/loaders/EXRLoader.js';
|
|
3
|
+
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
|
4
|
+
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
|
5
|
+
import { useNeedleProgressive, } from "@needle-engine/gltf-progressive"
|
|
6
|
+
|
|
7
|
+
const scene = new THREE.Scene();
|
|
8
|
+
scene.background = new THREE.Color(0x555555);
|
|
9
|
+
const renderer = new THREE.WebGLRenderer();
|
|
10
|
+
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
11
|
+
document.body.appendChild(renderer.domElement);
|
|
12
|
+
|
|
13
|
+
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
window.addEventListener('resize', () => {
|
|
17
|
+
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
18
|
+
camera.aspect = window.innerWidth / window.innerHeight;
|
|
19
|
+
camera.updateProjectionMatrix();
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
const orbit = new OrbitControls(camera, renderer.domElement);
|
|
23
|
+
orbit.target = new THREE.Vector3(0, 14, 0);
|
|
24
|
+
camera.position.x = 20;
|
|
25
|
+
camera.position.y = 20.5;
|
|
26
|
+
camera.position.z = 20.8;
|
|
27
|
+
|
|
28
|
+
const grid = new THREE.GridHelper(50, 50, 0x444444, 0x666666);
|
|
29
|
+
scene.add(grid);
|
|
30
|
+
|
|
31
|
+
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
|
|
32
|
+
directionalLight.position.set(-50, 20, 50);
|
|
33
|
+
scene.add(directionalLight);
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
// Animate the scene
|
|
37
|
+
function animate() {
|
|
38
|
+
requestAnimationFrame(animate);
|
|
39
|
+
orbit.update();
|
|
40
|
+
renderer.render(scene, camera);
|
|
41
|
+
}
|
|
42
|
+
animate();
|
|
43
|
+
|
|
44
|
+
const environmentTextureUrl = "https://dl.polyhaven.org/file/ph-assets/HDRIs/exr/1k/studio_small_09_1k.exr";
|
|
45
|
+
const pmremGenerator = new THREE.PMREMGenerator(renderer);
|
|
46
|
+
pmremGenerator.compileEquirectangularShader();
|
|
47
|
+
new EXRLoader().load(environmentTextureUrl, texture => {
|
|
48
|
+
const envMap = pmremGenerator.fromEquirectangular(texture).texture;
|
|
49
|
+
scene.environment = envMap;
|
|
50
|
+
texture.dispose();
|
|
51
|
+
pmremGenerator.dispose();
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
// Integrate @needle-tools/gltf-progressive
|
|
58
|
+
// This is the model we want to load
|
|
59
|
+
const url = "https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb";
|
|
60
|
+
|
|
61
|
+
const gltfLoader = new GLTFLoader();
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* Call this method to register the progressive loader
|
|
65
|
+
*/
|
|
66
|
+
useNeedleProgressive(url, renderer, gltfLoader)
|
|
67
|
+
|
|
68
|
+
// just call the load method as usual
|
|
69
|
+
gltfLoader.load(url, gltf => {
|
|
70
|
+
console.log(gltf)
|
|
71
|
+
scene.add(gltf.scene)
|
|
72
|
+
gltf.scene.position.y += .95;
|
|
73
|
+
})
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
package/gltf-progressive.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var le = Object.defineProperty;
|
|
2
2
|
var ue = (l, e, t) => e in l ? le(l, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[e] = t;
|
|
3
3
|
var c = (l, e, t) => (ue(l, typeof e != "symbol" ? e + "" : e, t), t);
|
|
4
|
-
import { Mesh as q, BufferGeometry as
|
|
4
|
+
import { Mesh as q, BufferGeometry as Y, Material as ce, Texture as I, TextureLoader as fe, Matrix4 as te, Frustum as de, Sphere as ge, Box3 as re, Vector3 as R } from "three";
|
|
5
5
|
import { GLTFLoader as he } from "three/examples/jsm/loaders/GLTFLoader.js";
|
|
6
6
|
import { MeshoptDecoder as pe } from "three/examples/jsm/libs/meshopt_decoder.module.js";
|
|
7
7
|
import { DRACOLoader as ye } from "three/examples/jsm/loaders/DRACOLoader.js";
|
|
@@ -16,12 +16,12 @@ function _e(l) {
|
|
|
16
16
|
function Be(l) {
|
|
17
17
|
j = l;
|
|
18
18
|
}
|
|
19
|
-
let
|
|
19
|
+
let U, J, W;
|
|
20
20
|
function ne(l) {
|
|
21
|
-
|
|
21
|
+
U || (U = new ye(), U.setDecoderPath(K), U.setDecoderConfig({ type: "js" })), W || (W = new me(), W.setTranscoderPath(j)), J || (J = pe), l ? W.detectSupport(l) : console.warn("No renderer provided to detect ktx2 support - loading KTX2 textures will probably fail");
|
|
22
22
|
}
|
|
23
23
|
function oe(l) {
|
|
24
|
-
l.dracoLoader || l.setDRACOLoader(
|
|
24
|
+
l.dracoLoader || l.setDRACOLoader(U), l.ktx2Loader || l.setKTX2Loader(W), l.meshoptDecoder || l.setMeshoptDecoder(J);
|
|
25
25
|
}
|
|
26
26
|
function ee(l) {
|
|
27
27
|
const t = new URL(window.location.href).searchParams.get(l);
|
|
@@ -43,7 +43,7 @@ const Q = new Array();
|
|
|
43
43
|
function ke(l) {
|
|
44
44
|
Q.push(l);
|
|
45
45
|
}
|
|
46
|
-
const
|
|
46
|
+
const E = "NEEDLE_progressive", S = ee("debugprogressive"), V = Symbol("needle-progressive-texture"), z = /* @__PURE__ */ new Map(), Z = /* @__PURE__ */ new Set();
|
|
47
47
|
if (S) {
|
|
48
48
|
let l = function() {
|
|
49
49
|
e += 1, console.log("Toggle LOD level", e, z), z.forEach((i, n) => {
|
|
@@ -81,7 +81,7 @@ const M = class {
|
|
|
81
81
|
}
|
|
82
82
|
/** The name of the extension */
|
|
83
83
|
get name() {
|
|
84
|
-
return
|
|
84
|
+
return E;
|
|
85
85
|
}
|
|
86
86
|
static getMeshLODInformation(e) {
|
|
87
87
|
const t = this.getAssignedLODInformation(e);
|
|
@@ -146,7 +146,7 @@ const M = class {
|
|
|
146
146
|
const o = n.index || 0;
|
|
147
147
|
s = s[o];
|
|
148
148
|
}
|
|
149
|
-
s && i != s && s instanceof
|
|
149
|
+
s && i != s && s instanceof Y && (e.geometry = s, S && se(e, "geometry", n.url));
|
|
150
150
|
}
|
|
151
151
|
return s;
|
|
152
152
|
}).catch((s) => (console.error("Error loading mesh LOD", e, s), null));
|
|
@@ -192,7 +192,7 @@ const M = class {
|
|
|
192
192
|
return o;
|
|
193
193
|
});
|
|
194
194
|
}
|
|
195
|
-
if (e instanceof
|
|
195
|
+
if (e instanceof I || e.isTexture === !0) {
|
|
196
196
|
const r = e;
|
|
197
197
|
return this.assignTextureLODForSlot(r, t, null, null);
|
|
198
198
|
}
|
|
@@ -217,7 +217,7 @@ const M = class {
|
|
|
217
217
|
var t, r;
|
|
218
218
|
return S && console.log("AFTER", this.url, e), (t = this.parser.json.textures) == null || t.forEach((i, n) => {
|
|
219
219
|
if (i != null && i.extensions) {
|
|
220
|
-
const s = i == null ? void 0 : i.extensions[
|
|
220
|
+
const s = i == null ? void 0 : i.extensions[E];
|
|
221
221
|
if (s) {
|
|
222
222
|
let o = !1;
|
|
223
223
|
for (const a of this.parser.associations.keys())
|
|
@@ -229,7 +229,7 @@ const M = class {
|
|
|
229
229
|
}
|
|
230
230
|
}), (r = this.parser.json.meshes) == null || r.forEach((i, n) => {
|
|
231
231
|
if (i != null && i.extensions) {
|
|
232
|
-
const s = i == null ? void 0 : i.extensions[
|
|
232
|
+
const s = i == null ? void 0 : i.extensions[E];
|
|
233
233
|
if (s && s.lods) {
|
|
234
234
|
for (const o of this.parser.associations.keys())
|
|
235
235
|
if (o.isMesh) {
|
|
@@ -249,7 +249,7 @@ const M = class {
|
|
|
249
249
|
let s;
|
|
250
250
|
if (e.isTexture === !0) {
|
|
251
251
|
const f = e;
|
|
252
|
-
f.source && f.source[
|
|
252
|
+
f.source && f.source[V] && (s = f.source[V]);
|
|
253
253
|
}
|
|
254
254
|
if (s || (s = M.lodInfos.get(n)), s) {
|
|
255
255
|
if (t > 0) {
|
|
@@ -268,67 +268,67 @@ const M = class {
|
|
|
268
268
|
const u = p + "_" + s.guid, h = this.previouslyLoaded.get(u);
|
|
269
269
|
if (h !== void 0) {
|
|
270
270
|
r && console.log(`LOD ${t} was already loading/loaded: ${u}`);
|
|
271
|
-
let x = await h.catch((
|
|
272
|
-
`,
|
|
273
|
-
if (x == null || (x instanceof
|
|
271
|
+
let x = await h.catch((F) => (console.error(`Error loading LOD ${t} from ${p}
|
|
272
|
+
`, F), null)), C = !1;
|
|
273
|
+
if (x == null || (x instanceof I && e instanceof I ? (o = x.image) != null && o.data || (a = x.source) != null && a.data ? x = this.copySettings(e, x) : (C = !0, this.previouslyLoaded.delete(u)) : x instanceof Y && e instanceof Y && ((g = x.attributes.position) != null && g.array || (C = !0, this.previouslyLoaded.delete(u)))), !C)
|
|
274
274
|
return x;
|
|
275
275
|
}
|
|
276
|
-
const D = s,
|
|
277
|
-
const
|
|
278
|
-
oe(
|
|
276
|
+
const D = s, b = new Promise(async (x, C) => {
|
|
277
|
+
const F = new he();
|
|
278
|
+
oe(F), S && (await new Promise((m) => setTimeout(m, 1e3)), r && console.warn("Start loading (delayed) " + p, D.guid));
|
|
279
279
|
let L = p;
|
|
280
280
|
if (D && Array.isArray(D.lods)) {
|
|
281
281
|
const m = D.lods[t];
|
|
282
282
|
m.hash && (L += "?v=" + m.hash);
|
|
283
283
|
}
|
|
284
|
-
const y = await
|
|
284
|
+
const y = await F.loadAsync(L).catch((m) => (console.error(`Error loading LOD ${t} from ${p}
|
|
285
285
|
`, m), null));
|
|
286
286
|
if (!y)
|
|
287
287
|
return null;
|
|
288
288
|
const T = y.parser;
|
|
289
289
|
r && console.log("Loading finished " + p, D.guid);
|
|
290
|
-
let
|
|
290
|
+
let w = 0;
|
|
291
291
|
if (y.parser.json.textures) {
|
|
292
292
|
let m = !1;
|
|
293
293
|
for (const d of y.parser.json.textures) {
|
|
294
294
|
if (d != null && d.extensions) {
|
|
295
|
-
const
|
|
296
|
-
if (
|
|
295
|
+
const O = d == null ? void 0 : d.extensions[E];
|
|
296
|
+
if (O != null && O.guid && O.guid === D.guid) {
|
|
297
297
|
m = !0;
|
|
298
298
|
break;
|
|
299
299
|
}
|
|
300
300
|
}
|
|
301
|
-
|
|
301
|
+
w++;
|
|
302
302
|
}
|
|
303
303
|
if (m) {
|
|
304
|
-
let d = await T.getDependency("texture",
|
|
305
|
-
return r && console.log('change "' + e.name + '" → "' + d.name + '"', p,
|
|
304
|
+
let d = await T.getDependency("texture", w);
|
|
305
|
+
return r && console.log('change "' + e.name + '" → "' + d.name + '"', p, w, d, u), e instanceof I && (d = this.copySettings(e, d)), d && (d.guid = D.guid), x(d);
|
|
306
306
|
}
|
|
307
307
|
}
|
|
308
|
-
if (
|
|
308
|
+
if (w = 0, y.parser.json.meshes) {
|
|
309
309
|
let m = !1;
|
|
310
310
|
for (const d of y.parser.json.meshes) {
|
|
311
311
|
if (d != null && d.extensions) {
|
|
312
|
-
const
|
|
313
|
-
if (
|
|
312
|
+
const O = d == null ? void 0 : d.extensions[E];
|
|
313
|
+
if (O != null && O.guid && O.guid === D.guid) {
|
|
314
314
|
m = !0;
|
|
315
315
|
break;
|
|
316
316
|
}
|
|
317
317
|
}
|
|
318
|
-
|
|
318
|
+
w++;
|
|
319
319
|
}
|
|
320
320
|
if (m) {
|
|
321
|
-
const d = await T.getDependency("mesh",
|
|
322
|
-
if (r && console.log(`Loaded Mesh "${d.name}"`, p,
|
|
321
|
+
const d = await T.getDependency("mesh", w), O = D;
|
|
322
|
+
if (r && console.log(`Loaded Mesh "${d.name}"`, p, w, d, u), d.isMesh === !0) {
|
|
323
323
|
const P = d.geometry;
|
|
324
|
-
return M.assignLODInformation(i.url, P, n, t, void 0,
|
|
324
|
+
return M.assignLODInformation(i.url, P, n, t, void 0, O.density), x(P);
|
|
325
325
|
} else {
|
|
326
326
|
const P = new Array();
|
|
327
327
|
for (let _ = 0; _ < d.children.length; _++) {
|
|
328
|
-
const
|
|
329
|
-
if (
|
|
330
|
-
const N =
|
|
331
|
-
M.assignLODInformation(i.url, N, n, t, _,
|
|
328
|
+
const G = d.children[_];
|
|
329
|
+
if (G instanceof q) {
|
|
330
|
+
const N = G.geometry;
|
|
331
|
+
M.assignLODInformation(i.url, N, n, t, _, O.density), P.push(N);
|
|
332
332
|
}
|
|
333
333
|
}
|
|
334
334
|
return x(P);
|
|
@@ -337,8 +337,8 @@ const M = class {
|
|
|
337
337
|
}
|
|
338
338
|
return x(null);
|
|
339
339
|
});
|
|
340
|
-
return this.previouslyLoaded.set(u,
|
|
341
|
-
} else if (e instanceof
|
|
340
|
+
return this.previouslyLoaded.set(u, b), await b;
|
|
341
|
+
} else if (e instanceof I) {
|
|
342
342
|
r && console.log("Load texture from uri: " + p);
|
|
343
343
|
const h = await new fe().loadAsync(p);
|
|
344
344
|
return h ? (h.guid = s.guid, h.flipY = !1, h.needsUpdate = !0, h.colorSpace = e.colorSpace, r && console.log(s, h)) : S && console.warn("failed loading", p), h;
|
|
@@ -360,7 +360,7 @@ const M = class {
|
|
|
360
360
|
}
|
|
361
361
|
static copySettings(e, t) {
|
|
362
362
|
const r = this._copiedTextures.get(e);
|
|
363
|
-
return r || (t = t.clone(), this._copiedTextures.set(e, t), t.offset = e.offset, t.repeat = e.repeat, t.colorSpace = e.colorSpace, t);
|
|
363
|
+
return r || (t = t.clone(), this._copiedTextures.set(e, t), t.offset = e.offset, t.repeat = e.repeat, t.colorSpace = e.colorSpace, t.magFilter = e.magFilter, t.minFilter = e.minFilter, t.wrapS = e.wrapS, t.wrapT = e.wrapT, t.flipY = e.flipY, t.anisotropy = e.anisotropy, t.generateMipmaps = e.generateMipmaps, t);
|
|
364
364
|
}
|
|
365
365
|
};
|
|
366
366
|
let v = M;
|
|
@@ -368,7 +368,7 @@ let v = M;
|
|
|
368
368
|
* Register a texture with LOD information
|
|
369
369
|
*/
|
|
370
370
|
c(v, "registerTexture", (e, t, r, i) => {
|
|
371
|
-
S && console.log("> Progressive: register texture", r, t.name, t.uuid, t, i), t.source && (t.source[
|
|
371
|
+
S && console.log("> Progressive: register texture", r, t.name, t.uuid, t, i), t.source && (t.source[V] = i);
|
|
372
372
|
const n = i.guid;
|
|
373
373
|
M.assignLODInformation(e, t, n, 0, 0, void 0), M.lodInfos.set(n, i), M.lowresCache.set(n, t);
|
|
374
374
|
}), /**
|
|
@@ -400,7 +400,7 @@ class De {
|
|
|
400
400
|
this.url = e, this.key = t, this.level = r, i != null && (this.index = i), n != null && (this.density = n);
|
|
401
401
|
}
|
|
402
402
|
}
|
|
403
|
-
const H = ee("debugprogressive"), xe = ee("noprogressive"),
|
|
403
|
+
const H = ee("debugprogressive"), xe = ee("noprogressive"), A = class {
|
|
404
404
|
constructor(e) {
|
|
405
405
|
c(this, "renderer");
|
|
406
406
|
c(this, "projectionScreenMatrix", new te());
|
|
@@ -420,9 +420,9 @@ const H = ee("debugprogressive"), xe = ee("noprogressive"), b = class {
|
|
|
420
420
|
c(this, "_sphere", new ge());
|
|
421
421
|
c(this, "_tempBox", new re());
|
|
422
422
|
c(this, "tempMatrix", new te());
|
|
423
|
-
c(this, "_tempWorldPosition", new
|
|
424
|
-
c(this, "_tempBoxSize", new
|
|
425
|
-
c(this, "_tempBox2Size", new
|
|
423
|
+
c(this, "_tempWorldPosition", new R());
|
|
424
|
+
c(this, "_tempBoxSize", new R());
|
|
425
|
+
c(this, "_tempBox2Size", new R());
|
|
426
426
|
this.renderer = e;
|
|
427
427
|
}
|
|
428
428
|
/** @internal */
|
|
@@ -486,7 +486,7 @@ const H = ee("debugprogressive"), xe = ee("noprogressive"), b = class {
|
|
|
486
486
|
for (const f of this.plugins)
|
|
487
487
|
(a = f.onBeforeUpdateLOD) == null || a.call(f, this.renderer, e, t, r);
|
|
488
488
|
let n = r.userData.LOD_state;
|
|
489
|
-
n || (n = new
|
|
489
|
+
n || (n = new we(), r.userData.LOD_state = n);
|
|
490
490
|
let s = this.calculateLodLevel(t, r, n, i);
|
|
491
491
|
s = Math.round(s), s >= 0 && this.loadProgressiveMeshes(r, s);
|
|
492
492
|
let o = 0;
|
|
@@ -548,10 +548,10 @@ const H = ee("debugprogressive"), xe = ee("noprogressive"), b = class {
|
|
|
548
548
|
}
|
|
549
549
|
if (this._tempBox.copy(f), this._tempBox.applyMatrix4(t.matrixWorld), this._tempBox.applyMatrix4(this.projectionScreenMatrix), this.renderer.xr.enabled && p.fov > 70) {
|
|
550
550
|
const L = this._tempBox.min, y = this._tempBox.max;
|
|
551
|
-
let T = L.x,
|
|
552
|
-
const
|
|
553
|
-
T = (T - _) *
|
|
554
|
-
const N = T < 0 && m > 0 ? 0 : Math.min(Math.abs(L.x), Math.abs(y.x)), ae =
|
|
551
|
+
let T = L.x, w = L.y, m = y.x, d = y.y;
|
|
552
|
+
const O = 2, P = 1.5, _ = (L.x + y.x) * 0.5, G = (L.y + y.y) * 0.5;
|
|
553
|
+
T = (T - _) * O + _, w = (w - G) * O + G, m = (m - _) * O + _, d = (d - G) * O + G;
|
|
554
|
+
const N = T < 0 && m > 0 ? 0 : Math.min(Math.abs(L.x), Math.abs(y.x)), ae = w < 0 && d > 0 ? 0 : Math.min(Math.abs(L.y), Math.abs(y.y)), X = Math.max(N, ae);
|
|
555
555
|
r.lastCentrality = (P - X) * (P - X) * (P - X);
|
|
556
556
|
} else
|
|
557
557
|
r.lastCentrality = 1;
|
|
@@ -559,43 +559,43 @@ const H = ee("debugprogressive"), xe = ee("noprogressive"), b = class {
|
|
|
559
559
|
u.multiplyScalar(0.5), screen.availHeight > 0 && u.multiplyScalar(this.renderer.domElement.clientHeight / screen.availHeight), u.x *= p.aspect;
|
|
560
560
|
const h = e.matrixWorldInverse, D = new re();
|
|
561
561
|
D.copy(f), D.applyMatrix4(t.matrixWorld), D.applyMatrix4(h);
|
|
562
|
-
const
|
|
563
|
-
if (Math.max(u.x, u.y) != 0 &&
|
|
562
|
+
const b = D.getSize(this._tempBox2Size), k = Math.max(b.x, b.y);
|
|
563
|
+
if (Math.max(u.x, u.y) != 0 && k != 0 && (u.z = b.z / Math.max(b.x, b.y) * Math.max(u.x, u.y)), r.lastScreenCoverage = Math.max(u.x, u.y, u.z), r.lastScreenspaceVolume.copy(u), r.lastScreenCoverage *= r.lastCentrality, H && A.debugDrawLine) {
|
|
564
564
|
const L = this.tempMatrix.copy(this.projectionScreenMatrix);
|
|
565
565
|
L.invert();
|
|
566
|
-
const y =
|
|
567
|
-
y.copy(this._tempBox.min), T.copy(this._tempBox.max), T.x = y.x,
|
|
566
|
+
const y = A.corner0, T = A.corner1, w = A.corner2, m = A.corner3;
|
|
567
|
+
y.copy(this._tempBox.min), T.copy(this._tempBox.max), T.x = y.x, w.copy(this._tempBox.max), w.y = y.y, m.copy(this._tempBox.max);
|
|
568
568
|
const d = (y.z + m.z) * 0.5;
|
|
569
|
-
y.z = T.z =
|
|
569
|
+
y.z = T.z = w.z = m.z = d, y.applyMatrix4(L), T.applyMatrix4(L), w.applyMatrix4(L), m.applyMatrix4(L), A.debugDrawLine(y, T, 255), A.debugDrawLine(y, w, 255), A.debugDrawLine(T, m, 255), A.debugDrawLine(w, m, 255);
|
|
570
570
|
}
|
|
571
|
-
let
|
|
571
|
+
let C = 999;
|
|
572
572
|
if (g && r.lastScreenCoverage > 0) {
|
|
573
573
|
for (let L = 0; L < g.length; L++)
|
|
574
574
|
if (g[L].density / r.lastScreenCoverage < i) {
|
|
575
|
-
|
|
575
|
+
C = L;
|
|
576
576
|
break;
|
|
577
577
|
}
|
|
578
578
|
}
|
|
579
|
-
|
|
579
|
+
C < s && (s = C);
|
|
580
580
|
}
|
|
581
581
|
}
|
|
582
582
|
return s;
|
|
583
583
|
}
|
|
584
584
|
};
|
|
585
|
-
let B =
|
|
585
|
+
let B = A;
|
|
586
586
|
/** Assign a function to draw debug lines for the LODs. This function will be called with the start and end position of the line and the color of the line when the `debugprogressive` query parameter is set.
|
|
587
587
|
*/
|
|
588
|
-
c(B, "debugDrawLine"), c(B, "corner0", new
|
|
589
|
-
class
|
|
588
|
+
c(B, "debugDrawLine"), c(B, "corner0", new R()), c(B, "corner1", new R()), c(B, "corner2", new R()), c(B, "corner3", new R());
|
|
589
|
+
class we {
|
|
590
590
|
constructor() {
|
|
591
591
|
c(this, "lastLodLevel", 0);
|
|
592
592
|
c(this, "lastScreenCoverage", 0);
|
|
593
|
-
c(this, "lastScreenspaceVolume", new
|
|
593
|
+
c(this, "lastScreenspaceVolume", new R());
|
|
594
594
|
c(this, "lastCentrality", 0);
|
|
595
595
|
}
|
|
596
596
|
}
|
|
597
597
|
const ie = Symbol("NEEDLE_mesh_lod"), $ = Symbol("NEEDLE_texture_lod");
|
|
598
|
-
function
|
|
598
|
+
function Oe(l) {
|
|
599
599
|
if (!l)
|
|
600
600
|
return null;
|
|
601
601
|
let e = null, t = null;
|
|
@@ -647,9 +647,13 @@ class Me {
|
|
|
647
647
|
for (let u = 0; u < a.length; u++) {
|
|
648
648
|
const h = a[u], D = o[h];
|
|
649
649
|
if ((D == null ? void 0 : D.isTexture) === !0) {
|
|
650
|
-
const
|
|
651
|
-
if (
|
|
652
|
-
|
|
650
|
+
const b = (f = (g = D.userData) == null ? void 0 : g.associations) == null ? void 0 : f.textures, k = r.parser.json.textures[b];
|
|
651
|
+
if (!k) {
|
|
652
|
+
console.warn("Texture data not found for texture index " + b);
|
|
653
|
+
continue;
|
|
654
|
+
}
|
|
655
|
+
if ((p = k == null ? void 0 : k.extensions) != null && p[E]) {
|
|
656
|
+
const x = k.extensions[E];
|
|
653
657
|
x && i && v.registerTexture(i, D, x.lods.length, x);
|
|
654
658
|
}
|
|
655
659
|
}
|
|
@@ -671,7 +675,7 @@ class Me {
|
|
|
671
675
|
const r = this.getUrl();
|
|
672
676
|
if (!r)
|
|
673
677
|
return;
|
|
674
|
-
const i = (s = (n = t.userData) == null ? void 0 : n.gltfExtensions) == null ? void 0 : s[
|
|
678
|
+
const i = (s = (n = t.userData) == null ? void 0 : n.gltfExtensions) == null ? void 0 : s[E];
|
|
675
679
|
if (i && r) {
|
|
676
680
|
const o = t.uuid;
|
|
677
681
|
v.registerMesh(r, o, t, 0, i.lods.length, i);
|
|
@@ -684,13 +688,15 @@ function Ce(l, e, t, r) {
|
|
|
684
688
|
return (r == null ? void 0 : r.enableLODsManager) !== !1 && i.enable(), i;
|
|
685
689
|
}
|
|
686
690
|
document.addEventListener("DOMContentLoaded", () => {
|
|
687
|
-
|
|
691
|
+
Oe(document.querySelector("model-viewer"));
|
|
688
692
|
});
|
|
689
693
|
export {
|
|
690
|
-
|
|
694
|
+
E as EXTENSION_NAME,
|
|
691
695
|
B as LODsManager,
|
|
692
696
|
v as NEEDLE_progressive,
|
|
693
|
-
|
|
697
|
+
oe as addDracoAndKTX2Loaders,
|
|
698
|
+
ne as createLoaders,
|
|
699
|
+
Oe as patchModelViewer,
|
|
694
700
|
ke as registerPlugin,
|
|
695
701
|
_e as setDracoDecoderLocation,
|
|
696
702
|
Be as setKTX2TranscoderLocation,
|