三.js ObjLoader 内存增加答案

【问题标题】：three.js ObjLoader Memory Increasing三.js ObjLoader 内存增加
【发布时间】：2014-02-16 19:38:23
【问题描述】：

我正在使用 OBJLoader.js。我有一个按钮，点击时会从场景中删除一个 3d 模型并添加一个新模型，但每次加载模型时，chrome 中的内存使用量都会增加约 50 MB，并且不会减少。我试过“dispose()”和null，但用处不大。有一个动画函数每秒被调用一次，它使用渲染器渲染场景。

function freeMemory(model) {
if (model instanceof THREE.Mesh) {
    var texMat = model.material;
    texMat.map.dispose();
    texMat.map = null;
    texMat.dispose();
    texMat = null;
    model.geometry.dispose();
    model.geometry = null;
    model = null;
 }
}

function loadModel() {
scene.remove(model);
freeMemory(model);
var loader = new THREE.OBJLoader();
loader.load('test3d.obj', function(object) {
    object.children[0].geometry.computeFaceNormals();
    geometry = object.children[0].geometry;
    console.log(geometry);
    geometry.dynamic = true;
    var modelTexture = THREE.ImageUtils.loadTexture("models/tex_0.jpg");
    object.traverse(function(child) {
        if (child instanceof THREE.Mesh) {
            child.material.map = modelTexture;
            model = child;
            model.scale.set(0.5, 0.5, 0.5);
            model.translateOnAxis(new THREE.Vector3(1, 0, 1).normalize(),
                    1.5);
            model.rotation.x = 0;
            model.rotation.y = 0;
            model.rotation.z = 0;
            modelInitialPositionX = model.position.x;
            modelInitialPositionY = model.position.y;
            modelInitialPositionZ = model.position.z;
            scene.add(model);
        }
    });
    modelTexture.dispose();
    modelTexture = null;
});
loader = null;
}

我有任何最佳实践可用于在单击按钮时添加和删除 .obj 和纹理。

【问题讨论】：

stackoverflow.com/a/33199591/1980846

标签： three.js

【解决方案1】：

尝试停止动画，代码如下：

animate(){
    this.requestId = requestAnimationFrame(this.animate.bind(this));
    this.render();
}
render(){
    this.renderer.render(this.scene, this.camera);
}
stop(){
    window.cancelAnimationFrame(this.requestId);
}

【讨论】：

【解决方案2】：

如果在将 Object3D 添加到场景之前将其存储在 var 中，则无需删除/处置它并实例化新对象，只需修改它即可，也许这不会导致内存泄漏。

尝试类似：

var model = new THREE.Mesh( firstGeometry, firstMaterial);
scene.add( model );

然后，当你需要替换它时，你只需修改它：

model.geometry = newGeometry;
model.material = newMaterial;

无需再次将其添加到您的场景中。

如果你摆弄它，我可以编辑你的 loadModel 函数。

【讨论】：

每次必须加载模型时都实例化一个新的 OBJLoader 可能会导致另一个内存泄漏。这没有任何意义，因为如果你需要加载多个模型，你只需实例化一个加载器，每次需要时使用它

【解决方案3】：

一种解决方法是尝试限制帧速率。我发现它可以将内存使用量降到最低。我的草图会一直使用增量内存，直到电脑开始挂起，有时 gpu 使用率约为 80%。

Limiting framerate in Three.js to increase performance, requestAnimationFrame?

【讨论】：

降低帧率不会影响加载到模型中使用的内存。
限制帧率后检查统计面板。