@needle-tools/gltf-progressive 1.0.0-alpha.8 → 1.1.0-alpha
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 +42 -0
- package/README.md +92 -0
- package/examples/modelviewer.html +27 -0
- package/examples/react-three-fiber/.prettierrc +10 -0
- package/examples/react-three-fiber/favicon.png +0 -0
- package/examples/react-three-fiber/index.html +24 -0
- package/examples/react-three-fiber/package-lock.json +4023 -0
- package/examples/react-three-fiber/package.json +34 -0
- package/examples/react-three-fiber/tsconfig.json +22 -0
- package/examples/react-three-fiber/vite.config.js +39 -0
- package/examples/threejs/index.html +51 -0
- package/examples/threejs/main.js +76 -0
- package/gltf-progressive.js +465 -318
- package/gltf-progressive.min.js +5 -3
- package/gltf-progressive.umd.cjs +5 -3
- package/lib/extension.d.ts +8 -2
- package/lib/extension.js +108 -15
- package/lib/index.d.ts +5 -4
- package/lib/index.js +6 -4
- package/lib/loaders.d.ts +10 -0
- package/lib/loaders.js +21 -2
- package/lib/lods_manager.d.ts +50 -3
- package/lib/lods_manager.js +354 -219
- package/lib/plugins/index.d.ts +1 -1
- package/lib/plugins/index.js +0 -1
- package/lib/plugins/modelviewer.js +7 -3
- package/lib/plugins/plugin.d.ts +4 -5
- package/lib/plugins/plugin.js +0 -6
- package/lib/utils.d.ts +13 -0
- package/lib/utils.js +24 -0
- package/package.json +1 -1
|
@@ -0,0 +1,34 @@
|
|
|
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-three/drei": "^9.0.1",
|
|
8
|
+
"@react-three/fiber": "^8.0.6",
|
|
9
|
+
"react": "^18.0.0",
|
|
10
|
+
"react-dom": "^18.0.0",
|
|
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
|
+
"@vitejs/plugin-basic-ssl": "^1.0.1",
|
|
19
|
+
"@vitejs/plugin-react": "^1.3.0",
|
|
20
|
+
"typescript": "4.1.3",
|
|
21
|
+
"vite": "<= 4.3.9",
|
|
22
|
+
"vite-plugin-compression": "^0.5.1"
|
|
23
|
+
},
|
|
24
|
+
"scripts": {
|
|
25
|
+
"start": "vite --host",
|
|
26
|
+
"build": "vite build"
|
|
27
|
+
},
|
|
28
|
+
"browserslist": [
|
|
29
|
+
">0.2%",
|
|
30
|
+
"not dead",
|
|
31
|
+
"not ie <= 11",
|
|
32
|
+
"not op_mini all"
|
|
33
|
+
]
|
|
34
|
+
}
|
|
@@ -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,39 @@
|
|
|
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
|
+
import viteCompression from 'vite-plugin-compression';
|
|
6
|
+
|
|
7
|
+
export default defineConfig(async (command) => {
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
return {
|
|
11
|
+
base: "./",
|
|
12
|
+
assetsInclude: ['*'],
|
|
13
|
+
|
|
14
|
+
plugins: [
|
|
15
|
+
react(),
|
|
16
|
+
basicSsl(),
|
|
17
|
+
viteCompression({ deleteOriginFile: true }),
|
|
18
|
+
],
|
|
19
|
+
|
|
20
|
+
server: {
|
|
21
|
+
https: true,
|
|
22
|
+
proxy: { // workaround: specifying a proxy skips HTTP2 which is currently problematic in Vite since it causes session memory timeouts.
|
|
23
|
+
'https://localhost:3000': 'https://localhost:3000'
|
|
24
|
+
},
|
|
25
|
+
strictPort: true,
|
|
26
|
+
port: 3001
|
|
27
|
+
},
|
|
28
|
+
build: {
|
|
29
|
+
outDir: "./dist",
|
|
30
|
+
emptyOutDir: true,
|
|
31
|
+
},
|
|
32
|
+
resolve: {
|
|
33
|
+
alias: {
|
|
34
|
+
'react': () => path.resolve(__dirname, 'node_modules/react'),
|
|
35
|
+
'@react-three/fiber': () => path.resolve(__dirname, 'node_modules/@react-three/fiber'),
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
});
|
|
@@ -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
|
+
|