@tonybfox/threejs-tools 1.0.1 → 1.0.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/dist/asset-loader/index.cjs +27 -6
- package/dist/asset-loader/index.cjs.map +1 -1
- package/dist/asset-loader/index.d.mts +2 -1
- package/dist/asset-loader/index.d.ts +2 -1
- package/dist/asset-loader/index.mjs +1 -1
- package/dist/camera/index.cjs +91 -2
- package/dist/camera/index.cjs.map +1 -1
- package/dist/camera/index.d.mts +22 -1
- package/dist/camera/index.d.ts +22 -1
- package/dist/camera/index.mjs +1 -1
- package/dist/{chunk-WMHEIUXE.mjs → chunk-IEE7DQOU.mjs} +92 -3
- package/dist/chunk-IEE7DQOU.mjs.map +1 -0
- package/dist/{chunk-4KUCMK3Q.mjs → chunk-VETFQ3IQ.mjs} +5 -5
- package/dist/chunk-VETFQ3IQ.mjs.map +1 -0
- package/dist/{chunk-L4VIIJZD.mjs → chunk-WZ6IGBSE.mjs} +28 -7
- package/dist/chunk-WZ6IGBSE.mjs.map +1 -0
- package/dist/index.cjs +122 -12
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.mjs +3 -3
- package/dist/view-helper/index.cjs +4 -4
- package/dist/view-helper/index.cjs.map +1 -1
- package/dist/view-helper/index.mjs +1 -1
- package/package.json +1 -1
- package/dist/chunk-4KUCMK3Q.mjs.map +0 -1
- package/dist/chunk-L4VIIJZD.mjs.map +0 -1
- package/dist/chunk-WMHEIUXE.mjs.map +0 -1
|
@@ -64,6 +64,7 @@ var DualCameraControls = class extends CameraControls {
|
|
|
64
64
|
const initialCamera = initialMode === "orthographic" ? orthographicCamera : perspectiveCamera;
|
|
65
65
|
super(initialCamera, domElement);
|
|
66
66
|
this.updateClock = new THREE.Clock();
|
|
67
|
+
this.externalCamera = null;
|
|
67
68
|
const initialTarget = toVector3(
|
|
68
69
|
options.initialTarget,
|
|
69
70
|
[0, 0, 0],
|
|
@@ -99,9 +100,10 @@ var DualCameraControls = class extends CameraControls {
|
|
|
99
100
|
* Switch to the perspective camera while keeping the current framing.
|
|
100
101
|
*/
|
|
101
102
|
switchToPerspective(enableTransition = false) {
|
|
102
|
-
if (this.activeMode === "perspective") {
|
|
103
|
+
if (this.activeMode === "perspective" && !this.externalCamera) {
|
|
103
104
|
return;
|
|
104
105
|
}
|
|
106
|
+
this.externalCamera = null;
|
|
105
107
|
const target = this.getTarget(tempVec3A);
|
|
106
108
|
const position = this.getPosition(tempVec3B);
|
|
107
109
|
const aspect = resolveAspect(this.renderer, this.domElementRef);
|
|
@@ -133,9 +135,10 @@ var DualCameraControls = class extends CameraControls {
|
|
|
133
135
|
* Switch to the orthographic camera while keeping the current framing.
|
|
134
136
|
*/
|
|
135
137
|
switchToOrthographic(enableTransition = false) {
|
|
136
|
-
if (this.activeMode === "orthographic") {
|
|
138
|
+
if (this.activeMode === "orthographic" && !this.externalCamera) {
|
|
137
139
|
return;
|
|
138
140
|
}
|
|
141
|
+
this.externalCamera = null;
|
|
139
142
|
const target = this.getTarget(tempVec3A);
|
|
140
143
|
const position = this.getPosition(tempVec3B);
|
|
141
144
|
const aspect = resolveAspect(this.renderer, this.domElementRef);
|
|
@@ -173,6 +176,92 @@ var DualCameraControls = class extends CameraControls {
|
|
|
173
176
|
this.switchToPerspective(enableTransition);
|
|
174
177
|
}
|
|
175
178
|
}
|
|
179
|
+
/**
|
|
180
|
+
* Returns true if currently using an external camera.
|
|
181
|
+
*/
|
|
182
|
+
get isUsingExternalCamera() {
|
|
183
|
+
return this.externalCamera !== null;
|
|
184
|
+
}
|
|
185
|
+
/**
|
|
186
|
+
* Sets an external camera to use with the controls.
|
|
187
|
+
* This allows using a camera created outside of DualCameraControls.
|
|
188
|
+
* Call `clearExternalCamera()` to return to the internal cameras.
|
|
189
|
+
*/
|
|
190
|
+
setCamera(camera, target, enableTransition = false) {
|
|
191
|
+
const previousCamera = this.camera;
|
|
192
|
+
this.externalCamera = camera;
|
|
193
|
+
const aspect = resolveAspect(this.renderer, this.domElementRef);
|
|
194
|
+
if (camera.type === "PerspectiveCamera") {
|
|
195
|
+
;
|
|
196
|
+
camera.aspect = aspect;
|
|
197
|
+
camera.updateProjectionMatrix();
|
|
198
|
+
} else if (camera.type === "OrthographicCamera") {
|
|
199
|
+
const ortho = camera;
|
|
200
|
+
const currentHeight = (ortho.top - ortho.bottom) * 0.5;
|
|
201
|
+
const newHalfWidth = currentHeight * aspect;
|
|
202
|
+
ortho.left = -newHalfWidth;
|
|
203
|
+
ortho.right = newHalfWidth;
|
|
204
|
+
ortho.updateProjectionMatrix();
|
|
205
|
+
}
|
|
206
|
+
this.camera = camera;
|
|
207
|
+
const mode = camera.type === "PerspectiveCamera" ? "perspective" : "orthographic";
|
|
208
|
+
this.activeMode = mode;
|
|
209
|
+
this.updateInputBindingsForMode(mode);
|
|
210
|
+
const targetVec = toVector3(target, [0, 0, 0], tempVec3A);
|
|
211
|
+
void this.setLookAt(
|
|
212
|
+
camera.position.x,
|
|
213
|
+
camera.position.y,
|
|
214
|
+
camera.position.z,
|
|
215
|
+
targetVec.x,
|
|
216
|
+
targetVec.y,
|
|
217
|
+
targetVec.z,
|
|
218
|
+
enableTransition
|
|
219
|
+
);
|
|
220
|
+
this.dispatchEvent({
|
|
221
|
+
type: "externalcamerachange",
|
|
222
|
+
camera,
|
|
223
|
+
previousCamera
|
|
224
|
+
});
|
|
225
|
+
}
|
|
226
|
+
/**
|
|
227
|
+
* Clears the external camera and returns to using the internal cameras.
|
|
228
|
+
* Will switch to the camera matching the current mode.
|
|
229
|
+
*/
|
|
230
|
+
clearExternalCamera(enableTransition = false) {
|
|
231
|
+
if (!this.externalCamera) {
|
|
232
|
+
return;
|
|
233
|
+
}
|
|
234
|
+
const target = this.getTarget(tempVec3A);
|
|
235
|
+
const position = this.getPosition(tempVec3B);
|
|
236
|
+
this.externalCamera = null;
|
|
237
|
+
const internalCamera = this.activeMode === "orthographic" ? this.orthographicCamera : this.perspectiveCamera;
|
|
238
|
+
internalCamera.position.copy(position);
|
|
239
|
+
internalCamera.quaternion.copy(this.camera.quaternion);
|
|
240
|
+
internalCamera.up.copy(this.camera.up);
|
|
241
|
+
const aspect = resolveAspect(this.renderer, this.domElementRef);
|
|
242
|
+
if (this.activeMode === "orthographic") {
|
|
243
|
+
this.updateOrthographicFrustum(position, target, aspect);
|
|
244
|
+
} else {
|
|
245
|
+
this.perspectiveCamera.aspect = aspect;
|
|
246
|
+
this.perspectiveCamera.updateProjectionMatrix();
|
|
247
|
+
}
|
|
248
|
+
this.camera = internalCamera;
|
|
249
|
+
void this.setLookAt(
|
|
250
|
+
position.x,
|
|
251
|
+
position.y,
|
|
252
|
+
position.z,
|
|
253
|
+
target.x,
|
|
254
|
+
target.y,
|
|
255
|
+
target.z,
|
|
256
|
+
enableTransition
|
|
257
|
+
);
|
|
258
|
+
this.dispatchEvent({
|
|
259
|
+
type: "modechange",
|
|
260
|
+
mode: this.activeMode,
|
|
261
|
+
previousMode: this.activeMode,
|
|
262
|
+
camera: internalCamera
|
|
263
|
+
});
|
|
264
|
+
}
|
|
176
265
|
/**
|
|
177
266
|
* Update camera projection parameters when the viewport size changes.
|
|
178
267
|
*/
|
|
@@ -266,4 +355,4 @@ function resolveAspect(renderer, domElement) {
|
|
|
266
355
|
export {
|
|
267
356
|
DualCameraControls
|
|
268
357
|
};
|
|
269
|
-
//# sourceMappingURL=chunk-
|
|
358
|
+
//# sourceMappingURL=chunk-IEE7DQOU.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../packages/camera/src/DualCameraControls.ts"],"sourcesContent":["import * as THREE from 'three'\nimport CameraControls from 'camera-controls'\n\ntype Vector3Tuple = [number, number, number]\ntype Vector3Like = THREE.Vector3 | Vector3Tuple\n\nexport type CameraMode = 'perspective' | 'orthographic'\n\nexport interface PerspectiveCameraConfig {\n fov?: number\n near?: number\n far?: number\n position?: Vector3Like\n zoom?: number\n}\n\nexport interface OrthographicCameraConfig {\n size?: number\n near?: number\n far?: number\n position?: Vector3Like\n zoom?: number\n}\n\nexport interface DualCameraControlsOptions {\n domElement?: HTMLElement\n initialMode?: CameraMode\n initialTarget?: Vector3Like\n perspective?: PerspectiveCameraConfig\n orthographic?: OrthographicCameraConfig\n}\n\nexport interface ModeChangedEvent {\n type: 'modechange'\n mode: CameraMode\n previousMode: CameraMode\n camera: THREE.PerspectiveCamera | THREE.OrthographicCamera\n}\n\nexport interface ExternalCameraChangedEvent {\n type: 'externalcamerachange'\n camera: THREE.PerspectiveCamera | THREE.OrthographicCamera\n previousCamera: THREE.PerspectiveCamera | THREE.OrthographicCamera\n}\n\nlet controlsInstalled = false\n\nconst tempVec3A = new THREE.Vector3()\nconst tempVec3B = new THREE.Vector3()\nconst tempVec2 = new THREE.Vector2()\n\nfunction ensureCameraControlsInstalled() {\n if (!controlsInstalled) {\n CameraControls.install({ THREE })\n controlsInstalled = true\n }\n}\n\nfunction toVector3(\n value: Vector3Like | undefined,\n fallback: Vector3Tuple,\n target: THREE.Vector3\n) {\n if (!value) {\n target.set(fallback[0], fallback[1], fallback[2])\n return target\n }\n\n if (Array.isArray(value)) {\n target.set(value[0], value[1], value[2])\n return target\n }\n\n target.copy(value)\n return target\n}\n\n/**\n * Camera controls that manage both perspective and orthographic cameras while\n * extending {@link CameraControls}. Provides helpers to toggle between the\n * camera types and keep the framing consistent.\n */\nexport class DualCameraControls extends CameraControls {\n readonly perspectiveCamera: THREE.PerspectiveCamera\n readonly orthographicCamera: THREE.OrthographicCamera\n\n private readonly renderer: THREE.WebGLRenderer\n private readonly domElementRef: HTMLElement\n private activeMode: CameraMode\n private readonly minOrthoHalfHeight: number\n private readonly updateClock = new THREE.Clock()\n private externalCamera:\n | THREE.PerspectiveCamera\n | THREE.OrthographicCamera\n | null = null\n\n constructor(\n renderer: THREE.WebGLRenderer,\n options: DualCameraControlsOptions = {}\n ) {\n ensureCameraControlsInstalled()\n\n const { domElement = renderer.domElement } = options\n const aspect = resolveAspect(renderer, domElement)\n\n const perspectiveConfig = options.perspective ?? {}\n const orthographicConfig = options.orthographic ?? {}\n\n const perspectiveCamera = new THREE.PerspectiveCamera(\n perspectiveConfig.fov ?? 60,\n aspect,\n perspectiveConfig.near ?? 0.1,\n perspectiveConfig.far ?? 2000\n )\n\n perspectiveCamera.position.copy(\n toVector3(perspectiveConfig.position, [12, 12, 12], new THREE.Vector3())\n )\n\n if (perspectiveConfig.zoom !== undefined) {\n perspectiveCamera.zoom = perspectiveConfig.zoom\n perspectiveCamera.updateProjectionMatrix()\n }\n\n const orthoHalfHeight = Math.max(orthographicConfig.size ?? 20, 0.001) * 0.5\n const orthoHalfWidth = orthoHalfHeight * aspect\n\n const orthographicCamera = new THREE.OrthographicCamera(\n -orthoHalfWidth,\n orthoHalfWidth,\n orthoHalfHeight,\n -orthoHalfHeight,\n orthographicConfig.near ?? 0.1,\n orthographicConfig.far ?? 2000\n )\n\n orthographicCamera.position.copy(\n toVector3(orthographicConfig.position, [12, 12, 12], new THREE.Vector3())\n )\n\n if (orthographicConfig.zoom !== undefined) {\n orthographicCamera.zoom = orthographicConfig.zoom\n orthographicCamera.updateProjectionMatrix()\n }\n\n const initialMode = options.initialMode ?? 'perspective'\n const initialCamera =\n initialMode === 'orthographic' ? orthographicCamera : perspectiveCamera\n\n super(initialCamera, domElement)\n\n const initialTarget = toVector3(\n options.initialTarget,\n [0, 0, 0],\n new THREE.Vector3()\n )\n void this.setLookAt(\n initialCamera.position.x,\n initialCamera.position.y,\n initialCamera.position.z,\n initialTarget.x,\n initialTarget.y,\n initialTarget.z,\n false\n )\n\n this.renderer = renderer\n this.domElementRef = domElement\n this.perspectiveCamera = perspectiveCamera\n this.orthographicCamera = orthographicCamera\n this.activeMode = initialMode\n this.minOrthoHalfHeight = orthoHalfHeight\n\n this.updateInputBindingsForMode(initialMode)\n }\n\n get mode(): CameraMode {\n return this.activeMode\n }\n\n /**\n * Returns the currently active camera instance.\n */\n get activeCamera(): THREE.PerspectiveCamera | THREE.OrthographicCamera {\n return this.camera\n }\n\n /**\n * Switch to the perspective camera while keeping the current framing.\n */\n switchToPerspective(enableTransition = false) {\n if (this.activeMode === 'perspective' && !this.externalCamera) {\n return\n }\n\n // Clear external camera if set\n this.externalCamera = null\n\n const target = this.getTarget(tempVec3A)\n const position = this.getPosition(tempVec3B)\n\n const aspect = resolveAspect(this.renderer, this.domElementRef)\n this.perspectiveCamera.aspect = aspect\n this.perspectiveCamera.position.copy(position)\n this.perspectiveCamera.quaternion.copy(this.camera.quaternion)\n this.perspectiveCamera.up.copy(this.camera.up)\n this.perspectiveCamera.updateProjectionMatrix()\n\n this.camera = this.perspectiveCamera\n this.activeMode = 'perspective'\n this.updateInputBindingsForMode('perspective')\n\n void this.setLookAt(\n position.x,\n position.y,\n position.z,\n target.x,\n target.y,\n target.z,\n enableTransition\n )\n\n this.dispatchEvent({\n type: 'modechange',\n mode: this.activeMode,\n previousMode: 'orthographic',\n camera: this.perspectiveCamera,\n } satisfies ModeChangedEvent)\n }\n\n /**\n * Switch to the orthographic camera while keeping the current framing.\n */\n switchToOrthographic(enableTransition = false) {\n if (this.activeMode === 'orthographic' && !this.externalCamera) {\n return\n }\n\n // Clear external camera if set\n this.externalCamera = null\n\n const target = this.getTarget(tempVec3A)\n const position = this.getPosition(tempVec3B)\n\n const aspect = resolveAspect(this.renderer, this.domElementRef)\n this.updateOrthographicFrustum(position, target, aspect)\n\n this.orthographicCamera.position.copy(position)\n this.orthographicCamera.quaternion.copy(this.camera.quaternion)\n this.orthographicCamera.up.copy(this.camera.up)\n this.orthographicCamera.updateProjectionMatrix()\n\n this.camera = this.orthographicCamera\n this.activeMode = 'orthographic'\n this.updateInputBindingsForMode('orthographic')\n\n void this.setLookAt(\n position.x,\n position.y,\n position.z,\n target.x,\n target.y,\n target.z,\n enableTransition\n )\n\n this.dispatchEvent({\n type: 'modechange',\n mode: this.activeMode,\n previousMode: 'perspective',\n camera: this.orthographicCamera,\n } satisfies ModeChangedEvent)\n }\n\n /**\n * Toggles between perspective and orthographic camera modes.\n */\n toggleCameraMode(enableTransition = false) {\n if (this.activeMode === 'perspective') {\n this.switchToOrthographic(enableTransition)\n } else {\n this.switchToPerspective(enableTransition)\n }\n }\n\n /**\n * Returns true if currently using an external camera.\n */\n get isUsingExternalCamera(): boolean {\n return this.externalCamera !== null\n }\n\n /**\n * Sets an external camera to use with the controls.\n * This allows using a camera created outside of DualCameraControls.\n * Call `clearExternalCamera()` to return to the internal cameras.\n */\n setCamera(\n camera: THREE.PerspectiveCamera | THREE.OrthographicCamera,\n target?: Vector3Like,\n enableTransition = false\n ) {\n const previousCamera = this.camera\n this.externalCamera = camera\n\n // Update aspect/frustum for the external camera\n const aspect = resolveAspect(this.renderer, this.domElementRef)\n if (camera.type === 'PerspectiveCamera') {\n ;(camera as THREE.PerspectiveCamera).aspect = aspect\n camera.updateProjectionMatrix()\n } else if (camera.type === 'OrthographicCamera') {\n // Maintain the camera's existing frustum proportions but update aspect\n const ortho = camera as THREE.OrthographicCamera\n const currentHeight = (ortho.top - ortho.bottom) * 0.5\n const newHalfWidth = currentHeight * aspect\n ortho.left = -newHalfWidth\n ortho.right = newHalfWidth\n ortho.updateProjectionMatrix()\n }\n\n this.camera = camera\n const mode: CameraMode =\n camera.type === 'PerspectiveCamera' ? 'perspective' : 'orthographic'\n this.activeMode = mode\n this.updateInputBindingsForMode(mode)\n\n // Set up the camera position and target in the controls\n const targetVec = toVector3(target, [0, 0, 0], tempVec3A)\n void this.setLookAt(\n camera.position.x,\n camera.position.y,\n camera.position.z,\n targetVec.x,\n targetVec.y,\n targetVec.z,\n enableTransition\n )\n\n this.dispatchEvent({\n type: 'externalcamerachange',\n camera,\n previousCamera,\n } satisfies ExternalCameraChangedEvent)\n }\n\n /**\n * Clears the external camera and returns to using the internal cameras.\n * Will switch to the camera matching the current mode.\n */\n clearExternalCamera(enableTransition = false) {\n if (!this.externalCamera) {\n return\n }\n\n const target = this.getTarget(tempVec3A)\n const position = this.getPosition(tempVec3B)\n\n this.externalCamera = null\n\n // Return to the internal camera matching the current mode\n const internalCamera =\n this.activeMode === 'orthographic'\n ? this.orthographicCamera\n : this.perspectiveCamera\n\n internalCamera.position.copy(position)\n internalCamera.quaternion.copy(this.camera.quaternion)\n internalCamera.up.copy(this.camera.up)\n\n const aspect = resolveAspect(this.renderer, this.domElementRef)\n if (this.activeMode === 'orthographic') {\n this.updateOrthographicFrustum(position, target, aspect)\n } else {\n this.perspectiveCamera.aspect = aspect\n this.perspectiveCamera.updateProjectionMatrix()\n }\n\n this.camera = internalCamera\n\n void this.setLookAt(\n position.x,\n position.y,\n position.z,\n target.x,\n target.y,\n target.z,\n enableTransition\n )\n\n this.dispatchEvent({\n type: 'modechange',\n mode: this.activeMode,\n previousMode: this.activeMode,\n camera: internalCamera,\n } satisfies ModeChangedEvent)\n }\n\n /**\n * Update camera projection parameters when the viewport size changes.\n */\n handleResize(width: number, height: number) {\n const aspect = height === 0 ? 1 : width / height\n\n this.perspectiveCamera.aspect = aspect\n this.perspectiveCamera.updateProjectionMatrix()\n\n const target = this.getTarget(tempVec3A)\n const position = this.getPosition(tempVec3B)\n this.updateOrthographicFrustum(position, target, aspect)\n\n if (this.activeMode === 'orthographic') {\n this.camera = this.orthographicCamera\n void this.setLookAt(\n position.x,\n position.y,\n position.z,\n target.x,\n target.y,\n target.z,\n false\n )\n }\n }\n\n /**\n * Moves the camera to a new position and target.\n */\n moveCamera(\n position: Vector3Like,\n target: Vector3Like,\n enableTransition = true\n ) {\n toVector3(position, [0, 0, 0], tempVec3A)\n toVector3(target, [0, 0, 0], tempVec3B)\n\n return this.setLookAt(\n tempVec3A.x,\n tempVec3A.y,\n tempVec3A.z,\n tempVec3B.x,\n tempVec3B.y,\n tempVec3B.z,\n enableTransition\n )\n }\n\n /**\n * Updates the controls using an internally managed clock.\n * Useful when you don't want to pass delta time each frame.\n */\n updateDelta(): ReturnType<CameraControls['update']> {\n const delta = this.updateClock.getDelta()\n return super.update(delta)\n }\n\n private updateInputBindingsForMode(mode: CameraMode) {\n const { ACTION } = CameraControls\n\n if (mode === 'orthographic') {\n this.mouseButtons.left = ACTION.TRUCK\n this.mouseButtons.right = ACTION.ROTATE\n this.mouseButtons.wheel = ACTION.ZOOM\n this.touches.one = ACTION.TOUCH_TRUCK\n this.touches.two = ACTION.TOUCH_ZOOM_TRUCK\n } else {\n this.mouseButtons.left = ACTION.ROTATE\n this.mouseButtons.right = ACTION.TRUCK\n this.mouseButtons.wheel = ACTION.DOLLY\n this.touches.one = ACTION.TOUCH_ROTATE\n this.touches.two = ACTION.TOUCH_DOLLY_TRUCK\n }\n }\n\n private updateOrthographicFrustum(\n position: THREE.Vector3,\n target: THREE.Vector3,\n aspect: number\n ) {\n const distance = Math.max(position.distanceTo(target), 0.001)\n const fov = this.perspectiveCamera.fov\n const halfHeight = Math.max(\n distance * Math.tan(THREE.MathUtils.degToRad(fov * 0.5)),\n this.minOrthoHalfHeight\n )\n const halfWidth = halfHeight * aspect\n\n this.orthographicCamera.left = -halfWidth\n this.orthographicCamera.right = halfWidth\n this.orthographicCamera.top = halfHeight\n this.orthographicCamera.bottom = -halfHeight\n this.orthographicCamera.updateProjectionMatrix()\n }\n}\n\nfunction resolveAspect(\n renderer: THREE.WebGLRenderer,\n domElement: HTMLElement\n): number {\n const size = renderer.getSize(tempVec2)\n if (size.y > 0) {\n return size.x / size.y\n }\n\n const { clientWidth, clientHeight } = domElement\n if (clientHeight > 0) {\n return clientWidth / clientHeight\n }\n\n return 1\n}\n"],"mappings":"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","names":[]}
|
|
@@ -35,9 +35,9 @@ var ViewHelper = class extends THREE.EventDispatcher {
|
|
|
35
35
|
offset: options.offset || { x: 20, y: 20 },
|
|
36
36
|
center: defaultCenter.clone(),
|
|
37
37
|
labels: {
|
|
38
|
-
x: options.labels?.x || "",
|
|
39
|
-
y: options.labels?.y || "",
|
|
40
|
-
z: options.labels?.z || "",
|
|
38
|
+
x: options.labels?.x || "x",
|
|
39
|
+
y: options.labels?.y || "y",
|
|
40
|
+
z: options.labels?.z || "z",
|
|
41
41
|
...options.labels
|
|
42
42
|
}
|
|
43
43
|
};
|
|
@@ -203,7 +203,7 @@ var ViewHelper = class extends THREE.EventDispatcher {
|
|
|
203
203
|
renderer.autoClear = false;
|
|
204
204
|
renderer.setScissorTest(true);
|
|
205
205
|
renderer.setScissor(x, y, size, size);
|
|
206
|
-
renderer.
|
|
206
|
+
renderer.clearDepth();
|
|
207
207
|
renderer.render(this.scene, this.orthoCamera);
|
|
208
208
|
renderer.setScissorTest(false);
|
|
209
209
|
renderer.autoClear = autoClear;
|
|
@@ -397,4 +397,4 @@ var ViewHelper = class extends THREE.EventDispatcher {
|
|
|
397
397
|
export {
|
|
398
398
|
ViewHelper
|
|
399
399
|
};
|
|
400
|
-
//# sourceMappingURL=chunk-
|
|
400
|
+
//# sourceMappingURL=chunk-VETFQ3IQ.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../packages/view-helper/src/ViewHelper.ts"],"sourcesContent":["import * as THREE from 'three'\n\n// Hard-coded axis colors matching TransformControls\nconst AXIS_COLORS = {\n x: '#ed4358',\n y: '#82cc19',\n z: '#3185eb',\n} as const\n\nexport interface ViewHelperCameraController {\n camera: THREE.Camera\n getPosition(target: THREE.Vector3): THREE.Vector3\n getTarget(target: THREE.Vector3): THREE.Vector3\n setLookAt(\n positionX: number,\n positionY: number,\n positionZ: number,\n targetX: number,\n targetY: number,\n targetZ: number,\n enableTransition?: boolean\n ): Promise<void> | void\n stop?(): void\n enabled: boolean\n}\n\nexport interface ViewHelperOptions {\n container?: HTMLElement\n size?: number\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n offset?: { x: number; y: number }\n center?: THREE.Vector3\n labels?: {\n x?: string\n y?: string\n z?: string\n }\n controls?: ViewHelperCameraController\n}\n\n// Define event types for the view helper\ninterface ViewHelperEventMap {\n animationStart: {}\n animationEnd: {}\n}\n\nexport interface ViewHelperEvent {\n type: 'animationStart' | 'animationEnd'\n}\n\nexport class ViewHelper extends THREE.EventDispatcher<ViewHelperEventMap> {\n private camera: THREE.Camera\n private domElement: HTMLElement\n private options: Required<Omit<ViewHelperOptions, 'controls'>>\n private scene: THREE.Scene\n private orthoCamera: THREE.OrthographicCamera\n private renderer?: THREE.WebGLRenderer\n private viewport: THREE.Vector4 = new THREE.Vector4()\n private controls?: ViewHelperCameraController\n private pointerDownHandler!: (event: PointerEvent) => void\n\n // Animation properties\n public animating: boolean = false\n public center: THREE.Vector3\n private targetPosition: THREE.Vector3 = new THREE.Vector3()\n private targetQuaternion: THREE.Quaternion = new THREE.Quaternion()\n private q1: THREE.Quaternion = new THREE.Quaternion()\n private q2: THREE.Quaternion = new THREE.Quaternion()\n private dummy: THREE.Object3D = new THREE.Object3D()\n private radius: number = 0\n private turnRate: number = 2 * Math.PI // turn rate in angles per second\n private tempVecA: THREE.Vector3 = new THREE.Vector3()\n\n // Interactive elements\n private interactiveObjects: THREE.Object3D[] = []\n private raycaster: THREE.Raycaster = new THREE.Raycaster()\n private mouse: THREE.Vector2 = new THREE.Vector2()\n\n // Helper objects\n private axes!: {\n x: THREE.Mesh\n y: THREE.Mesh\n z: THREE.Mesh\n }\n private sprites!: {\n posX: THREE.Sprite\n posY: THREE.Sprite\n posZ: THREE.Sprite\n negX: THREE.Sprite\n negY: THREE.Sprite\n negZ: THREE.Sprite\n }\n\n constructor(\n camera: THREE.Camera,\n domElement?: HTMLElement,\n options: ViewHelperOptions = {}\n ) {\n super()\n this.controls = options.controls\n this.camera = this.controls?.camera ?? camera\n this.domElement = domElement || document.body\n\n const defaultCenter =\n options.center ??\n (this.controls\n ? this.controls.getTarget(new THREE.Vector3())\n : new THREE.Vector3())\n\n // Set default options\n this.options = {\n container: options.container || document.body,\n size: options.size || 128,\n position: options.position || 'bottom-right',\n offset: options.offset || { x: 20, y: 20 },\n center: defaultCenter.clone(),\n labels: {\n x: options.labels?.x || 'x',\n y: options.labels?.y || 'y',\n z: options.labels?.z || 'z',\n ...options.labels,\n },\n }\n\n this.center = this.options.center.clone()\n\n this.scene = new THREE.Scene()\n this.scene.background = null // Make background transparent\n this.orthoCamera = new THREE.OrthographicCamera(-2, 2, 2, -2, 0, 4)\n this.orthoCamera.position.set(0, 0, 2)\n\n this.createAxes()\n this.createSprites()\n this.setupEventListeners()\n }\n\n private syncActiveCamera(): THREE.Camera {\n if (this.controls) {\n this.camera = this.controls.camera\n }\n return this.camera\n }\n\n private getCameraPosition(target: THREE.Vector3): THREE.Vector3 {\n if (this.controls) {\n return this.controls.getPosition(target)\n }\n return target.copy(this.camera.position)\n }\n\n private createAxes(): void {\n const geometry = new THREE.CylinderGeometry(0.04, 0.04, 0.8, 5)\n .rotateZ(-Math.PI / 2)\n .translate(0.4, 0, 0)\n\n const xAxisMaterial = new THREE.MeshBasicMaterial({\n color: AXIS_COLORS.x,\n toneMapped: false,\n })\n const yAxisMaterial = new THREE.MeshBasicMaterial({\n color: AXIS_COLORS.y,\n toneMapped: false,\n })\n const zAxisMaterial = new THREE.MeshBasicMaterial({\n color: AXIS_COLORS.z,\n toneMapped: false,\n })\n\n this.axes = {\n x: new THREE.Mesh(geometry.clone(), xAxisMaterial),\n y: new THREE.Mesh(geometry.clone(), yAxisMaterial),\n z: new THREE.Mesh(geometry.clone(), zAxisMaterial),\n }\n\n this.axes.y.rotation.z = Math.PI / 2\n this.axes.z.rotation.y = -Math.PI / 2\n\n this.scene.add(this.axes.x)\n this.scene.add(this.axes.y)\n this.scene.add(this.axes.z)\n }\n\n private createSprites(): void {\n const posXSprite = this.createSprite(AXIS_COLORS.x, this.options.labels.x)\n const posYSprite = this.createSprite(AXIS_COLORS.y, this.options.labels.y)\n const posZSprite = this.createSprite(AXIS_COLORS.z, this.options.labels.z)\n // Use faded versions of the axis colors for negative axes\n const negXSprite = this.createSprite(AXIS_COLORS.x)\n const negYSprite = this.createSprite(AXIS_COLORS.y)\n const negZSprite = this.createSprite(AXIS_COLORS.z)\n\n this.sprites = {\n posX: posXSprite,\n posY: posYSprite,\n posZ: posZSprite,\n negX: negXSprite,\n negY: negYSprite,\n negZ: negZSprite,\n }\n\n // Position sprites\n this.sprites.posX.position.set(1, 0, 0)\n this.sprites.posY.position.set(0, 1, 0)\n this.sprites.posZ.position.set(0, 0, 1)\n this.sprites.negX.position.set(-1, 0, 0)\n this.sprites.negY.position.set(0, -1, 0)\n this.sprites.negZ.position.set(0, 0, -1)\n\n // Set opacity for negative axes\n this.sprites.negX.material.opacity = 0.2\n this.sprites.negY.material.opacity = 0.2\n this.sprites.negZ.material.opacity = 0.2\n\n // Set user data for interaction\n this.sprites.posX.userData.type = 'posX'\n this.sprites.posY.userData.type = 'posY'\n this.sprites.posZ.userData.type = 'posZ'\n this.sprites.negX.userData.type = 'negX'\n this.sprites.negY.userData.type = 'negY'\n this.sprites.negZ.userData.type = 'negZ'\n\n // Add to scene and interactive objects\n Object.values(this.sprites).forEach((sprite) => {\n this.scene.add(sprite)\n this.interactiveObjects.push(sprite)\n })\n }\n\n private createSprite(color: string, text?: string): THREE.Sprite {\n // Use higher resolution for crisp rendering\n const pixelRatio = window.devicePixelRatio || 1\n const size = 128 * pixelRatio\n const radius = 28 * pixelRatio\n\n const canvas = document.createElement('canvas')\n canvas.width = size\n canvas.height = size\n\n const context = canvas.getContext('2d')!\n\n // Enable high-quality rendering\n context.imageSmoothingEnabled = true\n context.imageSmoothingQuality = 'high'\n\n // Scale for device pixel ratio\n context.scale(pixelRatio, pixelRatio)\n\n const center = size / (2 * pixelRatio)\n const actualRadius = radius / pixelRatio\n\n // Draw circle background\n context.beginPath()\n context.arc(center, center, actualRadius, 0, 2 * Math.PI)\n context.closePath()\n context.fillStyle = color\n context.fill()\n\n if (text) {\n context.font = 'bold 48px Arial, sans-serif'\n context.textAlign = 'center'\n context.textBaseline = 'middle'\n context.fillStyle = '#ffffff'\n\n // Add text stroke for better visibility\n context.strokeStyle = '#000000'\n context.lineWidth = 2\n context.strokeText(text, center, center)\n context.fillText(text, center, center)\n }\n\n const texture = new THREE.CanvasTexture(canvas)\n texture.colorSpace = THREE.SRGBColorSpace\n texture.generateMipmaps = false\n texture.minFilter = THREE.LinearFilter\n texture.magFilter = THREE.LinearFilter\n\n return new THREE.Sprite(\n new THREE.SpriteMaterial({\n map: texture,\n toneMapped: false,\n alphaTest: 0.1,\n })\n )\n }\n\n private setupEventListeners(): void {\n this.pointerDownHandler = (event: PointerEvent) => {\n this.handleClick(event)\n }\n this.domElement.addEventListener('pointerdown', this.pointerDownHandler)\n }\n\n public render(renderer: THREE.WebGLRenderer): void {\n this.renderer = renderer\n\n const activeCamera = this.syncActiveCamera()\n\n // Update helper orientation to match camera\n this.scene.quaternion.copy(activeCamera.quaternion).invert()\n this.scene.updateMatrixWorld()\n\n const size = this.options.size\n const canvasWidth = renderer.domElement.width / renderer.getPixelRatio()\n const canvasHeight = renderer.domElement.height / renderer.getPixelRatio()\n\n let x: number, y: number\n\n switch (this.options.position) {\n case 'top-left':\n x = this.options.offset.x\n y = canvasHeight - size - this.options.offset.y\n break\n case 'top-right':\n x = canvasWidth - size - this.options.offset.x\n y = canvasHeight - size - this.options.offset.y\n break\n case 'bottom-left':\n x = this.options.offset.x\n y = this.options.offset.y\n break\n case 'bottom-right':\n default:\n x = canvasWidth - size - this.options.offset.x\n y = this.options.offset.y\n break\n }\n\n // Store current viewport and autoClear setting\n renderer.getViewport(this.viewport)\n const autoClear = renderer.autoClear\n\n // Set viewport for helper and disable autoClear\n renderer.setViewport(x, y, size, size)\n renderer.autoClear = false\n\n // Clear only depth buffer in the helper area\n renderer.setScissorTest(true)\n renderer.setScissor(x, y, size, size)\n renderer.clearDepth()\n\n // Render helper\n renderer.render(this.scene, this.orthoCamera)\n // Restore settings\n renderer.setScissorTest(false)\n renderer.autoClear = autoClear\n renderer.setViewport(\n this.viewport.x,\n this.viewport.y,\n this.viewport.z,\n this.viewport.w\n )\n }\n\n public handleClick(event: PointerEvent): boolean {\n if (this.animating || !this.renderer) return false\n\n this.syncActiveCamera()\n\n const rect = this.domElement.getBoundingClientRect()\n const size = this.options.size // Use logical size for click detection\n\n // Calculate helper viewport bounds\n let offsetX: number, offsetY: number\n\n switch (this.options.position) {\n case 'top-left':\n offsetX = rect.left + this.options.offset.x\n offsetY = rect.top + this.options.offset.y\n break\n case 'top-right':\n offsetX = rect.left + rect.width - size - this.options.offset.x\n offsetY = rect.top + this.options.offset.y\n break\n case 'bottom-left':\n offsetX = rect.left + this.options.offset.x\n offsetY = rect.top + rect.height - size - this.options.offset.y\n break\n case 'bottom-right':\n default:\n offsetX = rect.left + rect.width - size - this.options.offset.x\n offsetY = rect.top + rect.height - size - this.options.offset.y\n break\n }\n\n // Convert click coordinates to helper-relative coordinates\n this.mouse.x = ((event.clientX - offsetX) / size) * 2 - 1\n this.mouse.y = -((event.clientY - offsetY) / size) * 2 + 1\n\n // Check if click is within helper bounds\n if (\n this.mouse.x < -1 ||\n this.mouse.x > 1 ||\n this.mouse.y < -1 ||\n this.mouse.y > 1\n ) {\n return false\n }\n\n this.raycaster.setFromCamera(this.mouse, this.orthoCamera)\n const intersects = this.raycaster.intersectObjects(this.interactiveObjects)\n\n if (intersects.length > 0) {\n const intersection = intersects[0]\n const object = intersection.object\n this.prepareAnimationData(object, this.center)\n if (this.controls) {\n this.startControlsAnimation(this.center)\n } else {\n this.animating = true\n this.dispatchEvent({ type: 'animationStart' })\n }\n return true\n }\n\n return false\n }\n\n private prepareAnimationData(\n object: THREE.Object3D,\n focusPoint: THREE.Vector3\n ): void {\n switch (object.userData.type) {\n case 'posX':\n this.targetPosition.set(1, 0, 0)\n this.targetQuaternion.setFromEuler(new THREE.Euler(0, Math.PI * 0.5, 0))\n break\n case 'posY':\n this.targetPosition.set(0, 1, 0)\n this.targetQuaternion.setFromEuler(\n new THREE.Euler(-Math.PI * 0.5, 0, 0)\n )\n break\n case 'posZ':\n this.targetPosition.set(0, 0, 1)\n this.targetQuaternion.setFromEuler(new THREE.Euler())\n break\n case 'negX':\n this.targetPosition.set(-1, 0, 0)\n this.targetQuaternion.setFromEuler(\n new THREE.Euler(0, -Math.PI * 0.5, 0)\n )\n break\n case 'negY':\n this.targetPosition.set(0, -1, 0)\n this.targetQuaternion.setFromEuler(new THREE.Euler(Math.PI * 0.5, 0, 0))\n break\n case 'negZ':\n this.targetPosition.set(0, 0, -1)\n this.targetQuaternion.setFromEuler(new THREE.Euler(0, Math.PI, 0))\n break\n default:\n console.error('ViewHelper: Invalid axis.')\n return\n }\n\n const cameraPosition = this.getCameraPosition(this.tempVecA)\n this.radius = cameraPosition.distanceTo(focusPoint)\n this.targetPosition.multiplyScalar(this.radius).add(focusPoint)\n\n this.dummy.position.copy(focusPoint)\n this.dummy.lookAt(cameraPosition)\n this.q1.copy(this.dummy.quaternion)\n\n this.dummy.lookAt(this.targetPosition)\n this.q2.copy(this.dummy.quaternion)\n }\n\n private startControlsAnimation(focusPoint: THREE.Vector3): void {\n const controls = this.controls\n if (!controls) {\n return\n }\n controls.enabled = false\n controls.stop?.()\n this.animating = true\n this.dispatchEvent({ type: 'animationStart' })\n\n const applyLookAt = () => {\n controls.setLookAt(\n this.targetPosition.x,\n this.targetPosition.y,\n this.targetPosition.z,\n focusPoint.x,\n focusPoint.y,\n focusPoint.z,\n true\n )\n\n setTimeout(() => {\n controls.enabled = true\n }, 100)\n }\n try {\n void Promise.resolve(applyLookAt())\n .catch((error) => {\n console.warn('ViewHelper: Unable to set camera look-at.', error)\n })\n .finally(() => {\n this.animating = false\n this.dispatchEvent({ type: 'animationEnd' })\n })\n } catch (error) {\n console.warn('ViewHelper: Unable to set camera look-at.', error)\n this.animating = false\n this.dispatchEvent({ type: 'animationEnd' })\n }\n }\n\n public update(delta: number): void {\n this.syncActiveCamera()\n\n if (this.controls) {\n return\n }\n\n if (!this.animating) return\n\n const step = delta * this.turnRate\n\n // Animate position by doing a slerp and then scaling the position on the unit sphere\n this.q1.rotateTowards(this.q2, step)\n this.camera.position\n .set(0, 0, 1)\n .applyQuaternion(this.q1)\n .multiplyScalar(this.radius)\n .add(this.center)\n\n // Animate orientation\n this.camera.quaternion.rotateTowards(this.targetQuaternion, step)\n\n if (this.q1.angleTo(this.q2) === 0) {\n this.animating = false\n this.dispatchEvent({ type: 'animationEnd' })\n }\n }\n\n public setLabels(labelX?: string, labelY?: string, labelZ?: string): void {\n if (labelX !== undefined) this.options.labels.x = labelX\n if (labelY !== undefined) this.options.labels.y = labelY\n if (labelZ !== undefined) this.options.labels.z = labelZ\n\n this.updateLabels()\n }\n\n private updateLabels(): void {\n // Dispose old materials\n this.sprites.posX.material.map?.dispose()\n this.sprites.posY.material.map?.dispose()\n this.sprites.posZ.material.map?.dispose()\n this.sprites.posX.material.dispose()\n this.sprites.posY.material.dispose()\n this.sprites.posZ.material.dispose()\n\n // Create new sprites with updated labels\n const newPosX = this.createSprite(AXIS_COLORS.x, this.options.labels.x)\n const newPosY = this.createSprite(AXIS_COLORS.y, this.options.labels.y)\n const newPosZ = this.createSprite(AXIS_COLORS.z, this.options.labels.z)\n\n // Update sprites\n this.sprites.posX.material = newPosX.material\n this.sprites.posY.material = newPosY.material\n this.sprites.posZ.material = newPosZ.material\n }\n\n public dispose(): void {\n // Dispose geometries\n this.axes.x.geometry.dispose()\n this.axes.y.geometry.dispose()\n this.axes.z.geometry.dispose()\n\n // Dispose materials\n ;(this.axes.x.material as THREE.Material).dispose()\n ;(this.axes.y.material as THREE.Material).dispose()\n ;(this.axes.z.material as THREE.Material).dispose()\n\n // Dispose sprite materials and textures\n Object.values(this.sprites).forEach((sprite) => {\n sprite.material.map?.dispose()\n sprite.material.dispose()\n })\n\n // Remove event listeners\n if (this.pointerDownHandler) {\n this.domElement.removeEventListener(\n 'pointerdown',\n this.pointerDownHandler\n )\n }\n }\n}\n"],"mappings":"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","names":[]}
|
|
@@ -3,6 +3,7 @@ import * as THREE from "three";
|
|
|
3
3
|
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
|
|
4
4
|
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js";
|
|
5
5
|
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
|
|
6
|
+
import { USDLoader } from "three/examples/jsm/loaders/USDLoader.js";
|
|
6
7
|
var AssetLoader = class extends THREE.EventDispatcher {
|
|
7
8
|
constructor() {
|
|
8
9
|
super();
|
|
@@ -15,6 +16,7 @@ var AssetLoader = class extends THREE.EventDispatcher {
|
|
|
15
16
|
this.gltfLoader = new GLTFLoader();
|
|
16
17
|
this.fbxLoader = new FBXLoader();
|
|
17
18
|
this.objLoader = new OBJLoader();
|
|
19
|
+
this.usdLoader = new USDLoader();
|
|
18
20
|
}
|
|
19
21
|
/**
|
|
20
22
|
* Create a placeholder cube with shader effect
|
|
@@ -32,7 +34,9 @@ var AssetLoader = class extends THREE.EventDispatcher {
|
|
|
32
34
|
opacity: { value: opacity },
|
|
33
35
|
fillProgress: { value: 0 },
|
|
34
36
|
time: { value: 0 },
|
|
35
|
-
isError: { value: 0 }
|
|
37
|
+
isError: { value: 0 },
|
|
38
|
+
yMin: { value: -height / 2 },
|
|
39
|
+
yMax: { value: height / 2 }
|
|
36
40
|
},
|
|
37
41
|
vertexShader: `
|
|
38
42
|
varying vec3 vPosition;
|
|
@@ -47,15 +51,17 @@ var AssetLoader = class extends THREE.EventDispatcher {
|
|
|
47
51
|
uniform float fillProgress;
|
|
48
52
|
uniform float time;
|
|
49
53
|
uniform float isError;
|
|
54
|
+
uniform float yMin;
|
|
55
|
+
uniform float yMax;
|
|
50
56
|
varying vec3 vPosition;
|
|
51
57
|
|
|
52
58
|
void main() {
|
|
53
|
-
float normalizedY = (vPosition.y
|
|
59
|
+
float normalizedY = (vPosition.y - yMin) / (yMax - yMin); // Normalize based on actual geometry bounds
|
|
54
60
|
float alpha = opacity;
|
|
55
61
|
|
|
56
62
|
// Create fill-up effect
|
|
57
63
|
if (normalizedY > fillProgress) {
|
|
58
|
-
alpha *= 0.
|
|
64
|
+
alpha *= 0.1; // Reduce opacity for unfilled parts
|
|
59
65
|
}
|
|
60
66
|
|
|
61
67
|
// Error state effects
|
|
@@ -181,7 +187,7 @@ var AssetLoader = class extends THREE.EventDispatcher {
|
|
|
181
187
|
lowResUrl,
|
|
182
188
|
enableCaching = true,
|
|
183
189
|
placeholderColor = 5227511,
|
|
184
|
-
placeholderOpacity = 0.
|
|
190
|
+
placeholderOpacity = 0.4,
|
|
185
191
|
errorColor = 16729156,
|
|
186
192
|
errorOpacity = 0.5
|
|
187
193
|
} = options;
|
|
@@ -242,14 +248,17 @@ var AssetLoader = class extends THREE.EventDispatcher {
|
|
|
242
248
|
loadModel(type, url, isLowRes) {
|
|
243
249
|
return new Promise((resolve, reject) => {
|
|
244
250
|
const onProgress = (event) => {
|
|
245
|
-
|
|
251
|
+
let percentage = -1;
|
|
252
|
+
if (event.lengthComputable && event.total > 0 && event.loaded <= event.total) {
|
|
253
|
+
percentage = event.loaded / event.total * 100;
|
|
254
|
+
}
|
|
246
255
|
this.dispatchEvent({
|
|
247
256
|
type: "progress",
|
|
248
257
|
loaded: event.loaded,
|
|
249
258
|
total: event.total,
|
|
250
259
|
percentage
|
|
251
260
|
});
|
|
252
|
-
if (!isLowRes) {
|
|
261
|
+
if (!isLowRes && percentage >= 0) {
|
|
253
262
|
this.updatePlaceholder(percentage / 100);
|
|
254
263
|
}
|
|
255
264
|
};
|
|
@@ -291,6 +300,18 @@ var AssetLoader = class extends THREE.EventDispatcher {
|
|
|
291
300
|
onError
|
|
292
301
|
);
|
|
293
302
|
break;
|
|
303
|
+
case "usd":
|
|
304
|
+
case "usdz":
|
|
305
|
+
this.usdLoader.load(
|
|
306
|
+
url,
|
|
307
|
+
(usd) => {
|
|
308
|
+
this.positionAssetAtBottomCenter(usd);
|
|
309
|
+
resolve(usd);
|
|
310
|
+
},
|
|
311
|
+
onProgress,
|
|
312
|
+
onError
|
|
313
|
+
);
|
|
314
|
+
break;
|
|
294
315
|
default:
|
|
295
316
|
reject(new Error(`Unsupported asset type: ${type}`));
|
|
296
317
|
}
|
|
@@ -337,4 +358,4 @@ var AssetLoader = class extends THREE.EventDispatcher {
|
|
|
337
358
|
export {
|
|
338
359
|
AssetLoader
|
|
339
360
|
};
|
|
340
|
-
//# sourceMappingURL=chunk-
|
|
361
|
+
//# sourceMappingURL=chunk-WZ6IGBSE.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../packages/asset-loader/src/AssetLoader.ts"],"sourcesContent":["import * as THREE from 'three'\nimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'\nimport { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'\nimport { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'\nimport { USDLoader } from 'three/examples/jsm/loaders/USDLoader.js'\n\n// Event types for asset loading\ninterface AssetLoaderEventMap {\n progress: { loaded: number; total: number; percentage: number }\n loaded: { asset: THREE.Object3D }\n error: { error: Error }\n placeholderCreated: { placeholder: THREE.Object3D }\n lowResLoaded: { lowRes: THREE.Object3D }\n}\n\nexport type AssetType = 'gltf' | 'fbx' | 'obj' | 'usd' | 'usdz'\n\nexport interface AssetLoaderOptions {\n type: AssetType\n url: string\n size?: [number, number, number] // Optional size for placeholder\n lowResUrl?: string // Optional low-res model URL\n enableCaching?: boolean\n placeholderColor?: number\n placeholderOpacity?: number\n errorColor?: number // Color to use when loading fails\n errorOpacity?: number // Opacity to use when loading fails\n}\n\nexport class AssetLoader extends THREE.EventDispatcher<AssetLoaderEventMap> {\n private cache: Map<string, THREE.Object3D> = new Map()\n private gltfLoader: GLTFLoader\n private fbxLoader: FBXLoader\n private objLoader: OBJLoader\n private usdLoader: USDLoader\n private placeholder: THREE.Object3D | null = null\n private loadedAsset: THREE.Object3D | null = null\n private lowResAsset: THREE.Object3D | null = null\n private errorColor: number = 0xff4444\n private errorOpacity: number = 0.5\n\n constructor() {\n super()\n this.gltfLoader = new GLTFLoader()\n this.fbxLoader = new FBXLoader()\n this.objLoader = new OBJLoader()\n this.usdLoader = new USDLoader()\n }\n\n /**\n * Create a placeholder cube with shader effect\n */\n private createPlaceholder(\n size: [number, number, number],\n color: number = 0x4fc3f7,\n opacity: number = 0.3\n ): THREE.Object3D {\n const [width, height, depth] = size\n const geometry = new THREE.BoxGeometry(width, height, depth)\n\n // Custom shader material with fill-up effect\n const material = new THREE.ShaderMaterial({\n side: THREE.DoubleSide,\n depthWrite: false,\n blending: THREE.AdditiveBlending,\n transparent: true,\n uniforms: {\n color: { value: new THREE.Color(color) },\n opacity: { value: opacity },\n fillProgress: { value: 0.0 },\n time: { value: 0.0 },\n isError: { value: 0.0 },\n yMin: { value: -height / 2 },\n yMax: { value: height / 2 },\n },\n vertexShader: `\n varying vec3 vPosition;\n void main() {\n vPosition = position;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n uniform vec3 color;\n uniform float opacity;\n uniform float fillProgress;\n uniform float time;\n uniform float isError;\n uniform float yMin;\n uniform float yMax;\n varying vec3 vPosition;\n \n void main() {\n float normalizedY = (vPosition.y - yMin) / (yMax - yMin); // Normalize based on actual geometry bounds\n float alpha = opacity;\n \n // Create fill-up effect\n if (normalizedY > fillProgress) {\n alpha *= 0.1; // Reduce opacity for unfilled parts\n }\n \n // Error state effects\n if (isError > 0.5) {\n // Add pulsing effect for error state\n float pulse = 0.5 + 0.5 * sin(time * 4.0);\n alpha *= (0.3 + 0.4 * pulse);\n \n // Add error pattern\n float stripe = sin(vPosition.y * 20.0 + time * 2.0);\n alpha *= (0.7 + 0.3 * step(0.0, stripe));\n }\n \n // Add edge glow\n vec3 viewDirection = normalize(cameraPosition - vPosition);\n float edgeIntensity = pow(1.0 - abs(dot(viewDirection, normalize(vPosition))), 2.0);\n \n vec3 finalColor = color + edgeIntensity * 0.5;\n gl_FragColor = vec4(finalColor, alpha);\n }\n `,\n })\n\n const mesh = new THREE.Mesh(geometry, material)\n this.positionAssetAtBottomCenter(mesh)\n return mesh\n }\n\n /**\n * Update placeholder fill progress based on loading progress\n */\n private updatePlaceholder(progress: number) {\n if (this.placeholder && this.placeholder instanceof THREE.Mesh) {\n const material = this.placeholder.material as THREE.ShaderMaterial\n if (material.uniforms && material.uniforms.fillProgress) {\n material.uniforms.fillProgress.value = progress\n }\n }\n }\n\n /**\n * Set placeholder to error state with configurable color and opacity\n */\n private setPlaceholderError() {\n if (this.placeholder && this.placeholder instanceof THREE.Mesh) {\n const material = this.placeholder.material as THREE.ShaderMaterial\n if (material.uniforms) {\n // Change to error color\n if (material.uniforms.color) {\n material.uniforms.color.value = new THREE.Color(this.errorColor)\n }\n // Set error opacity\n if (material.uniforms.opacity) {\n material.uniforms.opacity.value = this.errorOpacity\n }\n // Set fill progress to indicate failure\n if (material.uniforms.fillProgress) {\n material.uniforms.fillProgress.value = 0.0\n }\n // Enable error state\n if (material.uniforms.isError) {\n material.uniforms.isError.value = 1.0\n }\n }\n }\n }\n\n /**\n * Update placeholder animation time (call this in your render loop)\n */\n public updatePlaceholderAnimation(deltaTime: number) {\n if (this.placeholder && this.placeholder instanceof THREE.Mesh) {\n const material = this.placeholder.material as THREE.ShaderMaterial\n if (material.uniforms && material.uniforms.time) {\n material.uniforms.time.value += deltaTime\n }\n }\n }\n\n /**\n * Reposition an asset so that its bottom-center sits at the local origin.\n */\n private positionAssetAtBottomCenter(object: THREE.Object3D) {\n object.updateMatrixWorld(true)\n\n const boundingBox = new THREE.Box3().setFromObject(object)\n if (boundingBox.isEmpty()) {\n return\n }\n\n const center = boundingBox.getCenter(new THREE.Vector3())\n const bottomCenter = new THREE.Vector3(\n center.x,\n boundingBox.min.y + 0.01,\n center.z\n )\n\n if (\n !Number.isFinite(bottomCenter.x) ||\n !Number.isFinite(bottomCenter.y) ||\n !Number.isFinite(bottomCenter.z)\n ) {\n return\n }\n\n object.position.sub(bottomCenter)\n object.userData.bottomCenterOffset = bottomCenter\n object.updateMatrixWorld(true)\n }\n\n private ensureBottomCenterOffset(\n object: THREE.Object3D\n ): THREE.Vector3 | null {\n const offset = object.userData.bottomCenterOffset\n if (offset instanceof THREE.Vector3) {\n return offset\n }\n\n if (offset && typeof offset === 'object') {\n const {\n x = 0,\n y = 0,\n z = 0,\n } = offset as Partial<Record<'x' | 'y' | 'z', number>>\n const normalized = new THREE.Vector3(x ?? 0, y ?? 0, z ?? 0)\n object.userData.bottomCenterOffset = normalized\n return normalized\n }\n\n return null\n }\n\n private normalizeBottomCenterData(object: THREE.Object3D): boolean {\n const hasOffset = this.ensureBottomCenterOffset(object) !== null\n object.children.forEach((child) => this.normalizeBottomCenterData(child))\n return hasOffset\n }\n\n /**\n * Load an asset with the specified options\n */\n async load(options: AssetLoaderOptions): Promise<THREE.Object3D> {\n const {\n type,\n url,\n size,\n lowResUrl,\n enableCaching = true,\n placeholderColor = 0x4fc3f7,\n placeholderOpacity = 0.4,\n errorColor = 0xff4444,\n errorOpacity = 0.5,\n } = options\n\n // Check cache first\n if (enableCaching && this.cache.has(url)) {\n const cachedClone = this.cache.get(url)!.clone(true)\n const hasOffset = this.normalizeBottomCenterData(cachedClone)\n\n if (!hasOffset) {\n this.positionAssetAtBottomCenter(cachedClone)\n } else {\n cachedClone.updateMatrixWorld(true)\n }\n\n this.loadedAsset = cachedClone\n this.dispatchEvent({ type: 'loaded', asset: cachedClone })\n return cachedClone\n }\n\n // Store error styling options\n this.errorColor = errorColor\n this.errorOpacity = errorOpacity\n\n // Create placeholder if size is provided\n if (size) {\n this.placeholder = this.createPlaceholder(\n size,\n placeholderColor,\n placeholderOpacity\n )\n this.dispatchEvent({\n type: 'placeholderCreated',\n placeholder: this.placeholder,\n })\n }\n\n try {\n // Load low-res model first if provided\n if (lowResUrl) {\n const lowRes = await this.loadModel(type, lowResUrl, true)\n this.lowResAsset = lowRes\n this.dispatchEvent({ type: 'lowResLoaded', lowRes })\n }\n\n // Load main asset\n const asset = await this.loadModel(type, url, false)\n this.loadedAsset = asset\n\n // Cache if enabled\n if (enableCaching) {\n const cacheEntry = asset.clone(true)\n const hasOffset = this.normalizeBottomCenterData(cacheEntry)\n if (!hasOffset) {\n this.positionAssetAtBottomCenter(cacheEntry)\n } else {\n cacheEntry.updateMatrixWorld(true)\n }\n this.cache.set(url, cacheEntry)\n }\n\n this.dispatchEvent({ type: 'loaded', asset })\n return asset\n } catch (error) {\n // Set placeholder to error state\n this.setPlaceholderError()\n this.dispatchEvent({ type: 'error', error: error as Error })\n throw error\n }\n }\n\n /**\n * Load a model based on type\n */\n private loadModel(\n type: AssetType,\n url: string,\n isLowRes: boolean\n ): Promise<THREE.Object3D> {\n return new Promise((resolve, reject) => {\n const onProgress = (event: ProgressEvent) => {\n // Handle cases where loaded > total (compressed content mismatch)\n // or total is 0 (unknown content length)\n let percentage = -1 // Default to indeterminate\n\n // Only calculate percentage if lengthComputable is true AND loaded <= total\n // This prevents false 100% when server reports compressed size\n if (\n event.lengthComputable &&\n event.total > 0 &&\n event.loaded <= event.total\n ) {\n percentage = (event.loaded / event.total) * 100\n }\n\n this.dispatchEvent({\n type: 'progress',\n loaded: event.loaded,\n total: event.total,\n percentage,\n })\n\n // Update placeholder fill only with valid percentage\n if (!isLowRes && percentage >= 0) {\n this.updatePlaceholder(percentage / 100)\n }\n }\n\n const onError = (error: unknown) => {\n reject(error)\n }\n\n switch (type) {\n case 'gltf':\n this.gltfLoader.load(\n url,\n (gltf) => {\n const scene = gltf.scene\n this.positionAssetAtBottomCenter(scene)\n resolve(scene)\n },\n onProgress,\n onError\n )\n break\n\n case 'fbx':\n this.fbxLoader.load(\n url,\n (fbx) => {\n this.positionAssetAtBottomCenter(fbx)\n resolve(fbx)\n },\n onProgress,\n onError\n )\n break\n\n case 'obj':\n this.objLoader.load(\n url,\n (obj) => {\n this.positionAssetAtBottomCenter(obj)\n resolve(obj)\n },\n onProgress,\n onError\n )\n break\n\n case 'usd':\n case 'usdz':\n this.usdLoader.load(\n url,\n (usd) => {\n this.positionAssetAtBottomCenter(usd)\n resolve(usd)\n },\n onProgress,\n onError\n )\n break\n\n default:\n reject(new Error(`Unsupported asset type: ${type}`))\n }\n })\n }\n\n /**\n * Get the placeholder object\n */\n getPlaceholder(): THREE.Object3D | null {\n return this.placeholder\n }\n\n /**\n * Get the loaded asset\n */\n getAsset(): THREE.Object3D | null {\n return this.loadedAsset\n }\n\n /**\n * Get the low-res asset\n */\n getLowResAsset(): THREE.Object3D | null {\n return this.lowResAsset\n }\n\n /**\n * Clear the cache\n */\n clearCache() {\n this.cache.clear()\n }\n\n /**\n * Remove an item from cache\n */\n removeFromCache(url: string) {\n this.cache.delete(url)\n }\n\n /**\n * Get cache size\n */\n getCacheSize(): number {\n return this.cache.size\n }\n}\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAyBnB,IAAM,cAAN,cAAgC,sBAAqC;AAAA,EAY1E,cAAc;AACZ,UAAM;AAZR,SAAQ,QAAqC,oBAAI,IAAI;AAKrD,SAAQ,cAAqC;AAC7C,SAAQ,cAAqC;AAC7C,SAAQ,cAAqC;AAC7C,SAAQ,aAAqB;AAC7B,SAAQ,eAAuB;AAI7B,SAAK,aAAa,IAAI,WAAW;AACjC,SAAK,YAAY,IAAI,UAAU;AAC/B,SAAK,YAAY,IAAI,UAAU;AAC/B,SAAK,YAAY,IAAI,UAAU;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA,EAKQ,kBACN,MACA,QAAgB,SAChB,UAAkB,KACF;AAChB,UAAM,CAAC,OAAO,QAAQ,KAAK,IAAI;AAC/B,UAAM,WAAW,IAAU,kBAAY,OAAO,QAAQ,KAAK;AAG3D,UAAM,WAAW,IAAU,qBAAe;AAAA,MACxC,MAAY;AAAA,MACZ,YAAY;AAAA,MACZ,UAAgB;AAAA,MAChB,aAAa;AAAA,MACb,UAAU;AAAA,QACR,OAAO,EAAE,OAAO,IAAU,YAAM,KAAK,EAAE;AAAA,QACvC,SAAS,EAAE,OAAO,QAAQ;AAAA,QAC1B,cAAc,EAAE,OAAO,EAAI;AAAA,QAC3B,MAAM,EAAE,OAAO,EAAI;AAAA,QACnB,SAAS,EAAE,OAAO,EAAI;AAAA,QACtB,MAAM,EAAE,OAAO,CAAC,SAAS,EAAE;AAAA,QAC3B,MAAM,EAAE,OAAO,SAAS,EAAE;AAAA,MAC5B;AAAA,MACA,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOd,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAsClB,CAAC;AAED,UAAM,OAAO,IAAU,WAAK,UAAU,QAAQ;AAC9C,SAAK,4BAA4B,IAAI;AACrC,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKQ,kBAAkB,UAAkB;AAC1C,QAAI,KAAK,eAAe,KAAK,uBAA6B,YAAM;AAC9D,YAAM,WAAW,KAAK,YAAY;AAClC,UAAI,SAAS,YAAY,SAAS,SAAS,cAAc;AACvD,iBAAS,SAAS,aAAa,QAAQ;AAAA,MACzC;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKQ,sBAAsB;AAC5B,QAAI,KAAK,eAAe,KAAK,uBAA6B,YAAM;AAC9D,YAAM,WAAW,KAAK,YAAY;AAClC,UAAI,SAAS,UAAU;AAErB,YAAI,SAAS,SAAS,OAAO;AAC3B,mBAAS,SAAS,MAAM,QAAQ,IAAU,YAAM,KAAK,UAAU;AAAA,QACjE;AAEA,YAAI,SAAS,SAAS,SAAS;AAC7B,mBAAS,SAAS,QAAQ,QAAQ,KAAK;AAAA,QACzC;AAEA,YAAI,SAAS,SAAS,cAAc;AAClC,mBAAS,SAAS,aAAa,QAAQ;AAAA,QACzC;AAEA,YAAI,SAAS,SAAS,SAAS;AAC7B,mBAAS,SAAS,QAAQ,QAAQ;AAAA,QACpC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKO,2BAA2B,WAAmB;AACnD,QAAI,KAAK,eAAe,KAAK,uBAA6B,YAAM;AAC9D,YAAM,WAAW,KAAK,YAAY;AAClC,UAAI,SAAS,YAAY,SAAS,SAAS,MAAM;AAC/C,iBAAS,SAAS,KAAK,SAAS;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKQ,4BAA4B,QAAwB;AAC1D,WAAO,kBAAkB,IAAI;AAE7B,UAAM,cAAc,IAAU,WAAK,EAAE,cAAc,MAAM;AACzD,QAAI,YAAY,QAAQ,GAAG;AACzB;AAAA,IACF;AAEA,UAAM,SAAS,YAAY,UAAU,IAAU,cAAQ,CAAC;AACxD,UAAM,eAAe,IAAU;AAAA,MAC7B,OAAO;AAAA,MACP,YAAY,IAAI,IAAI;AAAA,MACpB,OAAO;AAAA,IACT;AAEA,QACE,CAAC,OAAO,SAAS,aAAa,CAAC,KAC/B,CAAC,OAAO,SAAS,aAAa,CAAC,KAC/B,CAAC,OAAO,SAAS,aAAa,CAAC,GAC/B;AACA;AAAA,IACF;AAEA,WAAO,SAAS,IAAI,YAAY;AAChC,WAAO,SAAS,qBAAqB;AACrC,WAAO,kBAAkB,IAAI;AAAA,EAC/B;AAAA,EAEQ,yBACN,QACsB;AACtB,UAAM,SAAS,OAAO,SAAS;AAC/B,QAAI,kBAAwB,eAAS;AACnC,aAAO;AAAA,IACT;AAEA,QAAI,UAAU,OAAO,WAAW,UAAU;AACxC,YAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN,IAAI;AACJ,YAAM,aAAa,IAAU,cAAQ,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAC3D,aAAO,SAAS,qBAAqB;AACrC,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT;AAAA,EAEQ,0BAA0B,QAAiC;AACjE,UAAM,YAAY,KAAK,yBAAyB,MAAM,MAAM;AAC5D,WAAO,SAAS,QAAQ,CAAC,UAAU,KAAK,0BAA0B,KAAK,CAAC;AACxE,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,KAAK,SAAsD;AAC/D,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB,mBAAmB;AAAA,MACnB,qBAAqB;AAAA,MACrB,aAAa;AAAA,MACb,eAAe;AAAA,IACjB,IAAI;AAGJ,QAAI,iBAAiB,KAAK,MAAM,IAAI,GAAG,GAAG;AACxC,YAAM,cAAc,KAAK,MAAM,IAAI,GAAG,EAAG,MAAM,IAAI;AACnD,YAAM,YAAY,KAAK,0BAA0B,WAAW;AAE5D,UAAI,CAAC,WAAW;AACd,aAAK,4BAA4B,WAAW;AAAA,MAC9C,OAAO;AACL,oBAAY,kBAAkB,IAAI;AAAA,MACpC;AAEA,WAAK,cAAc;AACnB,WAAK,cAAc,EAAE,MAAM,UAAU,OAAO,YAAY,CAAC;AACzD,aAAO;AAAA,IACT;AAGA,SAAK,aAAa;AAClB,SAAK,eAAe;AAGpB,QAAI,MAAM;AACR,WAAK,cAAc,KAAK;AAAA,QACtB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACA,WAAK,cAAc;AAAA,QACjB,MAAM;AAAA,QACN,aAAa,KAAK;AAAA,MACpB,CAAC;AAAA,IACH;AAEA,QAAI;AAEF,UAAI,WAAW;AACb,cAAM,SAAS,MAAM,KAAK,UAAU,MAAM,WAAW,IAAI;AACzD,aAAK,cAAc;AACnB,aAAK,cAAc,EAAE,MAAM,gBAAgB,OAAO,CAAC;AAAA,MACrD;AAGA,YAAM,QAAQ,MAAM,KAAK,UAAU,MAAM,KAAK,KAAK;AACnD,WAAK,cAAc;AAGnB,UAAI,eAAe;AACjB,cAAM,aAAa,MAAM,MAAM,IAAI;AACnC,cAAM,YAAY,KAAK,0BAA0B,UAAU;AAC3D,YAAI,CAAC,WAAW;AACd,eAAK,4BAA4B,UAAU;AAAA,QAC7C,OAAO;AACL,qBAAW,kBAAkB,IAAI;AAAA,QACnC;AACA,aAAK,MAAM,IAAI,KAAK,UAAU;AAAA,MAChC;AAEA,WAAK,cAAc,EAAE,MAAM,UAAU,MAAM,CAAC;AAC5C,aAAO;AAAA,IACT,SAAS,OAAO;AAEd,WAAK,oBAAoB;AACzB,WAAK,cAAc,EAAE,MAAM,SAAS,MAAsB,CAAC;AAC3D,YAAM;AAAA,IACR;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKQ,UACN,MACA,KACA,UACyB;AACzB,WAAO,IAAI,QAAQ,CAAC,SAAS,WAAW;AACtC,YAAM,aAAa,CAAC,UAAyB;AAG3C,YAAI,aAAa;AAIjB,YACE,MAAM,oBACN,MAAM,QAAQ,KACd,MAAM,UAAU,MAAM,OACtB;AACA,uBAAc,MAAM,SAAS,MAAM,QAAS;AAAA,QAC9C;AAEA,aAAK,cAAc;AAAA,UACjB,MAAM;AAAA,UACN,QAAQ,MAAM;AAAA,UACd,OAAO,MAAM;AAAA,UACb;AAAA,QACF,CAAC;AAGD,YAAI,CAAC,YAAY,cAAc,GAAG;AAChC,eAAK,kBAAkB,aAAa,GAAG;AAAA,QACzC;AAAA,MACF;AAEA,YAAM,UAAU,CAAC,UAAmB;AAClC,eAAO,KAAK;AAAA,MACd;AAEA,cAAQ,MAAM;AAAA,QACZ,KAAK;AACH,eAAK,WAAW;AAAA,YACd;AAAA,YACA,CAAC,SAAS;AACR,oBAAM,QAAQ,KAAK;AACnB,mBAAK,4BAA4B,KAAK;AACtC,sBAAQ,KAAK;AAAA,YACf;AAAA,YACA;AAAA,YACA;AAAA,UACF;AACA;AAAA,QAEF,KAAK;AACH,eAAK,UAAU;AAAA,YACb;AAAA,YACA,CAAC,QAAQ;AACP,mBAAK,4BAA4B,GAAG;AACpC,sBAAQ,GAAG;AAAA,YACb;AAAA,YACA;AAAA,YACA;AAAA,UACF;AACA;AAAA,QAEF,KAAK;AACH,eAAK,UAAU;AAAA,YACb;AAAA,YACA,CAAC,QAAQ;AACP,mBAAK,4BAA4B,GAAG;AACpC,sBAAQ,GAAG;AAAA,YACb;AAAA,YACA;AAAA,YACA;AAAA,UACF;AACA;AAAA,QAEF,KAAK;AAAA,QACL,KAAK;AACH,eAAK,UAAU;AAAA,YACb;AAAA,YACA,CAAC,QAAQ;AACP,mBAAK,4BAA4B,GAAG;AACpC,sBAAQ,GAAG;AAAA,YACb;AAAA,YACA;AAAA,YACA;AAAA,UACF;AACA;AAAA,QAEF;AACE,iBAAO,IAAI,MAAM,2BAA2B,IAAI,EAAE,CAAC;AAAA,MACvD;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAwC;AACtC,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,WAAkC;AAChC,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAwC;AACtC,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,aAAa;AACX,SAAK,MAAM,MAAM;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAgB,KAAa;AAC3B,SAAK,MAAM,OAAO,GAAG;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKA,eAAuB;AACrB,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;","names":[]}
|
package/dist/index.cjs
CHANGED
|
@@ -51,6 +51,7 @@ var THREE = __toESM(require("three"));
|
|
|
51
51
|
var import_GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader.js");
|
|
52
52
|
var import_FBXLoader = require("three/examples/jsm/loaders/FBXLoader.js");
|
|
53
53
|
var import_OBJLoader = require("three/examples/jsm/loaders/OBJLoader.js");
|
|
54
|
+
var import_USDLoader = require("three/examples/jsm/loaders/USDLoader.js");
|
|
54
55
|
var AssetLoader = class extends THREE.EventDispatcher {
|
|
55
56
|
constructor() {
|
|
56
57
|
super();
|
|
@@ -63,6 +64,7 @@ var AssetLoader = class extends THREE.EventDispatcher {
|
|
|
63
64
|
this.gltfLoader = new import_GLTFLoader.GLTFLoader();
|
|
64
65
|
this.fbxLoader = new import_FBXLoader.FBXLoader();
|
|
65
66
|
this.objLoader = new import_OBJLoader.OBJLoader();
|
|
67
|
+
this.usdLoader = new import_USDLoader.USDLoader();
|
|
66
68
|
}
|
|
67
69
|
/**
|
|
68
70
|
* Create a placeholder cube with shader effect
|
|
@@ -80,7 +82,9 @@ var AssetLoader = class extends THREE.EventDispatcher {
|
|
|
80
82
|
opacity: { value: opacity },
|
|
81
83
|
fillProgress: { value: 0 },
|
|
82
84
|
time: { value: 0 },
|
|
83
|
-
isError: { value: 0 }
|
|
85
|
+
isError: { value: 0 },
|
|
86
|
+
yMin: { value: -height / 2 },
|
|
87
|
+
yMax: { value: height / 2 }
|
|
84
88
|
},
|
|
85
89
|
vertexShader: `
|
|
86
90
|
varying vec3 vPosition;
|
|
@@ -95,15 +99,17 @@ var AssetLoader = class extends THREE.EventDispatcher {
|
|
|
95
99
|
uniform float fillProgress;
|
|
96
100
|
uniform float time;
|
|
97
101
|
uniform float isError;
|
|
102
|
+
uniform float yMin;
|
|
103
|
+
uniform float yMax;
|
|
98
104
|
varying vec3 vPosition;
|
|
99
105
|
|
|
100
106
|
void main() {
|
|
101
|
-
float normalizedY = (vPosition.y
|
|
107
|
+
float normalizedY = (vPosition.y - yMin) / (yMax - yMin); // Normalize based on actual geometry bounds
|
|
102
108
|
float alpha = opacity;
|
|
103
109
|
|
|
104
110
|
// Create fill-up effect
|
|
105
111
|
if (normalizedY > fillProgress) {
|
|
106
|
-
alpha *= 0.
|
|
112
|
+
alpha *= 0.1; // Reduce opacity for unfilled parts
|
|
107
113
|
}
|
|
108
114
|
|
|
109
115
|
// Error state effects
|
|
@@ -229,7 +235,7 @@ var AssetLoader = class extends THREE.EventDispatcher {
|
|
|
229
235
|
lowResUrl,
|
|
230
236
|
enableCaching = true,
|
|
231
237
|
placeholderColor = 5227511,
|
|
232
|
-
placeholderOpacity = 0.
|
|
238
|
+
placeholderOpacity = 0.4,
|
|
233
239
|
errorColor = 16729156,
|
|
234
240
|
errorOpacity = 0.5
|
|
235
241
|
} = options;
|
|
@@ -290,14 +296,17 @@ var AssetLoader = class extends THREE.EventDispatcher {
|
|
|
290
296
|
loadModel(type, url, isLowRes) {
|
|
291
297
|
return new Promise((resolve, reject) => {
|
|
292
298
|
const onProgress = (event) => {
|
|
293
|
-
|
|
299
|
+
let percentage = -1;
|
|
300
|
+
if (event.lengthComputable && event.total > 0 && event.loaded <= event.total) {
|
|
301
|
+
percentage = event.loaded / event.total * 100;
|
|
302
|
+
}
|
|
294
303
|
this.dispatchEvent({
|
|
295
304
|
type: "progress",
|
|
296
305
|
loaded: event.loaded,
|
|
297
306
|
total: event.total,
|
|
298
307
|
percentage
|
|
299
308
|
});
|
|
300
|
-
if (!isLowRes) {
|
|
309
|
+
if (!isLowRes && percentage >= 0) {
|
|
301
310
|
this.updatePlaceholder(percentage / 100);
|
|
302
311
|
}
|
|
303
312
|
};
|
|
@@ -339,6 +348,18 @@ var AssetLoader = class extends THREE.EventDispatcher {
|
|
|
339
348
|
onError
|
|
340
349
|
);
|
|
341
350
|
break;
|
|
351
|
+
case "usd":
|
|
352
|
+
case "usdz":
|
|
353
|
+
this.usdLoader.load(
|
|
354
|
+
url,
|
|
355
|
+
(usd) => {
|
|
356
|
+
this.positionAssetAtBottomCenter(usd);
|
|
357
|
+
resolve(usd);
|
|
358
|
+
},
|
|
359
|
+
onProgress,
|
|
360
|
+
onError
|
|
361
|
+
);
|
|
362
|
+
break;
|
|
342
363
|
default:
|
|
343
364
|
reject(new Error(`Unsupported asset type: ${type}`));
|
|
344
365
|
}
|
|
@@ -448,6 +469,7 @@ var DualCameraControls = class extends import_camera_controls.default {
|
|
|
448
469
|
const initialCamera = initialMode === "orthographic" ? orthographicCamera : perspectiveCamera;
|
|
449
470
|
super(initialCamera, domElement);
|
|
450
471
|
this.updateClock = new THREE2.Clock();
|
|
472
|
+
this.externalCamera = null;
|
|
451
473
|
const initialTarget = toVector3(
|
|
452
474
|
options.initialTarget,
|
|
453
475
|
[0, 0, 0],
|
|
@@ -483,9 +505,10 @@ var DualCameraControls = class extends import_camera_controls.default {
|
|
|
483
505
|
* Switch to the perspective camera while keeping the current framing.
|
|
484
506
|
*/
|
|
485
507
|
switchToPerspective(enableTransition = false) {
|
|
486
|
-
if (this.activeMode === "perspective") {
|
|
508
|
+
if (this.activeMode === "perspective" && !this.externalCamera) {
|
|
487
509
|
return;
|
|
488
510
|
}
|
|
511
|
+
this.externalCamera = null;
|
|
489
512
|
const target = this.getTarget(tempVec3A);
|
|
490
513
|
const position = this.getPosition(tempVec3B);
|
|
491
514
|
const aspect = resolveAspect(this.renderer, this.domElementRef);
|
|
@@ -517,9 +540,10 @@ var DualCameraControls = class extends import_camera_controls.default {
|
|
|
517
540
|
* Switch to the orthographic camera while keeping the current framing.
|
|
518
541
|
*/
|
|
519
542
|
switchToOrthographic(enableTransition = false) {
|
|
520
|
-
if (this.activeMode === "orthographic") {
|
|
543
|
+
if (this.activeMode === "orthographic" && !this.externalCamera) {
|
|
521
544
|
return;
|
|
522
545
|
}
|
|
546
|
+
this.externalCamera = null;
|
|
523
547
|
const target = this.getTarget(tempVec3A);
|
|
524
548
|
const position = this.getPosition(tempVec3B);
|
|
525
549
|
const aspect = resolveAspect(this.renderer, this.domElementRef);
|
|
@@ -557,6 +581,92 @@ var DualCameraControls = class extends import_camera_controls.default {
|
|
|
557
581
|
this.switchToPerspective(enableTransition);
|
|
558
582
|
}
|
|
559
583
|
}
|
|
584
|
+
/**
|
|
585
|
+
* Returns true if currently using an external camera.
|
|
586
|
+
*/
|
|
587
|
+
get isUsingExternalCamera() {
|
|
588
|
+
return this.externalCamera !== null;
|
|
589
|
+
}
|
|
590
|
+
/**
|
|
591
|
+
* Sets an external camera to use with the controls.
|
|
592
|
+
* This allows using a camera created outside of DualCameraControls.
|
|
593
|
+
* Call `clearExternalCamera()` to return to the internal cameras.
|
|
594
|
+
*/
|
|
595
|
+
setCamera(camera, target, enableTransition = false) {
|
|
596
|
+
const previousCamera = this.camera;
|
|
597
|
+
this.externalCamera = camera;
|
|
598
|
+
const aspect = resolveAspect(this.renderer, this.domElementRef);
|
|
599
|
+
if (camera.type === "PerspectiveCamera") {
|
|
600
|
+
;
|
|
601
|
+
camera.aspect = aspect;
|
|
602
|
+
camera.updateProjectionMatrix();
|
|
603
|
+
} else if (camera.type === "OrthographicCamera") {
|
|
604
|
+
const ortho = camera;
|
|
605
|
+
const currentHeight = (ortho.top - ortho.bottom) * 0.5;
|
|
606
|
+
const newHalfWidth = currentHeight * aspect;
|
|
607
|
+
ortho.left = -newHalfWidth;
|
|
608
|
+
ortho.right = newHalfWidth;
|
|
609
|
+
ortho.updateProjectionMatrix();
|
|
610
|
+
}
|
|
611
|
+
this.camera = camera;
|
|
612
|
+
const mode = camera.type === "PerspectiveCamera" ? "perspective" : "orthographic";
|
|
613
|
+
this.activeMode = mode;
|
|
614
|
+
this.updateInputBindingsForMode(mode);
|
|
615
|
+
const targetVec = toVector3(target, [0, 0, 0], tempVec3A);
|
|
616
|
+
void this.setLookAt(
|
|
617
|
+
camera.position.x,
|
|
618
|
+
camera.position.y,
|
|
619
|
+
camera.position.z,
|
|
620
|
+
targetVec.x,
|
|
621
|
+
targetVec.y,
|
|
622
|
+
targetVec.z,
|
|
623
|
+
enableTransition
|
|
624
|
+
);
|
|
625
|
+
this.dispatchEvent({
|
|
626
|
+
type: "externalcamerachange",
|
|
627
|
+
camera,
|
|
628
|
+
previousCamera
|
|
629
|
+
});
|
|
630
|
+
}
|
|
631
|
+
/**
|
|
632
|
+
* Clears the external camera and returns to using the internal cameras.
|
|
633
|
+
* Will switch to the camera matching the current mode.
|
|
634
|
+
*/
|
|
635
|
+
clearExternalCamera(enableTransition = false) {
|
|
636
|
+
if (!this.externalCamera) {
|
|
637
|
+
return;
|
|
638
|
+
}
|
|
639
|
+
const target = this.getTarget(tempVec3A);
|
|
640
|
+
const position = this.getPosition(tempVec3B);
|
|
641
|
+
this.externalCamera = null;
|
|
642
|
+
const internalCamera = this.activeMode === "orthographic" ? this.orthographicCamera : this.perspectiveCamera;
|
|
643
|
+
internalCamera.position.copy(position);
|
|
644
|
+
internalCamera.quaternion.copy(this.camera.quaternion);
|
|
645
|
+
internalCamera.up.copy(this.camera.up);
|
|
646
|
+
const aspect = resolveAspect(this.renderer, this.domElementRef);
|
|
647
|
+
if (this.activeMode === "orthographic") {
|
|
648
|
+
this.updateOrthographicFrustum(position, target, aspect);
|
|
649
|
+
} else {
|
|
650
|
+
this.perspectiveCamera.aspect = aspect;
|
|
651
|
+
this.perspectiveCamera.updateProjectionMatrix();
|
|
652
|
+
}
|
|
653
|
+
this.camera = internalCamera;
|
|
654
|
+
void this.setLookAt(
|
|
655
|
+
position.x,
|
|
656
|
+
position.y,
|
|
657
|
+
position.z,
|
|
658
|
+
target.x,
|
|
659
|
+
target.y,
|
|
660
|
+
target.z,
|
|
661
|
+
enableTransition
|
|
662
|
+
);
|
|
663
|
+
this.dispatchEvent({
|
|
664
|
+
type: "modechange",
|
|
665
|
+
mode: this.activeMode,
|
|
666
|
+
previousMode: this.activeMode,
|
|
667
|
+
camera: internalCamera
|
|
668
|
+
});
|
|
669
|
+
}
|
|
560
670
|
/**
|
|
561
671
|
* Update camera projection parameters when the viewport size changes.
|
|
562
672
|
*/
|
|
@@ -4670,9 +4780,9 @@ var ViewHelper = class extends THREE8.EventDispatcher {
|
|
|
4670
4780
|
offset: options.offset || { x: 20, y: 20 },
|
|
4671
4781
|
center: defaultCenter.clone(),
|
|
4672
4782
|
labels: {
|
|
4673
|
-
x: options.labels?.x || "",
|
|
4674
|
-
y: options.labels?.y || "",
|
|
4675
|
-
z: options.labels?.z || "",
|
|
4783
|
+
x: options.labels?.x || "x",
|
|
4784
|
+
y: options.labels?.y || "y",
|
|
4785
|
+
z: options.labels?.z || "z",
|
|
4676
4786
|
...options.labels
|
|
4677
4787
|
}
|
|
4678
4788
|
};
|
|
@@ -4838,7 +4948,7 @@ var ViewHelper = class extends THREE8.EventDispatcher {
|
|
|
4838
4948
|
renderer.autoClear = false;
|
|
4839
4949
|
renderer.setScissorTest(true);
|
|
4840
4950
|
renderer.setScissor(x, y, size, size);
|
|
4841
|
-
renderer.
|
|
4951
|
+
renderer.clearDepth();
|
|
4842
4952
|
renderer.render(this.scene, this.orthoCamera);
|
|
4843
4953
|
renderer.setScissorTest(false);
|
|
4844
4954
|
renderer.autoClear = autoClear;
|