javascript - ThreeJS 垃圾收集问题

Question

我使用 Canvas 渲染器构建了一个 ThreeJS 应用程序(由于项目要求)，但遇到了内存/垃圾收集问题。

部分应用程序逻辑创建了大量网格，以在平面 2d donut /环的片段上实现动画。在每个动画 channel 中，我们都会删除所有先前的网格并生成新的网格。

当对象从场景中删除时，它们不会从内存中删除，而是移动到名为 __objectsRemoved 的数组中。这是无限期地保留的 - 我想有某种垃圾收集最终会清理所有内容，但我不知道如何触发它。应用程序的内存使用量不断攀升，直到浏览器在 30-40 秒内停止运行。

我们无法解决这个问题，正在拼命寻求建议。该项目即将启动，因此非常感谢任何即时指导/建议。

这是一个说明问题的 fiddle 。 http://jsfiddle.net/729sv/

var camera, scene, renderer;
var base = 0;

init();
animate();

function init() {
    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 100;

    document.addEventListener('mousedown', update, false);

    update();
}

function update() {

    if (base) scene.remove(base);

    base = new THREE.Object3D();
    scene.add(base);

    for (var j = 0; j < 10; ++j) {

        var geometry = new THREE.IcosahedronGeometry(50, 3);
        var material = new THREE.MeshNormalMaterial()
        var mesh = new THREE.Mesh(geometry, material);
        base.add(mesh);
    }
}

function animate() {
    requestAnimationFrame(animate);
    console.log(scene.__objectsRemoved.length);
    renderer.render(scene, camera);
}

我们正在运行 ThreeJS R62

谢谢!

Answer 1

这是库中的一个错误。抱歉:(

我不敢相信我们直到现在才遇到这个问题...出于性能原因为 WebGLRenderer 添加了 __objectsAdded 和 __objectsRemoved 。但是，我们忘记了这对其他渲染器产生的副作用(我看到您正在使用 CanvasRenderer...)

作为解决方法...您可以尝试覆盖这些数组:

scene = new THREE.Scene();

if ( renderer instanceof THREE.CanvasRenderer ) {

    scene.__lights = { length: 0, push: function(){}, indexOf: function (){ return -1 }, splice: function(){} }
    scene.__objectsAdded = { length: 0, push: function(){}, indexOf: function (){ return -1 }, splice: function(){} }
    scene.__objectsRemoved = { length: 0, push: function(){}, indexOf: function (){ return -1 }, splice: function(){} }

}