@needle-tools/gltf-progressive 1.2.0-alpha.4 → 1.2.0-alpha.6

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 (9) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/README.md +17 -4
  3. package/examples/threejs/main.js +32 -1
  4. package/gltf-progressive.js +234 -222
  5. package/gltf-progressive.min.js +4 -4
  6. package/gltf-progressive.umd.cjs +4 -4
  7. package/lib/extension.js +15 -0
  8. package/lib/lods_manager.js +0 -7
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -4,6 +4,13 @@ All notable changes to this package will be documented in this file.
4
4
  The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
5
5
  and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
6
6
 
7
+ ## [1.2.0-alpha.6] - 2023-06-12
8
+ - fix: minor bug where opened glTF has `NEEDLE_progressive` extension but no lods array because the glTF is a LOD variant
9
+
10
+ ## [1.2.0-alpha.5] - 2023-06-10
11
+ - fix: safeguard when `registerMesh` or `registerTexture` are being called with invalid data
12
+ - examples: update vanilla threejs example
13
+
7
14
  ## [1.2.0-alpha.4] - 2023-06-07
8
15
  - add: `useRaycastMeshes` method:
9
16
  ```ts
package/README.md CHANGED
@@ -12,9 +12,16 @@ Support for loading of glTF or GLB files with progressive mesh or texture data f
12
12
 
13
13
  Examples are in the `/examples` directory. Live versions can be found in the links below.
14
14
 
15
- - [Vanilla three.js](https://engine.needle.tools/demos/gltf-progressive/threejs/)
15
+ - [Vanilla three.js](https://engine.needle.tools/demos/gltf-progressive/threejs/) - multiple models and animations
16
16
  - [\<model-viewer\>](https://engine.needle.tools/demos/gltf-progressive/modelviewer)
17
17
  - [React Three Fiber](https://engine.needle.tools/demos/gltf-progressive/r3f/)
18
+ - [Needle Engine](https://stackblitz.com/edit/needle-engine-gltf-progressive?file=src%2Fmain.ts) - Interactive Example on StackBlitz
19
+
20
+
21
+ <br/>
22
+ <video width="320" controls autoplay src="https://engine.needle.tools/demos/gltf-progressive/video.mp4">
23
+ <source src="https://engine.needle.tools/demos/gltf-progressive/video.mp4" type="video/mp4">
24
+ </video>
18
25
 
19
26
 
20
27
  ## Usage
@@ -74,11 +81,11 @@ gltfLoader.load(url, gltf => {
74
81
 
75
82
  ### \<model-viewer\>
76
83
 
77
- The full example can be found in `examples/modelviewer.html`
84
+ The example can be found in `examples/modelviewer.html`
78
85
 
79
86
  ```html
80
87
  <head>
81
- <!-- Include the import map and the gltf-progressive package -->
88
+ <!-- Include threejs import map -->
82
89
  <script type="importmap">
83
90
  {
84
91
  "imports": {
@@ -87,16 +94,22 @@ The full example can be found in `examples/modelviewer.html`
87
94
  }
88
95
  }
89
96
  </script>
97
+ <!-- Include gltf-progressive -->
90
98
  <script type="module" src="https://www.unpkg.com/@needle-tools/gltf-progressive@latest"></script>
99
+ <!-- Include model-viewer -->
91
100
  <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
92
101
  </head>
93
102
  <body>
94
103
 
95
104
  <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb" camera-controls auto-rotate></model-viewer>
96
105
 
97
- ...
106
+ </body>
98
107
  ```
99
108
 
109
+ ### Needle Engine
110
+
111
+ [Needle Engine](https://needle.tools) natively supports progressive loading of these glTF files! See [docs.needle.tools](https://docs.needle.tools) for more information.
112
+
100
113
 
101
114
  # Contact ✒️
102
115
  <b>[🌵 needle — tools for creators](https://needle.tools)</b> •
package/examples/threejs/main.js CHANGED
@@ -58,6 +58,7 @@ new EXRLoader().load(environmentTextureUrl, texture => {
58
58
 
59
59
  const modelUrls = [
60
60
  "https://engine.needle.tools/demos/gltf-progressive/assets/putti gruppe/model.glb",
61
+ "https://engine.needle.tools/demos/gltf-progressive/assets/cyberpunk/model.glb",
61
62
  "https://engine.needle.tools/demos/gltf-progressive/assets/robot/model.glb",
62
63
  "https://engine.needle.tools/demos/gltf-progressive/assets/vase/model.glb",
63
64
  "https://engine.needle.tools/demos/gltf-progressive/assets/jupiter_und_ganymed/model.glb",
@@ -67,6 +68,8 @@ let currentUrl = "";
67
68
  /** @type {null | THREE.Scene} */
68
69
  let currentScene = null;
69
70
  let wireframe = false;
71
+ /** @type {null | THREE.AnimationMixer} */
72
+ let animationMixer = null;
70
73
 
71
74
  function loadScene() {
72
75
  let currentIndex = modelUrls.indexOf(currentUrl);
@@ -77,6 +80,10 @@ function loadScene() {
77
80
  const url = modelUrls[currentIndex];
78
81
  currentUrl = url;
79
82
  wireframe = false;
83
+ if (animationMixer) {
84
+ animationMixer.stopAllAction();
85
+ animationMixer = null;
86
+ }
80
87
 
81
88
  // Integrate @needle-tools/gltf-progressive
82
89
  // Create a new GLTFLoader instance
@@ -99,11 +106,33 @@ function loadScene() {
99
106
  if (url.includes("church")) {
100
107
  gltf.scene.scale.multiplyScalar(.1);
101
108
  }
109
+ else if (url.includes("cyberpunk")) {
110
+ gltf.scene.scale.multiplyScalar(15);
111
+ }
112
+
113
+ if (gltf.animations?.length) {
114
+ console.log("Playing animation", gltf.animations)
115
+ animationMixer = new THREE.AnimationMixer(gltf.scene);
116
+ const action = animationMixer.clipAction(gltf.animations[0]);
117
+ action.setLoop(THREE.LoopRepeat);
118
+ action.play();
119
+ }
102
120
  })
103
121
  }
104
122
  loadScene();
105
123
 
106
124
 
125
+ const clock = new THREE.Clock();
126
+ function loop() {
127
+ const dt = clock.getDelta();
128
+ if (animationMixer) {
129
+ animationMixer.update(dt);
130
+ }
131
+ window.requestAnimationFrame(loop);
132
+ }
133
+ window.requestAnimationFrame(loop);
134
+
135
+
107
136
  useRaycastMeshes();
108
137
  const raycaster = new THREE.Raycaster();
109
138
  raycaster.params.Line.threshold = 0;
@@ -115,7 +144,9 @@ window.addEventListener("click", evt => {
115
144
  raycaster.setFromCamera(mousePos, camera);
116
145
  const hits = raycaster.intersectObjects(scene.children, true);
117
146
  if (hits?.length) {
118
- const obj = hits[0].object;
147
+ const hit = hits[0];
148
+ const obj = hit.object;
149
+ console.log("HIT", obj.name, hit)
119
150
  const raycastMesh = getRaycastMesh(obj);
120
151
  if (raycastMesh) {
121
152
  const newMesh = new THREE.Mesh(raycastMesh, new THREE.MeshBasicMaterial({ color: 0xffddff, wireframe: true, transparent: true, opacity: .5, depthTest: false }));