在THREE.js中多次加载对象后，页面崩溃

Question

我的应用程序中有几个按钮，用于在单击时将新对象加载到场景中。下面是用于加载新对象的代码：

character = new THREE.UCSCharacter();

var ucspath = "skinnedModel.json";

manager = new THREE.LoadingManager();
manager.onProgress = function(url, itemsLoaded, itemsTotal) {
   console.log(url, itemsLoaded, itemsTotal);
};

var onProgress = function (xhr){
   if(xhr.lengthComputable){
      var bar = 150;

      percentComplete = xhr.loaded / xhr.total * 100;
      bar = Math.floor( xhr.loaded / xhr.total * bar );

      document.getElementById("bar").style.width = bar + "px";
   }
};

var loader = new THREE.XHRLoader(manager);
loader.crossOrigin = true;

loader.load(ucspath, function (text) {
   var config = JSON.parse(text);
   character.loadParts(config);
   avatar = character.root;
   avatar.name = "female"; 
   scene.add(avatar);
}, onProgress);

单击按钮10~12次后，加载速度变慢，最终页面崩溃。我无法使用Chrome DevTools检测到任何不正常的行为。

是否需要执行某些操作才能在不重载浏览器的情况下加载所需数量的对象？

[更新]堆快照

提前致谢。

Answer 1

您的模型文件似乎面临性能问题。

幸运的是，拥有一个具有不同特征的大型模型的问题在游戏行业非常普遍，所以我可以给你一个提示，虽然它并不那么简单：

在3D编辑器中，将所有不同的几何图形合并为单个模型，并为每个模型部件添加一个简单的名称，例如hair_01，head_02，{ {1}}，...

只需将此模型加载到 Three.js 应用中一次。这是模板模型。

现在，当您想要创建具有不同外观的新模型时：

• 克隆模板模型;
• 隐藏您不想要的部分;
• 显示您想要的部件。

以下是这个想法的一个例子：

beard_03

克隆模型可防止引擎复制所有几何数据（*）。

这是来自现有游戏的单个3D模型文件的图片，其中包含每个角色几何图形并在运行时切换它们以给出人形的各种外观。

*请参阅THREE.Mesh.clone()