THREE.js Browser Freeze on Tab Close

Your disposal code is a good start, but there are several potential issues that could be causing the browser to freeze when closing the tab:

Possible Causes and Solutions

1. Incomplete Resource Disposal

Your current disposal code might be missing some resources:

• Materials with Multiple Textures: You're only disposing of material.map, but materials can have many other textures:

JAVASCRIPTCopied
// More thorough material disposal
if(obj.material) {
    // Handle arrays of materials
    if(Array.isArray(obj.material)) {
        obj.material.forEach(material => disposeMaterial(material));
    } else {
        disposeMaterial(obj.material);
    }
}

function disposeMaterial(material) {
    // Dispose all texture properties
    for(const key in material) {
        const value = material[key];
        if(value && typeof value === 'object' && 'isTexture' in value) {
            value.dispose();
        }
    }
    material.dispose();
}

2. Event Timing Issues

• The beforeunload event might not give enough time for all disposal operations to complete.
• Try using unload instead, or both:

JAVASCRIPTCopied
['beforeunload', 'unload'].forEach(eventName => {
    window.addEventListener(eventName, cleanupFunction);
});

3. Asynchronous Operations

• Check if you have any pending asynchronous operations (like AJAX requests, animations) that might be preventing clean shutdown.
• Cancel all timers, intervals, and promises:

JAVASCRIPTCopied
// Clear any animation frames, timeouts, intervals
cancelAnimationFrame(yourAnimationFrameId);
clearTimeout(yourTimeoutId);
clearInterval(yourIntervalId);

4. Memory Leaks

• Check for circular references that might prevent garbage collection
• Ensure all event listeners are properly removed:

JAVASCRIPTCopied
// Remove all event listeners
document.removeEventListener('mousemove', yourMouseMoveHandler);
window.removeEventListener('resize', yourResizeHandler);
// etc.

5. WebGL Context Issues

• Try releasing the WebGL context more explicitly:

JAVASCRIPTCopied
const gl = this.renderer.getContext();
if (gl && typeof gl.getExtension === 'function') {
    gl.getExtension('WEBGL_lose_context')?.loseContext();
}

6. Performance Considerations

• Consider implementing a more gradual cleanup process for very large scenes
• Set all major objects to null after disposal to help garbage collection:

JAVASCRIPTCopied
// After disposal
this.scene = null;
this.camera = null;
this.renderer = null;
this.composer = null;

Try implementing these changes and see if they resolve your issue. The problem is likely related to incomplete resource disposal or timing issues with the cleanup process.