Question

我使用canvas渲染器构建了一个ThreeJS应用程序（由于项目要求），我遇到了内存/垃圾回收问题。

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

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

我们未能解决这个问题，并且拼命寻求建议。该项目即将推出，因此非常感谢任何直接的指导/建议。

这是一个说明问题的小提琴。 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

这是库中的一个错误。抱歉：（

我无法相信直到现在我们还没有点击__objectsAdded和__objectsRemoved因为性能原因而添加WebGLRenderer。但是，我们忘记了它在其他渲染器上产生的副作用（我看到你正在使用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(){} }

}

ThreeJS垃圾收集问题

1 个答案: