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

我的应用程序中有几个按钮，点击时会将新对象加载到场景中。下面是被用于装载新对象的代码：在THREE.js中加载对象多次后，页面崩溃

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开发工具检测到任何不真实的行为。

是否有需要完成的任务，以便根据需要加载多个对象，而不会重载浏览器？

[更新]堆快照

预先感谢。

来源

2017-03-02 Igor Almeida

你尝试[采取堆快照（https://developer.chrome.com/devtools/docs/heap-profiling#basics_snapshot）后每次点击一个按钮？它是加载相同的模型？ – neeh

感谢您的回复。每按一下按钮，快照的大小就会显着增加。我用照片更新了这篇文章。仍然不知道该怎么做。所有模型都非常相似（人形化身）。 –

看来你的模型非常沉重，如果Chrome因此崩溃，我不会感到惊讶。你可以提供你的模型的平均尺寸/多计数的想法吗？鉴于模型非常相似，是否可以使用'THREE.Mesh.clone（）'为其他模型重复使用相同的基础模型？ – neeh

看起来您正面临由您的模型文件引起的性能问题。

幸运的是，不同性状复制具有巨大的模型的问题是在游戏界很常见，所以我可以给你一个暗示，虽然它不是那么简单：

在您的3D编辑器，合并所有的您的不同几何形状为一个单一的模式，给到每个模型零件一件容易的名称，如hair_01，head_02，beard_03，...

加载该模型在three.js所应用程序只有一次。这是你的模板模型。

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

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

这里的想法的一个例子：克隆模型

var copy = template.clone(); 
copy.getObjectByName('head_01').visible = false; 
copy.getObjectByName('head_02').visible = true; 
scene.add(copy);

防止发动机复制所有几何数据（*）。

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

*请参阅THREE.Mesh.clone()

来源

2017-03-02 03:45:44 neeh

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

回答

相关问题