@needle-tools/gltf-progressive 2.0.0-alpha.1 → 2.0.0-alpha.3

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 CHANGED
@@ -1,170 +1,173 @@
1
- # Changelog
2
- All notable changes to this package will be documented in this file.
3
-
4
- The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
5
- and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
6
-
7
- ## [2.0.0-alpha.1] - 2024-12-09
8
- - Add: `Accept` header options for Needle Cloud requests
9
-
10
- ## [1.2.15] - 2024-10-21
11
- - Fix: internal window parameter access causing issue with SSR
12
-
13
- ## [1.2.13] - 2024-10-06
14
- - Update README
15
-
16
- ## [1.2.12] - 2024-09-23
17
- - Add: `assignTextureLOD` now also accepts mesh as parameter
18
- - Change: improved `assignTextureLOD` typing
19
-
20
- ## [1.2.11] - 2024-09-11
21
- - Fix: draco and KTX decoder path handling when gstatic can not be reached and user set path
22
-
23
- ## [1.2.10] - 2024-09-10
24
- - Fix: loading and assigning texture LOD for ShaderMaterial and RawShaderMaterial
25
-
26
- ## [1.2.9] - 2024-07-29
27
- - Fix: server side rendering fixes
28
-
29
- ## [1.2.8] - 2023-07-19
30
- - Add: repository url
31
-
32
- ## [1.2.7] - 2023-07-18
33
- - Fix: include `type: module`
34
-
35
- ## [1.2.5] - 2023-07-16
36
- - Remove: Frustum cull check because we're already operating on the latest renderlist
37
-
38
- ## [1.2.5-beta] - 2023-07-09
39
- - Change: Update skinned mesh bounding box every 30 frames using the lowres mesh version
40
-
41
- ## [1.2.4-beta.1] - 2023-07-09
42
- - Add: LODsManager `manual` property which can be used to manually update the LODs in the scene by calling `LODsManager.update(scene, camera)`
43
- - Fix: updating LODs in WebXR
44
-
45
- ## [1.2.4-beta] - 2023-07-05
46
- - Change: `createLoaders` now returns created loaders and decoders to be re-used
47
-
48
- ## [1.2.3-beta] - 2023-07-04
49
- - Add: support for transmissive objects
50
-
51
- ## [1.2.3-alpha.3] - 2023-07-01
52
- - Add: prevent loading highres textures when user has enabled data-save mode
53
-
54
- ## [1.2.3-alpha.2] - 2023-06-27
55
- - Fix: error caused by parser associations containing `undefined` value
56
-
57
- ## [1.2.3-alpha.1] - 2023-06-25
58
- - Internal: rename `setRaycastMesh` to `registerRaycastMesh`
59
-
60
- ## [1.2.3-alpha] - 2023-06-24
61
- - Change: automatically change LOD update interval based on framerate
62
-
63
- ## [1.2.2-alpha.4] - 2023-06-20
64
- - Add: Register version in global "GLTF_PROGRESSIVE_VERSION" variable
65
- - Add: `<model-viewer>` elements added document at any time are now properly registered
66
- - Fix: LOD updates for multiple `<model-viewer>` elements
67
- - Fix: Initial render tick for a few frames for `<model-viewer>` to trigger LOD updates when the model-viewer element is not animated or interacted with
68
- - Change: `<model-viewer>` elements will fetch a slightly higher texture LOD
69
-
70
- ## [1.2.1-alpha.4] - 2023-06-19
71
- - Fix: SkinnedMesh bounds calculation
72
-
73
- ## [1.2.1-alpha.3] - 2023-06-15
74
- - update the README
75
-
76
- ## [1.2.1-alpha.2] - 2023-06-15
77
- - fix: Ortographic camera causing LODs being falsely updated
78
- - fix: regression introduced in 1.2.1-alpha
79
- - fix: error when trying to load a LOD glTF directly
80
- - fix: issues caused by instanceof in local development environments
81
-
82
- ## [1.2.0-alpha.9] - 2023-06-13
83
- - fix: issue where skinned mesh matrix was falsely applied to calculate screen size
84
- - fix: use bounding box from SkinnedMesh object
85
-
86
- ## [1.2.0-alpha.6] - 2023-06-12
87
- - fix: minor bug where opened glTF has `NEEDLE_progressive` extension but no lods array because the glTF is a LOD variant
88
-
89
- ## [1.2.0-alpha.5] - 2023-06-10
90
- - fix: safeguard when `registerMesh` or `registerTexture` are being called with invalid data
91
- - examples: update vanilla threejs example
92
-
93
- ## [1.2.0-alpha.4] - 2023-06-07
94
- - add: `useRaycastMeshes` method:
95
- ```ts
96
- // call to enable raycasting with low poly raycast meshes
97
- // this can be done once in your project
98
- useRaycastMeshes(true);
99
-
100
- // then use the raycaster as usual
101
- const raycaster = new Raycaster();
102
- raycaster.setFromCamera(mouse, camera);
103
- const intersects = raycaster.intersectObjects(scene.children, true);
104
-
105
- // call to disable raycasting with low polwy meshes
106
- useRaycastMeshes(false);
107
- ```
108
-
109
- ## [1.2.0-alpha.3] - 2023-06-06
110
- - add: automatically load the highest LOD first to show a slightly better quality level as soon as possible
111
- - fix: improve Texture LOD selection by taking LOD level height into account
112
- - fix: correctly assign LOD level information to initially loaded texture
113
-
114
- ## [1.1.0-alpha.2] - 2023-06-05
115
- - fix: register LOD information for meshes that don't have associations
116
-
117
- ## [1.1.0-alpha] - 2023-06-03
118
- - add: loading of multiple texture LOD levels
119
- - fix: issue where material LODs where not updated when the material was cloned
120
- - change: clamp screen coverage when near plane intersects with the object bounds
121
- - change: skip CubeCamera setup
122
- - change: handle cases where an object has only texture LODs
123
-
124
- ## [1.0.0-alpha.19] - 2023-05-31
125
- - add `LODsManager.plugins` getter
126
-
127
- ## [1.0.0-alpha.18] - 2023-05-30
128
- - update README
129
-
130
- ## [1.0.0-alpha.16] - 2023-05-29
131
- - fix: LODs manager now clamps to LOD 0 if the near plane is inside the bounds
132
- - change: Ignore certain material in lods update loop
133
-
134
- ## [1.0.0-alpha.15] - 2023-05-25
135
- - add: `getRaycastMesh` method
136
- - add: LODsManager does now expose `targetTriangleDensity`. The target triangle density is the desired max amount of triangles on screen when the mesh is filling the screen.
137
- - change: create LODsManager via `LODsManager.get(renderer)`
138
-
139
- ## [1.0.0-alpha.13] - 2023-05-24
140
- - fix: modelviewer error when trying to access undefined texture extensions
141
-
142
- ## [1.0.0-alpha.13] - 2023-05-24
143
- - add: vanilla three.js example
144
- - fix: texture LODs losing filter setting
145
-
146
- ## [1.0.0-alpha.12] - 2023-05-19
147
- - fix: update LODs when using postprocessing
148
-
149
- ## [1.0.0-alpha.11] - 2023-05-17
150
- - add: expose `setDracoDecoderLocation` and `setKTX2TranscoderLocation`
151
- - fix: allow using draco decoder and ktx2 transcoder from local filepath
152
-
153
- ## [1.0.0-alpha.10] - 2023-05-07
154
- - fix: progressive assets are now only updated during the main canvas render call and not e.g. when rendering to a texture
155
-
156
- ## [1.0.0-alpha.9] - 2023-05-03
157
- - fix: handle loading of ShaderMaterial for VRM progressive textures
158
-
159
- ## [1.0.0-alpha.8] - 2023-05-03
160
- - fix: handle transparent materials
161
-
162
- ## [1.0.0-alpha.7] - 2023-05-01
163
- - fix: Handle modelviewer `src` set as property but not as attribute
164
- - change: Remove sourcemap
165
-
166
- ## [1.0.0-alpha.6] - 2023-05-01
167
- - fix: LOD mesh assignment for multi-material meshes (meshes with multiple primitives)
168
-
169
- ## [1.0.0-alpha.5] - 2023-04-30
1
+ # Changelog
2
+ All notable changes to this package will be documented in this file.
3
+
4
+ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
5
+ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
6
+
7
+ ## [2.0.0-alpha.3] - 2025-01-02
8
+ - Change: Load higher texture resolution by default
9
+
10
+ ## [2.0.0-alpha.1] - 2024-12-09
11
+ - Add: `Accept` header options for Needle Cloud requests
12
+
13
+ ## [1.2.15] - 2024-10-21
14
+ - Fix: internal window parameter access causing issue with SSR
15
+
16
+ ## [1.2.13] - 2024-10-06
17
+ - Update README
18
+
19
+ ## [1.2.12] - 2024-09-23
20
+ - Add: `assignTextureLOD` now also accepts mesh as parameter
21
+ - Change: improved `assignTextureLOD` typing
22
+
23
+ ## [1.2.11] - 2024-09-11
24
+ - Fix: draco and KTX decoder path handling when gstatic can not be reached and user set path
25
+
26
+ ## [1.2.10] - 2024-09-10
27
+ - Fix: loading and assigning texture LOD for ShaderMaterial and RawShaderMaterial
28
+
29
+ ## [1.2.9] - 2024-07-29
30
+ - Fix: server side rendering fixes
31
+
32
+ ## [1.2.8] - 2023-07-19
33
+ - Add: repository url
34
+
35
+ ## [1.2.7] - 2023-07-18
36
+ - Fix: include `type: module`
37
+
38
+ ## [1.2.5] - 2023-07-16
39
+ - Remove: Frustum cull check because we're already operating on the latest renderlist
40
+
41
+ ## [1.2.5-beta] - 2023-07-09
42
+ - Change: Update skinned mesh bounding box every 30 frames using the lowres mesh version
43
+
44
+ ## [1.2.4-beta.1] - 2023-07-09
45
+ - Add: LODsManager `manual` property which can be used to manually update the LODs in the scene by calling `LODsManager.update(scene, camera)`
46
+ - Fix: updating LODs in WebXR
47
+
48
+ ## [1.2.4-beta] - 2023-07-05
49
+ - Change: `createLoaders` now returns created loaders and decoders to be re-used
50
+
51
+ ## [1.2.3-beta] - 2023-07-04
52
+ - Add: support for transmissive objects
53
+
54
+ ## [1.2.3-alpha.3] - 2023-07-01
55
+ - Add: prevent loading highres textures when user has enabled data-save mode
56
+
57
+ ## [1.2.3-alpha.2] - 2023-06-27
58
+ - Fix: error caused by parser associations containing `undefined` value
59
+
60
+ ## [1.2.3-alpha.1] - 2023-06-25
61
+ - Internal: rename `setRaycastMesh` to `registerRaycastMesh`
62
+
63
+ ## [1.2.3-alpha] - 2023-06-24
64
+ - Change: automatically change LOD update interval based on framerate
65
+
66
+ ## [1.2.2-alpha.4] - 2023-06-20
67
+ - Add: Register version in global "GLTF_PROGRESSIVE_VERSION" variable
68
+ - Add: `<model-viewer>` elements added document at any time are now properly registered
69
+ - Fix: LOD updates for multiple `<model-viewer>` elements
70
+ - Fix: Initial render tick for a few frames for `<model-viewer>` to trigger LOD updates when the model-viewer element is not animated or interacted with
71
+ - Change: `<model-viewer>` elements will fetch a slightly higher texture LOD
72
+
73
+ ## [1.2.1-alpha.4] - 2023-06-19
74
+ - Fix: SkinnedMesh bounds calculation
75
+
76
+ ## [1.2.1-alpha.3] - 2023-06-15
77
+ - update the README
78
+
79
+ ## [1.2.1-alpha.2] - 2023-06-15
80
+ - fix: Ortographic camera causing LODs being falsely updated
81
+ - fix: regression introduced in 1.2.1-alpha
82
+ - fix: error when trying to load a LOD glTF directly
83
+ - fix: issues caused by instanceof in local development environments
84
+
85
+ ## [1.2.0-alpha.9] - 2023-06-13
86
+ - fix: issue where skinned mesh matrix was falsely applied to calculate screen size
87
+ - fix: use bounding box from SkinnedMesh object
88
+
89
+ ## [1.2.0-alpha.6] - 2023-06-12
90
+ - fix: minor bug where opened glTF has `NEEDLE_progressive` extension but no lods array because the glTF is a LOD variant
91
+
92
+ ## [1.2.0-alpha.5] - 2023-06-10
93
+ - fix: safeguard when `registerMesh` or `registerTexture` are being called with invalid data
94
+ - examples: update vanilla threejs example
95
+
96
+ ## [1.2.0-alpha.4] - 2023-06-07
97
+ - add: `useRaycastMeshes` method:
98
+ ```ts
99
+ // call to enable raycasting with low poly raycast meshes
100
+ // this can be done once in your project
101
+ useRaycastMeshes(true);
102
+
103
+ // then use the raycaster as usual
104
+ const raycaster = new Raycaster();
105
+ raycaster.setFromCamera(mouse, camera);
106
+ const intersects = raycaster.intersectObjects(scene.children, true);
107
+
108
+ // call to disable raycasting with low polwy meshes
109
+ useRaycastMeshes(false);
110
+ ```
111
+
112
+ ## [1.2.0-alpha.3] - 2023-06-06
113
+ - add: automatically load the highest LOD first to show a slightly better quality level as soon as possible
114
+ - fix: improve Texture LOD selection by taking LOD level height into account
115
+ - fix: correctly assign LOD level information to initially loaded texture
116
+
117
+ ## [1.1.0-alpha.2] - 2023-06-05
118
+ - fix: register LOD information for meshes that don't have associations
119
+
120
+ ## [1.1.0-alpha] - 2023-06-03
121
+ - add: loading of multiple texture LOD levels
122
+ - fix: issue where material LODs where not updated when the material was cloned
123
+ - change: clamp screen coverage when near plane intersects with the object bounds
124
+ - change: skip CubeCamera setup
125
+ - change: handle cases where an object has only texture LODs
126
+
127
+ ## [1.0.0-alpha.19] - 2023-05-31
128
+ - add `LODsManager.plugins` getter
129
+
130
+ ## [1.0.0-alpha.18] - 2023-05-30
131
+ - update README
132
+
133
+ ## [1.0.0-alpha.16] - 2023-05-29
134
+ - fix: LODs manager now clamps to LOD 0 if the near plane is inside the bounds
135
+ - change: Ignore certain material in lods update loop
136
+
137
+ ## [1.0.0-alpha.15] - 2023-05-25
138
+ - add: `getRaycastMesh` method
139
+ - add: LODsManager does now expose `targetTriangleDensity`. The target triangle density is the desired max amount of triangles on screen when the mesh is filling the screen.
140
+ - change: create LODsManager via `LODsManager.get(renderer)`
141
+
142
+ ## [1.0.0-alpha.13] - 2023-05-24
143
+ - fix: modelviewer error when trying to access undefined texture extensions
144
+
145
+ ## [1.0.0-alpha.13] - 2023-05-24
146
+ - add: vanilla three.js example
147
+ - fix: texture LODs losing filter setting
148
+
149
+ ## [1.0.0-alpha.12] - 2023-05-19
150
+ - fix: update LODs when using postprocessing
151
+
152
+ ## [1.0.0-alpha.11] - 2023-05-17
153
+ - add: expose `setDracoDecoderLocation` and `setKTX2TranscoderLocation`
154
+ - fix: allow using draco decoder and ktx2 transcoder from local filepath
155
+
156
+ ## [1.0.0-alpha.10] - 2023-05-07
157
+ - fix: progressive assets are now only updated during the main canvas render call and not e.g. when rendering to a texture
158
+
159
+ ## [1.0.0-alpha.9] - 2023-05-03
160
+ - fix: handle loading of ShaderMaterial for VRM progressive textures
161
+
162
+ ## [1.0.0-alpha.8] - 2023-05-03
163
+ - fix: handle transparent materials
164
+
165
+ ## [1.0.0-alpha.7] - 2023-05-01
166
+ - fix: Handle modelviewer `src` set as property but not as attribute
167
+ - change: Remove sourcemap
168
+
169
+ ## [1.0.0-alpha.6] - 2023-05-01
170
+ - fix: LOD mesh assignment for multi-material meshes (meshes with multiple primitives)
171
+
172
+ ## [1.0.0-alpha.5] - 2023-04-30
170
173
  - initial version
