@needle-tools/gltf-progressive 2.1.3 → 2.1.5-next.e31d8ef

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 (53) hide show
  1. package/.github/workflows/publish.yml +47 -0
  2. package/CHANGELOG.md +210 -207
  3. package/README.md +129 -131
  4. package/dist/CHANGELOG.md +211 -0
  5. package/dist/README.md +129 -0
  6. package/dist/examples/modelviewer-multiple.html +126 -0
  7. package/dist/examples/modelviewer.html +34 -0
  8. package/dist/examples/react-three-fiber/.prettierrc +10 -0
  9. package/dist/examples/react-three-fiber/favicon.png +0 -0
  10. package/dist/examples/react-three-fiber/index.html +24 -0
  11. package/dist/examples/react-three-fiber/package-lock.json +4023 -0
  12. package/dist/examples/react-three-fiber/package.json +34 -0
  13. package/dist/examples/react-three-fiber/tsconfig.json +22 -0
  14. package/dist/examples/react-three-fiber/vite.config.js +39 -0
  15. package/dist/examples/threejs/index.html +52 -0
  16. package/dist/examples/threejs/main.js +181 -0
  17. package/{gltf-progressive.js → dist/gltf-progressive.js} +193 -187
  18. package/{gltf-progressive.min.js → dist/gltf-progressive.min.js} +6 -6
  19. package/dist/gltf-progressive.umd.cjs +8 -0
  20. package/{lib → dist/lib}/lods_manager.d.ts +6 -0
  21. package/{lib → dist/lib}/lods_manager.js +9 -2
  22. package/{lib → dist/lib}/version.js +1 -1
  23. package/dist/package.json +65 -0
  24. package/examples/modelviewer-multiple.html +125 -125
  25. package/examples/modelviewer.html +33 -33
  26. package/examples/react-three-fiber/.prettierrc +9 -9
  27. package/examples/react-three-fiber/index.html +23 -23
  28. package/examples/react-three-fiber/package-lock.json +4023 -4023
  29. package/examples/react-three-fiber/package.json +34 -34
  30. package/examples/react-three-fiber/tsconfig.json +21 -21
  31. package/examples/react-three-fiber/vite.config.js +38 -38
  32. package/examples/threejs/index.html +51 -51
  33. package/examples/threejs/main.js +181 -181
  34. package/package.json +18 -5
  35. package/tsconfig.json +42 -0
  36. package/gltf-progressive.umd.cjs +0 -8
  37. /package/{lib → dist/lib}/extension.d.ts +0 -0
  38. /package/{lib → dist/lib}/extension.js +0 -0
  39. /package/{lib → dist/lib}/index.d.ts +0 -0
  40. /package/{lib → dist/lib}/index.js +0 -0
  41. /package/{lib → dist/lib}/loaders.d.ts +0 -0
  42. /package/{lib → dist/lib}/loaders.js +0 -0
  43. /package/{lib → dist/lib}/plugins/index.d.ts +0 -0
  44. /package/{lib → dist/lib}/plugins/index.js +0 -0
  45. /package/{lib → dist/lib}/plugins/modelviewer.d.ts +0 -0
  46. /package/{lib → dist/lib}/plugins/modelviewer.js +0 -0
  47. /package/{lib → dist/lib}/plugins/plugin.d.ts +0 -0
  48. /package/{lib → dist/lib}/plugins/plugin.js +0 -0
  49. /package/{lib → dist/lib}/utils.d.ts +0 -0
  50. /package/{lib → dist/lib}/utils.internal.d.ts +0 -0
  51. /package/{lib → dist/lib}/utils.internal.js +0 -0
  52. /package/{lib → dist/lib}/utils.js +0 -0
  53. /package/{lib → dist/lib}/version.d.ts +0 -0
