Question

我在three.js中创建Geometry并用顶点填充它以构建2D地形。我在创建地形后立即将所有Vector3和Face3推送到几何体，然后修改每个顶点并面向每一帧。

因为我每帧修改面顶点，我需要告诉three.js更新面。我正在使用geometry.elementsNeedUpdate = true执行此操作。这是有效的，但是我注意到它会导致大量的内存使用（我的应用程序每秒使用额外的~50mb RAM ）。

以下代码演示了我正在尝试做的事情：

function pushEverything(geom) {
    for (var i = 0; i < 10000; i++) {
        geom.vertices.push(new THREE.Vector3(...));
        geom.faces.push(new THREE.Face3(...));
        geom.faces.push(new THREE.Face3(...));
    }
}

function rebuild(geom) {
    for (var face of geom.faces) {
        face.a = ...
        face.b = ...
        face.c = ...
    }
    geom.elementsNeedUpdate = true
}

var renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById("my-canvas")
});
var geom = new THREE.Geometry();
var camera = new THREE.PerspectiveCamera(...);
pushEverything(geom);
while (true) {
    // Perform some terrain modifications
    rebuild(geom);
    renderer.render(geom, camera);
    sleep(1000 / 30);
}

我已经按照this问题的建议，建议使用geometry.vertices[x].copy(...)代替geometry.vertices[x] = new Vector3(...)。

我的问题是：使用geometry.elementsNeedUpdate = true时，为什么我的内存使用率如此之高？是否有更新Geometry面孔的替代方法？

我正在使用来自NPM的three.js 0.87.1。

Answer 1

我找到并解决了这个问题。这不是three.js部分的内存泄漏，但是我这是一个内存泄漏。

我正在创建一个Geometry并允许自己克隆它，对克隆执行修改，然后将其合并回原始版本。我没有意识到的是，当我完成它时，我应该在克隆的几何体上调用geometry.dispose()。所以，我基本上每帧都克隆几何体，这解释了巨大的内存使用量。

我已修复了我的问题，将Geometry转换为BufferGeometry，并在完成后调用几何体上的geometry.dispose()。我现在预计会占用内存。

three.js使用`elementsNeedUpdate`时内存泄漏

1 个答案: