diff --git a/packages/examples/src/utils/hooks.js b/packages/examples/src/utils/hooks.js index 991a17e..980b3f0 100644 --- a/packages/examples/src/utils/hooks.js +++ b/packages/examples/src/utils/hooks.js @@ -7,7 +7,7 @@ export const useAsset = (src, type, props) => { const app = useApp(); return useQuery({ - queryKey: [src], + queryKey: [app.root?.getGuid(), src, type, props], queryFn: () => app && fetchAsset(app, src, type, props) }) } diff --git a/packages/lib/src/Container.tsx b/packages/lib/src/Container.tsx index dff6e00..4e5c5cf 100644 --- a/packages/lib/src/Container.tsx +++ b/packages/lib/src/Container.tsx @@ -15,7 +15,7 @@ export const Container: FC = ({ asset, ...props }) => { const app = useApp(); useLayoutEffect(() => { - if (asset && entityRef.current) { + if (app && asset?.resource && entityRef.current) { const assetEntity = asset.resource.instantiateRenderEntity(); entityRef.current.addChild(assetEntity); assetEntityRef.current = assetEntity; @@ -26,13 +26,14 @@ export const Container: FC = ({ asset, ...props }) => { entityRef.current.removeChild(assetEntityRef.current); assetEntityRef.current.destroy(); + asset.resource?.destroy(); + entityRef.current = null; assetEntityRef.current = null; }; - }, [app, parent, asset]); + }, [app, parent, asset, asset.resource]); - if (!asset) return null; return ; }; \ No newline at end of file diff --git a/packages/lib/src/hooks/use-component.tsx b/packages/lib/src/hooks/use-component.tsx index af13b3f..9c05b71 100644 --- a/packages/lib/src/hooks/use-component.tsx +++ b/packages/lib/src/hooks/use-component.tsx @@ -25,10 +25,14 @@ export const useComponent = (ctype: string, props: ComponentProps): void => { } return () => { - if (componentRef.current) { + const comp = componentRef.current + componentRef.current = null; + + if(!app || !app.root) return; + + if (comp) { type SystemKeys = keyof typeof app.systems; if (app.systems[ctype as SystemKeys]) parent.removeComponent(ctype); - componentRef.current = null; } }; }, [app, parent, ctype]); diff --git a/packages/lib/src/hooks/use-script.tsx b/packages/lib/src/hooks/use-script.tsx index 7ebcd8f..3c2191e 100644 --- a/packages/lib/src/hooks/use-script.tsx +++ b/packages/lib/src/hooks/use-script.tsx @@ -41,17 +41,16 @@ export const useScript = (ScriptConstructor: typeof Script, props: Props) : void // Cleanup function to remove the script when the component is unmounted return () => { - if(!app) return; const scriptComponent = scriptComponentRef.current; const script = scriptRef.current; - if (script && scriptComponent) { - scriptComponent.destroy(scriptRef.current); - } else { - console.log('Script not found on parent entity', parent?.script, scriptRef.current); - script.fire('destroy'); - } scriptRef.current = null; scriptComponentRef.current = null; + + if (app && app.root && script && scriptComponent) { + scriptComponent.destroy(script); + } else if (script) { + script.fire('destroy'); + } }; }, [app, parent, ScriptConstructor]); diff --git a/packages/lib/src/scripts/orbit-controls/orbit-camera.js b/packages/lib/src/scripts/orbit-controls/orbit-camera.js index 4f44331..bfddddc 100644 --- a/packages/lib/src/scripts/orbit-controls/orbit-camera.js +++ b/packages/lib/src/scripts/orbit-controls/orbit-camera.js @@ -484,10 +484,10 @@ export class OrbitCameraInputMouse extends Script { // Remove the listeners so if this entity is destroyed this.on('destroy', function () { - this.app.mouse.off(EVENT_MOUSEDOWN, this.onMouseDown, this); - this.app.mouse.off(EVENT_MOUSEUP, this.onMouseUp, this); - this.app.mouse.off(EVENT_MOUSEMOVE, this.onMouseMove, this); - this.app.mouse.off(EVENT_MOUSEWHEEL, this.onMouseWheel, this); + this.app.mouse?.off(EVENT_MOUSEDOWN, this.onMouseDown, this); + this.app.mouse?.off(EVENT_MOUSEUP, this.onMouseUp, this); + this.app.mouse?.off(EVENT_MOUSEMOVE, this.onMouseMove, this); + this.app.mouse?.off(EVENT_MOUSEWHEEL, this.onMouseWheel, this); window.removeEventListener('mouseout', onMouseOut, false); }); @@ -619,10 +619,10 @@ export class OrbitCameraInputTouch extends Script { this.app.touch.on(EVENT_TOUCHMOVE, this.onTouchMove, this); this.on('destroy', function () { - this.app.touch.off(EVENT_TOUCHSTART, this.onTouchStartEndCancel, this); - this.app.touch.off(EVENT_TOUCHEND, this.onTouchStartEndCancel, this); - this.app.touch.off(EVENT_TOUCHCANCEL, this.onTouchStartEndCancel, this); - this.app.touch.off(EVENT_TOUCHMOVE, this.onTouchMove, this); + this.app.touch?.off(EVENT_TOUCHSTART, this.onTouchStartEndCancel, this); + this.app.touch?.off(EVENT_TOUCHEND, this.onTouchStartEndCancel, this); + this.app.touch?.off(EVENT_TOUCHCANCEL, this.onTouchStartEndCancel, this); + this.app.touch?.off(EVENT_TOUCHMOVE, this.onTouchMove, this); }); } } diff --git a/packages/lib/src/scripts/post/index.js b/packages/lib/src/scripts/post/index.js index 667d014..8ea5676 100644 --- a/packages/lib/src/scripts/post/index.js +++ b/packages/lib/src/scripts/post/index.js @@ -362,7 +362,7 @@ class CameraFrame extends Script { this.cameraComponent.renderPasses?.forEach((renderPass) => { renderPass.destroy(); }); - this.cameraComponent.renderPasses = []; + if (this.app.system) this.cameraComponent.renderPasses = []; this.cameraComponent.rendering = null; this.cameraComponent.jitter = 0; diff --git a/packages/lib/src/scripts/shadow-catcher/index.js b/packages/lib/src/scripts/shadow-catcher/index.js index d47cc1e..2ab0d6c 100644 --- a/packages/lib/src/scripts/shadow-catcher/index.js +++ b/packages/lib/src/scripts/shadow-catcher/index.js @@ -92,7 +92,7 @@ class ShadowCatcher extends Script { this.material.destroy(); layers.remove(this.layer); - const camera = this.app.root.findOne(node => node?.camera?.enabled)?.camera; + const camera = this.app.root?.findOne(node => node?.camera?.enabled)?.camera; if (!camera) return; camera.layers = camera.layers.filter(layer => layer !== this.layer.id); diff --git a/packages/lib/src/utils/picker.tsx b/packages/lib/src/utils/picker.tsx index 3065401..bc82e0e 100644 --- a/packages/lib/src/utils/picker.tsx +++ b/packages/lib/src/utils/picker.tsx @@ -125,6 +125,7 @@ export const usePicker = (app: AppBase | null, el: HTMLElement | null) => { el.addEventListener('pointerup', onInteractionEvent); el.addEventListener('pointerdown', onInteractionEvent); + el.addEventListener('mouseup', onInteractionEvent); el.addEventListener('click', onInteractionEvent); el.addEventListener('pointermove', onPointerMove); app.on('update', onFrameUpdate);