package/README.md CHANGED
@@ -1,131 +1,131 @@
1
- # glTF progressive
2
-
3
- LODs on steroids for glTF, GLB or VRM files with density based loading for meshes or texture for any three.js based project.
4
-
5
- ## Features
6
- - One line integration in any three.js based engine/project
7
- - Mesh LOD support
8
- - Texture LOD support
9
- - LOD levels are loaded on demand based on mesh screen density
10
- - Low poly LOD meshes can easily be used for raycasting for smooth interactions with high-poly meshes
11
- - Cloud generation and loading support via [cloud.needle.tools](https://cloud.needle.tools) for glTF, GLB & VRM assets
12
-
13
- ## Examples
14
-
15
- Examples are in the `/examples` directory. Live versions can be found in the links below.
16
-
17
- - [Vanilla three.js](https://engine.needle.tools/demos/gltf-progressive/threejs/) - multiple models and animations
18
- - [React Three Fiber](https://engine.needle.tools/demos/gltf-progressive/r3f/)
19
- - \<model-viewer\>
20
- - [single \<model-viewer> element](https://engine.needle.tools/demos/gltf-progressive/modelviewer)
21
- - [multiple \<model-viewer> elements](https://engine.needle.tools/demos/gltf-progressive/modelviewer-multiple)
22
- - [Needle Engine](https://stackblitz.com/edit/needle-engine-gltf-progressive?file=src%2Fmain.ts)
23
- - [Progressive VRM 14 MB to 1 MB](https://cloud.needle.tools/view/91b4450/262927895)
24
-
25
- **Interactive Examples**:
26
- - [Stackblitz](https://stackblitz.com/@marwie/collections/gltf-progressive)
27
- - [Codesandbox](https://codesandbox.io/dashboard/sandboxes/gltf-progressive)
28
-
29
-
30
- <br/>
31
- <video width="320" controls autoplay src="https://engine.needle.tools/demos/gltf-progressive/video.mp4">
32
- <source src="https://engine.needle.tools/demos/gltf-progressive/video.mp4" type="video/mp4">
33
- </video>
34
-
35
-
36
- ## Usage
37
-
38
- ### react three fiber
39
-
40
- Full example in `examples/react-three-fiber`
41
-
42
- ```ts
43
- function ChurchModel() {
44
- const { gl } = useThree()
45
- const url = 'https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb'
46
- const { scene } = useGLTF(url, false, false, (loader) => {
47
- useNeedleProgressive(url, gl, loader as any)
48
- })
49
- return <primitive object={scene} />
50
- }
51
- ```
52
-
53
- ### threejs (CDN, no bundler)
54
-
55
- The full example can be found at `examples/threejs`
56
-
57
- ```html
58
- <head>
59
- <!-- Add the threejs import map to your HTML head section -->
60
- <script type="importmap">
61
- {
62
- "imports": {
63
- "three": "https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js",
64
- "three/addons/": "https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/",
65
- "three/examples/": "https://cdn.jsdelivr.net/npm/three@latest/examples/",
66
- "@needle-engine/gltf-progressive": "https://www.unpkg.com/@needle-tools/gltf-progressive@latest"
67
- }
68
- }
69
- </script>
70
- </head>
71
- ```
72
-
73
- In your script:
74
- ```ts
75
- const gltfLoader = new GLTFLoader();
76
-
77
- const url = "https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb";
78
-
79
- // register the progressive loader
80
- useNeedleProgressive(url, renderer, gltfLoader)
81
-
82
- // just call the load method as usual
83
- gltfLoader.load(url, gltf => {
84
- console.log(gltf)
85
- scene.add(gltf.scene)
86
- gltf.scene.position.y += .95;
87
- })
88
- ```
89
-
90
-
91
- ### \<model-viewer\>
92
-
93
- The example can be found in `examples/modelviewer.html`
94
-
95
- ```html
96
- <head>
97
- <!-- Include threejs import map -->
98
- <script type="importmap">
99
- {
100
- "imports": {
101
- "three": "https://unpkg.com/three/build/three.module.js",
102
- "three/": "https://unpkg.com/three/"
103
- }
104
- }
105
- </script>
106
- <!-- Include gltf-progressive -->
107
- <script type="module" src="https://www.unpkg.com/@needle-tools/gltf-progressive@latest"></script>
108
- <!-- Include model-viewer -->
109
- <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
110
- </head>
111
- <body>
112
-
113
- <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb" camera-controls auto-rotate></model-viewer>
114
-
115
- </body>
116
- ```
117
-
118
- ### Needle Engine
119
-
120
- [Needle Engine](https://needle.tools) natively supports progressive loading of these glTF files! See [docs.needle.tools](https://docs.needle.tools) for more information.
121
-
122
-
123
- Use [cloud.needle.tools](https://cloud.needle.tools) to generate LODs for your assets now.
124
-
125
-
126
- # Contact ✒️
127
- <b>[🌵 needle — tools for creators](https://needle.tools)</b> •
128
- [Twitter](https://twitter.com/NeedleTools) •
129
- [Discord](https://discord.needle.tools) •
130
- [Forum](https://forum.needle.tools)
131
-
1
+ # glTF progressive
2
+
3
+ LODs on steroids for glTF, GLB or VRM files with density based loading for meshes or texture for any three.js based project.
4
+
5
+ ## Features
6
+ - One line integration in any three.js based engine/project
7
+ - Mesh LOD support
8
+ - Texture LOD support
9
+ - LOD levels are loaded on demand based on mesh screen density
10
+ - Low poly LOD meshes can easily be used for raycasting for smooth interactions with high-poly meshes
11
+ - Cloud generation and loading support via [cloud.needle.tools](https://cloud.needle.tools) for glTF, GLB & VRM assets
12
+
13
+ ## Examples
14
+
15
+ Examples are in the `/examples` directory. Live versions can be found in the links below.
16
+
17
+ - [Vanilla three.js](https://engine.needle.tools/demos/gltf-progressive/threejs/) - multiple models and animations
18
+ - [React Three Fiber](https://engine.needle.tools/demos/gltf-progressive/r3f/)
19
+ - \<model-viewer\>
20
+ - [single \<model-viewer> element](https://engine.needle.tools/demos/gltf-progressive/modelviewer)
21
+ - [multiple \<model-viewer> elements](https://engine.needle.tools/demos/gltf-progressive/modelviewer-multiple)
22
+ - [Needle Engine](https://stackblitz.com/edit/needle-engine-gltf-progressive?file=src%2Fmain.ts)
23
+ - [Progressive VRM 14 MB to 1 MB](https://cloud.needle.tools/view/91b4450/262927895)
24
+
25
+ **Interactive Examples**:
26
+ - [Stackblitz](https://stackblitz.com/@marwie/collections/gltf-progressive)
27
+ - [Codesandbox](https://codesandbox.io/dashboard/sandboxes/gltf-progressive)
28
+
29
+
30
+ <br/>
31
+ <video width="320" controls autoplay src="https://engine.needle.tools/demos/gltf-progressive/video.mp4">
32
+ <source src="https://engine.needle.tools/demos/gltf-progressive/video.mp4" type="video/mp4">
33
+ </video>
34
+
35
+
36
+ ## Usage
37
+
38
+ ### react three fiber
39
+
40
+ Full example in `examples/react-three-fiber`
41
+
42
+ ```ts
43
+ function ChurchModel() {
44
+ const { gl } = useThree()
45
+ const url = 'https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb'
46
+ const { scene } = useGLTF(url, false, false, (loader) => {
47
+ useNeedleProgressive(url, gl, loader as any)
48
+ })
49
+ return <primitive object={scene} />
50
+ }
51
+ ```
52
+
53
+ ### threejs (CDN, no bundler)
54
+
55
+ The full example can be found at `examples/threejs`
56
+
57
+ ```html
58
+ <head>
59
+ <!-- Add the threejs import map to your HTML head section -->
60
+ <script type="importmap">
61
+ {
62
+ "imports": {
63
+ "three": "https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js",
64
+ "three/addons/": "https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/",
65
+ "three/examples/": "https://cdn.jsdelivr.net/npm/three@latest/examples/",
66
+ "@needle-engine/gltf-progressive": "https://www.unpkg.com/@needle-tools/gltf-progressive@latest"
67
+ }
68
+ }
69
+ </script>
70
+ </head>
71
+ ```
72
+
73
+ In your script:
74
+ ```ts
75
+ const gltfLoader = new GLTFLoader();
76
+
77
+ const url = "https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb";
78
+
79
+ // register the progressive loader
80
+ useNeedleProgressive(url, renderer, gltfLoader)
81
+
82
+ // just call the load method as usual
83
+ gltfLoader.load(url, gltf => {
84
+ console.log(gltf)
85
+ scene.add(gltf.scene)
86
+ gltf.scene.position.y += .95;
87
+ })
88
+ ```
89
+
90
+
91
+ ### \<model-viewer\>
92
+
93
+ The example can be found in `examples/modelviewer.html`
94
+
95
+ ```html
96
+ <head>
97
+ <!-- Include threejs import map -->
98
+ <script type="importmap">
99
+ {
100
+ "imports": {
101
+ "three": "https://unpkg.com/three/build/three.module.js",
102
+ "three/": "https://unpkg.com/three/"
103
+ }
104
+ }
105
+ </script>
106
+ <!-- Include gltf-progressive -->
107
+ <script type="module" src="https://www.unpkg.com/@needle-tools/gltf-progressive@latest"></script>
108
+ <!-- Include model-viewer -->
109
+ <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
110
+ </head>
111
+ <body>
112
+
113
+ <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb" camera-controls auto-rotate></model-viewer>
114
+
115
+ </body>
116
+ ```
117
+
118
+ ### Needle Engine
119
+
120
+ [Needle Engine](https://needle.tools) natively supports progressive loading of these glTF files! See [docs.needle.tools](https://docs.needle.tools) for more information.
121
+
122
+
123
+ Use [cloud.needle.tools](https://cloud.needle.tools) to generate LODs for your assets now.
124
+
125
+
126
+ # Contact ✒️
127
+ <b>[🌵 needle — tools for creators](https://needle.tools)</b> •
128
+ [Twitter](https://twitter.com/NeedleTools) •
129
+ [Discord](https://discord.needle.tools) •
130
+ [Forum](https://forum.needle.tools)
131
+