三.js加载大型模型

Three.js loading large models

本文关键字：模型 大型 加载 js      更新时间：2023-09-26

当我尝试使用库提供的适当加载器加载非常大的文件时，我的网站运行的选项卡崩溃了。我尝试过实现 Worker 类，但它似乎不起作用。以下是发生的情况：

在主javascript文件中，我有：

var worker = new Worker('loader.js');

当用户选择可用模型之一时，我检查扩展名并将文件 URL/路径传递给工作线程：（在本例中为 pcd 文件）

worker.postMessage({fileType: "pcd", file: file});

现在，加载器.js具有使其工作所需的适当包含：

importScripts('js/libs/three.js/three.js');
importScripts('js/libs/three.js/PCDLoader.js');

在其 onMessage 方法中，它根据文件扩展名使用专有加载器。

var loader = new THREE.PCDLoader();
loader.load(file, function (mesh) {
    postMessage({points: mesh.geometry.attributes.position.array, colors: mesh.geometry.attributes.color.array});
});

数据被成功传递回主javascript，后者将其添加到场景中。至少对于小文件 - 大文件，就像我说的，需要太长时间，浏览器决定有错误。现在我认为工人阶级应该异步工作，那么这里有什么交易？

目前Three.js的加载器依赖于字符串和字符串数组来解析文件中的数据。它们不会将文件拆分为多个部分，这会导致内存使用过多，浏览器会立即中断。加载 64 MB 文件会激增到加载期间使用的 1 GB 内存以上（然后导致错误）。

相关文章：