@needle-tools/gltf-progressive 1.2.0-alpha.3 → 1.2.0-alpha.4
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 +16 -0
- package/examples/threejs/index.html +1 -0
- package/examples/threejs/main.js +43 -5
- package/gltf-progressive.js +355 -329
- package/gltf-progressive.min.js +4 -4
- package/gltf-progressive.umd.cjs +4 -4
- package/lib/utils.d.ts +17 -1
- package/lib/utils.js +64 -10
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,22 @@ 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.4] - 2023-06-07
|
|
8
|
+
- add: `useRaycastMeshes` method:
|
|
9
|
+
```ts
|
|
10
|
+
// call to enable raycasting with low poly raycast meshes
|
|
11
|
+
// this can be done once in your project
|
|
12
|
+
useRaycastMeshes(true);
|
|
13
|
+
|
|
14
|
+
// then use the raycaster as usual
|
|
15
|
+
const raycaster = new Raycaster();
|
|
16
|
+
raycaster.setFromCamera(mouse, camera);
|
|
17
|
+
const intersects = raycaster.intersectObjects(scene.children, true);
|
|
18
|
+
|
|
19
|
+
// call to disable raycasting with low polwy meshes
|
|
20
|
+
useRaycastMeshes(false);
|
|
21
|
+
```
|
|
22
|
+
|
|
7
23
|
## [1.2.0-alpha.3] - 2023-06-06
|
|
8
24
|
- add: automatically load the highest LOD first to show a slightly better quality level as soon as possible
|
|
9
25
|
- fix: improve Texture LOD selection by taking LOD level height into account
|
package/examples/threejs/main.js
CHANGED
|
@@ -2,7 +2,7 @@ import * as THREE from 'three';
|
|
|
2
2
|
import { EXRLoader } from 'three/addons/loaders/EXRLoader.js';
|
|
3
3
|
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
|
4
4
|
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
|
5
|
-
import { useNeedleProgressive, getRaycastMesh } from "https://www.unpkg.com/@needle-tools/gltf-progressive@latest"
|
|
5
|
+
import { useNeedleProgressive, getRaycastMesh, useRaycastMeshes } from "https://www.unpkg.com/@needle-tools/gltf-progressive@latest"
|
|
6
6
|
import { Pane } from 'https://cdn.jsdelivr.net/npm/tweakpane@4.0.3/dist/tweakpane.min.js';
|
|
7
7
|
|
|
8
8
|
|
|
@@ -66,6 +66,7 @@ const modelUrls = [
|
|
|
66
66
|
let currentUrl = "";
|
|
67
67
|
/** @type {null | THREE.Scene} */
|
|
68
68
|
let currentScene = null;
|
|
69
|
+
let wireframe = false;
|
|
69
70
|
|
|
70
71
|
function loadScene() {
|
|
71
72
|
let currentIndex = modelUrls.indexOf(currentUrl);
|
|
@@ -75,7 +76,7 @@ function loadScene() {
|
|
|
75
76
|
}
|
|
76
77
|
const url = modelUrls[currentIndex];
|
|
77
78
|
currentUrl = url;
|
|
78
|
-
|
|
79
|
+
wireframe = false;
|
|
79
80
|
|
|
80
81
|
// Integrate @needle-tools/gltf-progressive
|
|
81
82
|
// Create a new GLTFLoader instance
|
|
@@ -103,10 +104,47 @@ function loadScene() {
|
|
|
103
104
|
loadScene();
|
|
104
105
|
|
|
105
106
|
|
|
107
|
+
useRaycastMeshes();
|
|
108
|
+
const raycaster = new THREE.Raycaster();
|
|
109
|
+
raycaster.params.Line.threshold = 0;
|
|
110
|
+
window.addEventListener("click", evt => {
|
|
111
|
+
const mousePos = {
|
|
112
|
+
x: (evt.clientX / window.innerWidth) * 2 - 1,
|
|
113
|
+
y: -(evt.clientY / window.innerHeight) * 2 + 1
|
|
114
|
+
}
|
|
115
|
+
raycaster.setFromCamera(mousePos, camera);
|
|
116
|
+
const hits = raycaster.intersectObjects(scene.children, true);
|
|
117
|
+
if (hits?.length) {
|
|
118
|
+
const obj = hits[0].object;
|
|
119
|
+
const raycastMesh = getRaycastMesh(obj);
|
|
120
|
+
if (raycastMesh) {
|
|
121
|
+
const newMesh = new THREE.Mesh(raycastMesh, new THREE.MeshBasicMaterial({ color: 0xffddff, wireframe: true, transparent: true, opacity: .5, depthTest: false }));
|
|
122
|
+
newMesh.matrix.copy(obj.matrixWorld);
|
|
123
|
+
newMesh.matrixAutoUpdate = false;
|
|
124
|
+
scene.add(newMesh);
|
|
125
|
+
setTimeout(() => {
|
|
126
|
+
newMesh.removeFromParent();
|
|
127
|
+
}, 1000)
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
})
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
106
135
|
|
|
107
136
|
const pane = new Pane();
|
|
108
|
-
|
|
137
|
+
pane.addButton({
|
|
109
138
|
title: 'Change Scene',
|
|
139
|
+
}).on('click', loadScene);
|
|
140
|
+
|
|
141
|
+
pane.addButton({
|
|
142
|
+
title: 'Toggle Wireframe',
|
|
143
|
+
}).on('click', () => {
|
|
144
|
+
wireframe = !wireframe;
|
|
145
|
+
scene.traverse(child => {
|
|
146
|
+
if (child instanceof THREE.Mesh) {
|
|
147
|
+
child.material.wireframe = wireframe;
|
|
148
|
+
}
|
|
149
|
+
})
|
|
110
150
|
});
|
|
111
|
-
|
|
112
|
-
btn.on('click', loadScene);
|