IFrame中的ThreeJS使移动浏览器在几次重定向后崩溃

Question

我有基于ThreeJS的页面，我通过Iframe将这些页面包含到其他页面中：http://krosapp.cz/produktove-3d-modely
问题是，在手机(只有1GB RAM的IPhone 7(上，使用ThreeJS Iframe在两个页面之间切换(两个链接"Bota"one_answers"Brasna"(会导致浏览器在切换两三次后崩溃。奇怪的是，如果我从一个有Iframe的页面直接转到一个有threejs的页面(没有Iframe(，然后再回到Iframe中有threejs的页面，它就可以正常工作了。或者，如果我从一个有threejs-iframe的页面转到一些没有threejs的普通页面，然后转到一个有threejs-ifame的页面，那没关系，我可以多次这样做而不会出现问题。只有当我从Iframe中有threeJS的页面转到Iframe中有three JS的另一个页面时，问题才会出现。如果我对同一个threejs场景做同样的事情，但不使用Iframes，那没关系，我可以重新做一遍。看起来，如果一个threejs页面在iframe中，那么在重定向到另一个页面后，它会以某种方式保留在内存中。或者类似的东西。有人有什么建议或想法吗？为什么会这样？

Answer 1

我也遇到过类似的问题，Three.js在重定向时保留在内存中，我认为这是Three.js的已知问题。我建议您创建一个可以在重定向时调用的dispose方法，以完全处理所有Three.jss资源。这是我的项目中的一个(在我的情况下，This.world是scene.childred[0]，如果你想的话，你可以直接遍历场景(

dispose: async function () {
//console.log(window.performance.memory);
return new Promise(disposed => {
this.world.traverse(function (obj) {
if (obj.geometry) {
obj.geometry.dispose();
}
if (obj.material) {
if (obj.material instanceof THREE.MeshFaceMaterial) {
obj.material.materials.forEach(function (m) {
m.dispose();
if (m.map) {
m.map.dispose();
}
});
} else {
obj.material.dispose();
}
let m = obj.material;
let md = (m.map || m.alphaMap || m.aoMap || m.bumpMap || m.displacementMap || m.emissiveMap || m.envMap || m.lightMap || m.metalnessMap || m.normalMap || m.roughnessMap)
if (md) {
if (m.map) m.map.dispose();
if (m.alphaMap) m.alphaMap.dispose();
if (m.aoMap) m.aoMap.dispose();
if (m.bumpMap) m.bumpMap.dispose();
if (m.displacementMap) m.displacementMap.dispose();
if (m.emissiveMap) m.emissiveMap.dispose();
if (m.envMap) m.envMap.dispose();
if (m.lightMap) m.lightMap.dispose();
if (m.metalnessMap) m.metalnessMap.dispose();
if (m.normalMap) m.normalMap.dispose();
if (m.roughnessMap) m.roughnessMap.dispose();
}
}
if (obj.dispose) {
obj.dispose();
}
});
this.scene.remove(this.world);
this.scene.dispose();
this.world.children = [];
this.world = null;
this.labelRenderer.dispose();
this.renderer.dispose();
disposed('dispose finished');
//console.log(window.performance.memory);
});
}