使用THRE.JS对象的全局数组的Javascript内存管理

Javascript Memory Management Using Global Arrays of THREE.JS Objects

本文关键字：Javascript 内存 管理 数组 全局 JS 对象 使用 THRE      更新时间：2023-09-26

我有一个问题困扰了我一段时间。

我正在使用three.js webgl库来渲染一个具有许多纹理和网格的大型场景。

这个问题不一定与webgl绑定，而是更多的javascript数组和内存管理。

我基本上是这样做的：

var modelArray = [];
var model = function(geometry,db_data){
  var tex   = THREE.ImageUtils.loadTexture('texture.jpg');
  var mat   = new THREE.MeshPhongMaterial({map:tex})
  this.mesh = new THREE.Mesh(geometry,mat);
  this.db   = db_data;
  scene.add(this.mesh);
};
function loadModels(model_array){
  for(i=0;i<geometry.length;i++){
    modelArray.push(new model(model_array[i]['geometry'],model_array[i]['db_info']));
  }
}
loadModels();

我在这里效率低吗？由于我已经将网格加载到场景和数组中，所以我实际上是在将使用的内存量增加一倍吗。或者数组中的模型（特别是model.mesh）对象只是指向一个单一的内存块？

我应该只创建一个网格id数组并引用场景对象，还是可以将网格添加到场景和数组中？

提前谢谢，我希望我已经足够清楚了。

我想到的主要问题是：

var tex   = THREE.ImageUtils.loadTexture('texture.jpg');
var mat   = new THREE.MeshPhongMaterial({map:tex})

如果每次创建新模型时都加载相同的纹理，这可能会产生大量开销（而且速度也可能相当慢）。我会在循环外加载一次你需要的纹理和相应的材料。

modelArray是一个普通model对象的列表，每个对象都有一个指向相应mesh对象（和db对象）的指针。scene有一个指向相同mesh对象的指针，因此不会通过克隆网格来分解内存使用。

您的内存使用可能只是因为网格几何体占用了大量内存。试着一个接一个地加载你的模型，同时观察内存使用情况；也许你有一个出乎意料的详细。

相关文章：