To optimize memory usage in my application, I've implemented a method to dispose of any 3D models that are no longer visible to the camera. This involves checking if the camera can see the position of each model using model.position. The following code snippet is part of my animate loop.
const frustum = new THREE.Frustum();
const matrix = new THREE.Matrix4().multiplyMatrices(test.camera.projectionMatrix, test.camera.matrixWorldInverse);
frustum.setFromProjectionMatrix(matrix);
let earthContainerPos = { ...earthContainer.position }; //using spread syntax to remove reference to container position
earthContainerPos.z += 10; //ensure complete removal only when out of view
if (!frustum.containsPoint(earthContainerPos)) {
console.log('Out of view')
earthContainer.dispose(); //attempting to dispose of the model, but encountering issues
};
The technique successfully detects when a model goes out of view, however, I'm facing difficulties with the disposal method for my container which holds two 3D models. Should I dispose of everything or is there a more efficient way to handle this?
Model Details:
- GLTF models
- 2 models stored in the container