package/dist/examples/modelviewer-multiple.html ADDED
@@ -0,0 +1,126 @@
1
+ <html>
2
+
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>gltf-progressive & model-viewer</title>
7
+
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
11
+ rel="stylesheet">
12
+
13
+ <script type="importmap">
14
+ {
15
+ "imports": {
16
+ "three": "https://unpkg.com/three/build/three.module.js",
17
+ "three/": "https://unpkg.com/three/"
18
+ }
19
+ }
20
+ </script>
21
+ <script type="module"
22
+ src="https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"></script>
23
+ <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
24
+ </head>
25
+
26
+ <div class="layout">
27
+ <div class="card">
28
+ <h1>glTF Progressive</h1>
29
+ <h3><a href="https://www.npmjs.com/package/@needle-tools/gltf-progressive"
30
+ target="_blank">@needle-tools/gltf-progressive</a></h3>
31
+ <p>Load high quality assets in model-viewer without having to worry about loading times, bandwidth or
32
+ performance.</p>
33
+ <p>Get started now at <a href="https://cloud.needle.tools">cloud.needle.tools</a></p>
34
+ </div>
35
+ <model-viewer src="https://api.cloud.needle.tools/v1/public/9162350/2b4509376/" ar auto-rotate shadow-intensity=".5"
36
+ camera-controls touch-action="pan-y" autoplay></model-viewer>
37
+
38
+
39
+ <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/vase/model.glb" ar
40
+ shadow-intensity=".5" camera-controls touch-action="pan-y"></model-viewer>
41
+
42
+ <model-viewer src="https://api.cloud.needle.tools/v1/public/908aa03/29b3b3743/" ar auto-rotate shadow-intensity=".5"
43
+ camera-controls touch-action="pan-y" autoplay></model-viewer>
44
+
45
+ <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb" ar auto-rotate
46
+ shadow-intensity="1" camera-controls touch-action="pan-y" auto-rotate autoplay field-of-view="10deg"
47
+ max-camera-orbit="auto 90deg auto"></model-viewer>
48
+
49
+ <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/putti gruppe/model.glb" ar auto-rotate
50
+ shadow-intensity="1" camera-controls touch-action="pan-y" auto-rotate autoplay
51
+ max-camera-orbit="auto 90deg auto"></model-viewer>
52
+
53
+ <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/jupiter_und_ganymed/model.glb" ar
54
+ auto-rotate shadow-intensity=".5" camera-controls touch-action="pan-y"></model-viewer>
55
+
56
+ <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/cyberpunk/model.glb" ar auto-rotate
57
+ shadow-intensity=".5" camera-controls touch-action="pan-y" autoplay rotation-per-second="60deg"></model-viewer>
58
+
59
+ </div>
60
+
61
+ <script>
62
+ // Example if a model is loaded after the page has loaded
63
+ document.addEventListener('DOMContentLoaded', () => {
64
+ setTimeout(() => {
65
+ const element = document.createElement('model-viewer');
66
+ element.src = "https://api.cloud.needle.tools/v1/public/9191068/261b4395b/";
67
+ element.setAttribute("camera-controls", "");
68
+ const layout = document.querySelector('.layout');
69
+ layout.appendChild(element);
70
+ }, 2000)
71
+ });
72
+
73
+ </script>
74
+
75
+ <style>
76
+ body {
77
+ margin: 0;
78
+ background-color: rgba(245, 245, 245, 1);
79
+ font-family: "Open Sans", sans-serif;
80
+ font-optical-sizing: auto;
81
+ }
82
+
83
+ * {
84
+ box-sizing: border-box;
85
+ }
86
+
87
+ a {
88
+ text-decoration: none;
89
+ color: #cb0000;
90
+ }
91
+
92
+ .layout {
93
+ position: relative;
94
+ width: 100%;
95
+ min-height: 100%;
96
+
97
+ display: grid;
98
+ grid-template-columns: repeat(auto-fill, minmax(460px, 2fr));
99
+ gap: 1rem;
100
+ padding: 1rem;
101
+ }
102
+
103
+ .layout>* {
104
+ width: 100%;
105
+ height: auto;
106
+ aspect-ratio: 1;
107
+ flex: 1;
108
+ background: white;
109
+ border-radius: .3rem;
110
+ box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
111
+ outline: 1px solid white;
112
+ }
113
+
114
+ .card {
115
+ padding: 1rem;
116
+ max-width: calc(100vw - 2rem);
117
+ }
118
+
119
+ @media screen and (max-width: 800px) {
120
+ .layout {
121
+ grid-template-columns: 1fr;
122
+ }
123
+ }
124
+ </style>
125
+
126
+ </html>
package/dist/examples/modelviewer.html ADDED
@@ -0,0 +1,34 @@
1
+ <html>
2
+
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>gltf-progressive & model-viewer</title>
7
+ <script type="importmap">
8
+ {
9
+ "imports": {
10
+ "three": "https://unpkg.com/three/build/three.module.js",
11
+ "three/": "https://unpkg.com/three/"
12
+ }
13
+ }
14
+ </script>
15
+ <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
16
+ <script type="module"
17
+ src="https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"></script>
18
+ </head>
19
+
20
+ <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb" ar shadow-intensity="1"
21
+ camera-controls touch-action="pan-y" auto-rotate max-camera-orbit="auto 90deg auto"></model-viewer>
22
+
23
+ <style>
24
+ body {
25
+ margin: 0;
26
+ }
27
+
28
+ model-viewer {
29
+ width: 100%;
30
+ height: 100%;
31
+ }
32
+ </style>
33
+
34
+ </html>
package/dist/examples/react-three-fiber/.prettierrc ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "printWidth": 140,
3
+ "tabWidth": 2,
4
+ "useTabs": false,
5
+ "semi": false,
6
+ "singleQuote": true,
7
+ "trailingComma": "none",
8
+ "bracketSpacing": true,
9
+ "jsxBracketSameLine": true
10
+ }
package/dist/examples/react-three-fiber/index.html ADDED
@@ -0,0 +1,24 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" href="favicon.png">
6
+ <meta name="viewport" content="width=device-width, user-scalable=no">
7
+
8
+ <title>react-three-fiber with progressive loading</title>
9
+ <meta name="description" content="🌵 gltf-progressive example">
10
+ <meta name="twitter:card" content="summary_large_image">
11
+ <meta property="og:title" content="react-three-fiber with progressive loading" />
12
+ <meta property="og:description" content="🌵 gltf-progressive example" />
13
+ <meta property="twitter:image" content="" />
14
+ <meta property="og:image" content="" />
15
+
16
+ <meta name="robots" content="index,follow">
17
+ <link rel="stylesheet" href="./src/style.css">
18
+ </head>
19
+
20
+ <body>
21
+ <script type="module" src="./src/index.tsx"></script>
22
+ <div id="root" style="width:100vw; height:100vh;"></div>
23
+ </body>
24
+ </html>