three.js 오브젝트 삭제하기

오브젝트를 삭제하는 방법과 간과하기 쉬운 점들을 알아보자.

// delete object
const btn = document.createElement('button');
btn.style.cssText = 'position: absolute; left: 20px; top: 20px; font-size: 20px';
btn.innerHTML = 'delete';
document.body.append(btn);

btn.addEventListener('click', ()=>{
    spheres.forEach(item => {
        item.cannonBody.removeEventListener('collide', collide);
        cannonWorld.removeBody(item.cannonBody);
        scene.remove(item.mesh);
    })
});

위 코드에서는 DOM으로 버튼을 생성해서 버튼 event를 오브젝트 삭제 이벤트로 만들었다.

 

우선 scene에서 mesh를 삭제하고, cannon world에서 연산되는 body도 제거해주어야한다.

여기서 간과하기 쉬운 점은 오브젝트에 function event를 binding한 것들도 메모리를 차지하므로 모두 제거해주어야한다.