如何销毁 Three.js 实例

Question

在我的 API 中，我有一个使用 Three.js 渲染 3D 模型的组件，事实是当我加载页面时一切正常，但是当我进入另一个页面时，就像 three.js 仍在工作一样，所以我什至可以点击或输入（three.js 仍然让您的点击和拖动作为相机控件）。

我尝试在加载从here 获得的页面后设置一个函数，该函数将所有由 Three.js 创建的组件设置为 null 并删除容器，这会删除所有场景但仍然可以'不要做一个简单的点击或输入一个字母。

一旦destroy()方法完成，我会不断地从方法empty(elem)中得到一个错误，因为很明显lastChild是null，它被删除了。

function empty(elem) {
            while (elem.lastChild) elem.removeChild(elem.lastChild);
        }
        function destroy(){
            setInterval( () => {
                cancelAnimationFrame(id);// Stop the animation
                renderer.domElement.addEventListener('dblclick', null, false); //remove listener to render
                scene = null;
                light = null;
                camera = null;
                controls = null;
                empty(container);
                container = null;
            }, 2500)
        }

        destroy()

我也有这个 beforeDestroy 在我退出页面时删除 div（画布）。

beforeDestroy() {
        var elem = document.querySelector('#divId');
        elem.parentNode.removeChild(elem);
    },

Answer 1

解决方案是controls.dispose()