新页面加载时销毁Three.js

我正在帮助一个朋友在Wordpress的一个页面上设置一个关于主题的3.js场景。该主题使用某种页面转换脚本，在导航到其他页面时不会重新加载站点，每次在站点上注入新页面时，都会创建Three.js场景的新初始化

我正在寻找在加载新页面时完全删除Three.js的整个实例的方法。因此，当Lay主题有这个函数

window.laytheme.on（“newPageShowed”，函数（layoutObj，type，obj）{}

时，它会从头开始创建，这种函数可以替代

window.onload

为了删除所有内容，我尝试了不同的方法，但不幸的是，由于我的Three.js代码是从不同的演示和示例中复制和粘贴的混合结果，我不太确定到底需要销毁什么以及如何销毁。老实说，我不完全确定代码是如何设置的，而且我对Three.js没有多少经验ree.js及其生命周期

以下是创建场景的代码：

（函数（$）{
var base_url=window.location.origin；
var容器，stats；
摄像机、场景、渲染器、控件、管理器、加载程序、纹理；
var mouseX=0，
mouseY=0；
var windowHalfX=window.innerWidth/2；
var windowHalfY=window.innerHeight/2；
var$currentModel；
var模型名；
var初始位置；
var初始量表；
window.laytheme.on（“NewPageShowed”，函数（layoutBj，type，obj）{
modelName=$（“.modelLink.is active”）.data（“modelName”）；
initialScale=$（“.modelLink.is active”）.data（“模型比例”）；
initialGridPosition=$（“.modelLink.is active”）.data（“模型网格位置”）；
init（）；
制作动画（）；
});
函数init（）{
container=document.createElement（'div'）；
container.id=“threejs container”；
文件.正文.附件（容器）；
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，12000）；
摄像机位置z=300；
摄像机位置y=100；
//场面
场景=新的三个。场景（）；
var环境光=新的三个环境光（0xffffff，0.7）；
场景。添加（环境光）；
var pointLight=新的三点光源（0xffffff，0.3）；
添加（点光源）；
场景。添加（摄影机）；
//模型
var onProgress=函数（xhr）{
if（xhr.长度可计算）{
var percentComplete=xhr.loaded/xhr.total*100；
$（“#domLoader”）.show（）；
$（“#domLoader”）.text（数学四舍五入（完成百分比，2）+'%'）；
}
};
//质地
manager=新的三个。加载manager（）；
manager.onProgress=功能（项目、已加载、总计）{
如果（总计==已加载）{
$（“#domLoader”）.hide（）；
$（“.col--row”）.removeClass（“是隐藏的”）；
$currentModel=$（“.modelLink.is active”）；
$（“#元标题”）.text（'stevns_klint'+$currentModel.data（“模型名称”））；
$（“#元顶点”）.text（$currentModel.data（“模型顶点”））；
$（“#元面”）.text（$currentModel.data（“模型面”））；
$（“#元坐标”）.text（$currentModel.data（“模型坐标”）；
$（“#元坐标url”）.attr（“href”），$currentModel.data（“模型坐标url”）；
$（“#元日期”）.text（$currentModel.data（“模型日期”）；
$（“#元图像”）.text（$currentModel.data（“模型图像”））；
}
控制台日志（项目、已加载、总计）；
};
纹理=新的三个纹理（）；
var onProgress=函数（xhr）{
if（xhr.长度可计算）{
var percentComplete=xhr.loaded/xhr.total*100；
log（Math.round（完成百分比，2）+'%download'）；
$（“#domLoader”）.show（）；
$（“#domLoader”）.text（数学四舍五入（完成百分比，2）+'%'）；
}
};
var onError=函数（）{}；
//创建初始模型
加载器=新的三个。图像加载器（管理器）
loader.setPath（base_url+'/assets/'+modelName+'/'）。load（'texture.jpg'，函数（图像）{
纹理.图像=图像；
texture.needsUpdate=true；
});
加载器=新的三个。对象加载器（管理器）；
loader.setPath（base_url+'/assets/'+modelName+'/'）。load（'model.obj'，function（object）{
遍历（函数（子对象）{
if（三个.Mesh的子实例）{
child.material.map=纹理；
}
if（child.material）{
child.material.side=3.DoubleSide；
}
});
object.scale.x=初始比例；
object.scale.y=初始比例；
object.scale.z=初始刻度；
object.name=“mainModel”；
场景。添加（对象）；
}，onProgress，onError）；
renderer=new THREE.WebGLRenderer（）；
setClearColor（0xffffff，1）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
container.appendChild（renderer.domeElement）；
变量大小=300；
var分区=30；
var gridHelper=new THREE.gridHelper（大小、分区、0x000000、0x000000）；
添加（gridHelper）；
gridHelper.position.y=初始GridPosition；
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
controls.screenSpacePanning=true；
controls.minDistance=150；
controls.maxDistance=300；
controls.target.set（0,0,0）；
controls.enableDamping=true；
controls.enablePan=false；
controls.autoRotate=true；
controls.enableKeys=false；
controls.autoRotateSpeed=0.04；
控制。阻尼系数=0.07；
controls.rotateSpeed=0.04；
控件更新（）；
addEventListener（'resize'，onWindowResize，false）；
//在模型链接上更改模型单击
$（“.modelLink”）。在（“单击”，函数（）{
$（“.modelLink”）.removeClass（“处于活动状态”）；
$（this.addClass（“处于活动状态”）；
$（“.col--row”）.addClass（“是隐藏的”）；
var模型名=