Question

我正在开发一个带有三个j的简单Web应用程序，并且遇到内存泄漏问题，我在Firefox中重现但在Chrome中没有。在移动浏览器中再次复制。

我的脚本创建一个渲染器（WebGlRenderer）一个场景和一个透视摄像头。然后我创建了一个CubeTexture加载器，用于加载立方体网格（全局变量）的图像，然后将其添加到场景中。

我有一个滑块以便在场景中导航。在每个导航（滑块项目单击）中，我调用loader.load函数向其传递要加载的新多维数据集的图像的URL。在里面我只创建一个材质，然后更新立方体网格材料。

脚本示例：

var renderer = new THREE.WebGLRenderer({antialias: false});
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth /     window.innerHeight, 0.1, 10000);

// Cube mesh. The material of this mesh will be updated every time users clicks an item of slider
var cubeMesh = null;

var loader = new THREE.CubeTextureLoader();

// This function is called when users clicks an slider item. Here there is something making the memory grow on every call
function onSliderItemClick(urls) {

    skyCube = loader.load(
            urls,
            // On texture created
            function (texture) {
                var shader = THREE.ShaderLib["cube"];
                    shader.uniforms["tCube"].value = texture;

                    var material = new THREE.ShaderMaterial({
                        fragmentShader: shader.fragmentShader,
                            vertexShader: shader.vertexShader,
                            uniforms: shader.uniforms,
                            depthWrite: false,
                            side: THREE.BackSide

                    });
                    var geometry = new THREE.BoxGeometry(100, 100, 100);
                    if (!cubeMesh) {
                        cubeMesh = new THREE.Mesh(geometry, material);
                            cubeMesh.position.set(0, controls.userHeight, 0);
                            // Add the inital cube mesh to the scene. Next imes this cube is already
                            // on the scene so we only update its material
                            scene.add(cubeMesh);
                    } else {
                            // We update the material of the cube mesh. Here memory increases. Old material still in memory?
                            cubeMesh.material = material;
                    }


            },
            // When loading
            function (xhr) {
                console.log((xhr.loaded / xhr.total * 100) + '% loaded');
            },
        // On error
        function (xhr) {
        console.log('An error happened');
            }
      );

}

每次调用loader.load函数并更新立方体网格的材质时，内存使用量都会增加。最后，当我多次更新材料（多次单击滑块项目）时，内存使用率非常高，以至于O.S直接关闭Firefox。

关于我可以做什么，看到或尝试更新立方体网格的材料以确保从内存中清除不需要的对象的任何想法？

非常感谢

CubeTextureLoader .load上有三个js内存泄漏

0 个答案: