Use of memory

[cxammar]

It seems the component doesn't free up memory when it gets unMounted. When inspecting with Chrome Dev Tools I can see that the memory usage goes up and up after each viewer mount. Am I doing something wrong, is there a way to destroy the instance on Unmount? I'm trying to dipose the instances but not working correctly

<template>
    <div v-if="order.order_media.length > 0" class="pb-6 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:pb-6 mt-6">
        <div class="mt-2 w-full col-span-12 text-sm">
            <masonry-wall :items="order.order_media" :ssr-columns="3" :column-width="250" :gap="12">
                <template #default="{ item, index }">
                    <div class="flex flex-col bg-gray-100 max-w-xs rounded-md px-5 py-4 h-min space-y-2">
                        <model-stl :ref="el => (stlRefs[index] = el)" v-if="isSTLFile(item)"
                            :background-color="'#F3F4F6'" class="w-full !max-w-xs aspect-square"
                            :src="item.temporary_url" :lights="lights" />
                        <viewer v-if="isImageFile(item)" :images="[item]">
                            <img :src="item.temporary_url"
                                class="rounded-md hover:opacity-70 cursor-pointer transition-all" />
                        </viewer>
                    </div>
                </template>
            </masonry-wall>
        </div>
</template>

<script setup>
import { ModelStl } from 'vue-3d-model';
import { ref, onBeforeUnmount, computed } from 'vue';

const props = defineProps({
    order: {
        type: Object,
        required: true,
        default: null
    }
});

const stlRefs = ref([]);


onBeforeUnmount(() => {
    stlRefs.value.forEach((viewer) => {
        if (!viewer) return;

        // Dispose scene
        if (viewer.scene) {
            disposeScene(viewer.scene);
        }

        // Dispose controls (if any)
        if (viewer.controls?.dispose) {
            viewer.controls.dispose();
        }

        // Dispose renderer
        if (viewer.renderer) {
            viewer.renderer.dispose();
            const gl = viewer.renderer.getContext();
            const loseContextExt = gl.getExtension('WEBGL_lose_context');
            loseContextExt?.loseContext();
        }
    });

    // Clear array to remove references
    stlRefs.value = [];
});

function disposeScene(scene) {
    scene.traverse(child => {
        if (child.isMesh) {
            if (child.geometry) {
                child.geometry.dispose();
            }
            if (child.material) {
                if (Array.isArray(child.material)) {
                    child.material.forEach(material => disposeMaterial(material));
                } else {
                    disposeMaterial(child.material);
                }
            }
        }
    });
    scene.clear();
}

function disposeMaterial(material) {
    for (const key in material) {
        if (material.hasOwnProperty(key)) {
            const value = material[key];
            if (value && value.isTexture) {
                value.dispose();
            }
        }
    }
    material.dispose();
}

const lights = [
    { type: 'DirectionalLight', position: { x: 1, y: 1, z: 1 }, color: 0xffffff, intensity: 0.3 },
    { type: 'DirectionalLight', position: { x: -1, y: -1, z: -1 }, color: 0xffffff, intensity: 0.3 },
    { type: 'DirectionalLight', position: { x: 1, y: 0, z: -1 }, color: 0xffffff, intensity: 0.3 },
    { type: 'HemisphereLight', position: { x: 0, y: -1, z: 0 }, skyColor: 0xffffff, groundColor: 0x777777, intensity: 0.1 },
    { type: 'HemisphereLight', position: { x: 0, y: 1, z: 0 }, skyColor: 0xffffff, groundColor: 0x777777, intensity: 0.1 },
    { type: 'PointLight', position: { x: 0, y: 2, z: 2 }, color: 0xffffff, intensity: 0.11 },
    { type: 'PointLight', position: { x: 0, y: -2, z: -2 }, color: 0xffffff, intensity: 0.11 },
    { type: 'AmbientLight', color: 0x999999, intensity: 0.4 }
];

function isImageFile(file) {
    if (!file) {
        console.error("No file provided");
        return false;
    }
    if (file && file.mime_type.startsWith('image/')) {
        const validExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'];
        const extension = file.name.split('.').pop().toLowerCase();
        return validExtensions.includes(extension);
    }
}

function isSTLFile(file) {
    if (!file) {
        console.error("No file provided");
        return false;
    }
    if (file && file.mime_type === 'application/octet-stream') {
        const extension = file.name.split('.').pop().toLowerCase();
        return extension === 'stl';
    }
}

</script>