javascript - three.js 内存泄漏 .dispose() 不工作/错误使用

Question

美好的一天!

内存处理有问题。我阅读了很多论坛，但仍然找不到我的代码有什么问题。

我正在开展一个项目，我将 d3.js 与 three.js 结合起来以可视化空间轨道上的行星等节点。我有很多数据——比如 8 条以上轨道上的 8000 颗行星。但是当我尝试加载新数据时 - 我无法在没有内存泄漏的情况下销毁当前树。

如有任何帮助，我将不胜感激!这是我创建行星和尝试摧毁它们的部分代码:

function initTree(root) {
    var start, end;

    var nodes = tree.nodes(root); //this is d3.js tree init
    var depth = getDepth(root);

    var first_x_offset = nodes[0].x;
    if (isNaN(first_x_offset)) {first_x_offset = 0}

    //create orbits
    var orbitTexture = new THREE.ImageUtils.loadTexture('img/orbit_texture.png');
    var orbitMaterial = new THREE.MeshBasicMaterial({map: orbitTexture, transparent:true, side: THREE.DoubleSide, alphaTest: 0.05, opacity:0.3});
    var sphereGeometry = new THREE.SphereGeometry(1, 6, 6);

    var orbitSize = 30;
    for (var k=1; k<depth; k++) {
        var orbit = new THREE.Mesh(new THREE.CircleGeometry(orbitSize*k, 64), orbitMaterial);
        orbit.rotation.x = -90*Math.PI/180;
        orbit.name = 'orbit';
        scene.add(orbit);
    }
    //end orbits

    //camera position
    camera.position.x = 0;
    camera.position.y = 70;
    camera.position.z = -orbitSize*depth-100;

    controls.target.x = 0;
    controls.target.y = 0;
    controls.target.z = 0;

    camera.up.x = 0;
    camera.up.y = 1;
    camera.up.z = 0;

    //this is parent object to place in center
    var parent = new THREE.Object3D();
    parent.name = 'parent';
    scene.add(parent);

    y=0;

    spheres = {};
    objects = [];

    nodes.forEach(function(d) {
        if (d.type == 'BLANK') {return}
        d.x = d.x - first_x_offset;
        if (isNaN(d.x)) {d.x = 0}

        var sphereMaterial = new THREE.MeshLambertMaterial({color: 0xdddddd, wireframe: false, opacity: 0.7, transparent: true});
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial );
        sphere.material.color.setHex(color_type[d.type]);

        sphere.castShadow = false; //maybe change to true
        sphere.id2 = y;
        d.id2 = y;
        sphere.d = d;

        sphere.scale.x = radius_type[d.type];
        sphere.scale.y = radius_type[d.type];
        sphere.scale.z = radius_type[d.type];

        sphere.name = 'sphere';

        spheres[y] = sphere;
        //count items of each type
        count_type[d.type]++;
        //how many nodes in tree
        y++;

        //create pivot
        var pivot = new THREE.Object3D;
        //rotate it
        pivot.rotation.y = d.x*Math.PI/180-90;
        //append to parent
        pivot.name = 'pivot';
        parent.add(pivot);
        //add mesh to pivot
        var default_distance = size/(depth-1);
            if (d.y > 0) {
                d.y = (Math.round(d.y/default_distance)) * (orbitSize-8.8);
            }

        sphere.position.x = d.y;
        sphere.position.y = 0; //should be 0!
        sphere.position.z = d.y;

        objects.push(sphere);

        pivot.add(sphere);
    });
    nodesLength = y;

    render();

    $('.loading').fadeOut(500);
    if (!animationId) {
        animate();
    }
    temp = null;
    nodes = null;

}

所以我将球体添加到父 Object3D，然后将其添加到场景。

这里是销毁函数:

function destroyTree() {
    //spheres
    //console.log(renderer.info);
    var to_delete = [];

    for (var i=0; i<spheres.length; i++) {
        scene.remove(spheres[i]);
        spheres[i].material.dispose();
        spheres[i].geometry.dispose();
    }
    for (var i=0; i<spheres.length; i++) {
        spheres[i] = undefined;
    }
    spheres = {};
    for (var i=0; i<objects.length; i++) {
        scene.remove(objects[i]);
    }
    for (var i=0; i<objects.length; i++) {
        objects[i] = undefined;
    }
    objects = [];

    var parent = scene.getObjectByName('parent');
    scene.remove(parent);

    if (links.length) {
        for (var i=0; i<links.length; i++) {
            scene.remove(links[i]);
        }
    }
    links = [];

    scene.traverse(function (child) {
        if (child instanceof THREE.Mesh) {
            if (child.name.length) {
                to_delete.push(child);
            }
        }

    });

    for (var i=0; i<to_delete.length; i++) {
        scene.remove(to_delete[i]);

            to_delete[i].geometry.dispose();
            to_delete[i].material.dispose();
        to_delete[i] = undefined;
    }

    to_delete = [];

}

Answer 1

遍历场景不也能找到球体吗？在该循环中，您可以直接处理而不需要 to_delete 数组。如果所有 speres 都不是场景的 child ，那么可能会重新考虑何时创建它们？这些只是优化，除了澄清它可能泄漏的地方之外，可能做的很少。

然后再尝试持有一组纹理并直接释放它们？

等等，这个链接说要从渲染器中删除对象和纹理。

Memory leak in Three.js

renderer.deallocateObject渲染器.deallocateTexture