After removing a 3D object from the array, THREE.js becomes unresponsive

Question

After removing a 3D object from the array, THREE.js becomes unresponsive

I am currently developing an online real-time game that involves storing all players and their animation mixers in arrays. However, I have encountered an issue when a player leaves the game. Whenever I attempt to splice them from the player array, the program freezes.

var index = i;
scene.remove(players[index]);
players[index].geometry.dispose();
players[index].material.dispose();
players.splice(index, 1);
interval.splice(index, 1);
mixers.splice(index, 1);
anim.splice(index, 1);
ids.splice(index, 1);

Why does the program freeze when I try splicing these arrays?

javascript arrays three.js

Answer 1

Answer №1

After some trial and error, I discovered that attempting to splice 3dObjects from an array within a for loop using three.js was causing issues. To solve this problem, I created a separate function and utilized window.setTimeout() to call it. The end result is a seamless and functional solution.

window.setTimeout(DeleteObject, 10, i);

function DeleteObject(index){
    scene.remove(objects[index]);
    objects[index].geometry.dispose();
    objects[index].geometery = null;
    objects[index].material.dispose();
    objects[index].material = null;
    objects[index].dispose();
    objects[index] = null;
    objects.splice(index, 1);
    intervals.splice(index, 1);
    mixers.splice(index, 1);
    animations.splice(index, 1);
    identifiers.splice(index, 1);
}

Answer 2

After some trial and error, I discovered that attempting to splice 3dObjects from an array within a for loop using three.js was causing issues. To solve this problem, I created a separate function and utilized window.setTimeout() to call it. The end result is a seamless and functional solution.

window.setTimeout(DeleteObject, 10, i);

function DeleteObject(index){
    scene.remove(objects[index]);
    objects[index].geometry.dispose();
    objects[index].geometery = null;
    objects[index].material.dispose();
    objects[index].material = null;
    objects[index].dispose();
    objects[index] = null;
    objects.splice(index, 1);
    intervals.splice(index, 1);
    mixers.splice(index, 1);
    animations.splice(index, 1);
    identifiers.splice(index, 1);
}

After removing a 3D object from the array, THREE.js becomes unresponsive

Answer №1

Similar questions

Strip out the script tag from the data received in the AJAX response

Antialiasing with Three.js appears to be malfunctioning specifically on iPhone 5 and iPhone 5s devices

Launching a program through a web browser - a step-by-step guide

Finding the current div based on the scrolling position can be achieved without the use of jQuery

Maintain the state of the previous page in Vue to ensure continuity

Utilizing VueJS to choose an item from a list and exhibit it using a function

Concealing the clicked HTML element once the AJAX request is successful

Tips and tricks for retaining the collapsed state upon reloading Bootstrap 5

Identify duplicate values within an array and remove them based on certain conditions

Getting the result from a JavaScript request, whether it's synchronous or asynchronous

What is the best way to incorporate JQuery into html content retrieved through an ajax request?

What is the best way to extract the value from a specific field in a SQL database?

Generating a MySQL query to create a table in JSON structure using JavaScript

Ways to evaluate the properties of two objects in Angular

How to retrieve the value of a nested checkbox in Angular using dynamic methods

Tips for Implementing a "Please Hold On" Progress Bar in ASP.NET

Leveraging the Wikia API

Modifying the width of a jQuery UI dialog from within the dialog box itself

Experiencing a crash immediately following the implementation of the operator new[] in C++

Reposition checkbox within dropdown list