How to "unload" Needle?

🌵 Needle Engine
1

I am implementing an SPA application using svelte which loads needle JS files as a script on mount, and needle then loads the model I am using. How do I properly destroy the scene/context once the svelte component unmounts/destroys?

2

Hi Martin, if you’re dynamically loading Needle by adding the script, you’ll need to explicitly dispose its context when your Svelte component unmounts. If you’re using the web component, removal of the component from the DOM will automatically trigger disposal (via its disconnectedCallback, which calls dispose internally – see at needle-engine.d.ts.md and at engine_context.d.ts.md).

If you’re managing the Needle Engine manually, store a reference to the created Context and, in Svelte’s onDestroy callback, call its dispose() method. For example:

If you’re also loading assets via AssetReference, remember to call unload() on each loaded asset when the component is destroyed (as shown in the LoadingScenes sample in the docs at engine_addressables.d.ts.md).

This approach ensures that all allocated resources are released properly when the component unmounts, preventing memory leaks in your SPA. Let me know if you need further details!

1 replies left - Become PRO for more replies.
thread_vevLGzCIQEOHo6yj8FqiXzCP
Reply to this post directly if you need further help (bottom right button)

3

I am embedding the needle project into our website like this.

<script type="module" crossorigin src="./assets/index.js"></script>
4

Hi Martin!

When you’re using the <needle-engine> web component, unloading the Needle context can be quite straightforward. To properly destroy the context when your Svelte component is unmounted, you can take advantage of the lifecycle methods provided by Svelte.

Here’s how you can do it:

  1. Remove the <needle-engine> component from the DOM to effectively unload the 3D scene and resources.

  2. Use JavaScript to clean up resources if necessary. The web component will handle some cleanup automatically, but depending on your implementation, you might need to manage additional resources.

Here’s an example approach in your Svelte file:

<script lang="ts">
    import { onMount, onDestroy } from 'svelte';

    onMount(() => {
        // Any initialization logic can go here.
    });

    onDestroy(() => {
        const needleEngineElement = document.querySelector('needle-engine');
        if (needleEngineElement) {
            // Remove the needle-engine from DOM
            needleEngineElement.remove();
        }
    });
</script>

<body>
    <needle-engine src="assets/scene.glb"></needle-engine>
</body>

This code will ensure that once the Svelte component is destroyed, the Needle Engine instance is removed from the DOM, triggering its internal cleanup routines to release resources automatically.

If you have custom global objects or states to manage, ensure to handle their cleanup within the onDestroy lifecycle method as needed. This will help prevent memory leaks.

Let me know if you have any further questions or need help with specific implementations!

0 replies left - Become PRO for more replies.
thread_vevLGzCIQEOHo6yj8FqiXzCP
Reply to this post directly if you need further help (bottom right button)