Hello all,
I was playing with a scene where I load FBX model (Mixamo) where I load it and then by pressing the button DELETE the model is removed from the scene. One thing I noticed is that in my console memory is not reducing once I remove my model from the scene.
I looked at the three examples and found this example:
https://threejs.org/examples/?q=fbx#webgl_loader_fbx
When I change to box mesh the memory is freed up
I tried copying the code, but when I do it in my set up and when I remove my model it is removed from the scene, but the memory is not freed up for some reason. I thought maybe it needs time for the GC, but it just does not clear up:
Before removing
After removing
My code is not much different from the example:
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
let scene, camera, renderer, controls, fbxLoader;
let object;
const manager = new THREE.LoadingManager();
let btn = document.getElementById("remove");
init();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer();
scene.background = new THREE.Color( 0xf0f0f0 );
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setAnimationLoop( animate );
document.body.appendChild(renderer.domElement);
camera.position.set( 100, 200, 300 );
controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 1, 0)
controls.update();
const dirLight = new THREE.DirectionalLight( 0xffffff, 5 );
dirLight.position.set( 0, 200, 100 );
dirLight.castShadow = true;
dirLight.shadow.camera.top = 180;
dirLight.shadow.camera.bottom = - 100;
dirLight.shadow.camera.left = - 120;
dirLight.shadow.camera.right = 120;
scene.add( dirLight );
const ambientLight = new THREE.AmbientLight(0x404040, 50);
scene.add(ambientLight);
window.addEventListener('resize', onWindowResize);
btn.addEventListener("click", removeModel);
fbxLoader = new FBXLoader(manager);
loadModel();
}
function loadModel() {
fbxLoader.load(
'/male_bot.fbx',
function (group){
object = group;
scene.add(object);
}
)
}
function removeModel(){
if ( object ) {
object.traverse( function ( child ) {
if ( child.material ) {
const materials = Array.isArray( child.material ) ? child.material : [ child.material ];
materials.forEach( material => {
if ( material.map ) material.map.dispose();
material.dispose();
} );
}
if ( child.geometry ) child.geometry.dispose();
} );
scene.remove( object );
}
}
function animate() {
renderer.render( scene, camera );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
I would appreciate if someone could point out what am I missing here or not understanding.
Thanks a bunch.