在运行时从本地文件导入 three.js 中的 3d 模型

Question

我试图在运行时从本地文件上传 3d 模型，但遇到 CORS 错误消息。 我一开始使用 http-server 上传固定模型，但是如果我想从我的本地文件上传随机对象到场景，避免 CORS 错误的最佳方法是什么？

对于加载，我使用了https://threejs.org/docs/#examples/loaders/OBJLoader中的“OBJLoader”。

Answer 1

您可以使用类似于three.js 编辑器的拖放方法将文件从您的计算机加载到应用程序中。 这个想法是向drop事件添加一个事件侦听器，从相应的事件对象中提取文件，然后使用FileReader读取实际内容。 加载过程完成后，您可以直接使用OBJLoader.parse()来创建实际的 3D 对象。

查看编辑器的以下代码部分，以更好地理解此工作流程。

• 处理drop事件。

https://github.com/mrdoob/three.js/blob/b524f4bca95169a2b197f8a68058e6c28abf416d/editor/index.html#L284-L290

• 处理文件列表，因为可以一次拖放多个对象。

https://github.com/mrdoob/three.js/blob/b524f4bca95169a2b197f8a68058e6c28abf416d/editor/js/Loader.js#L12-L43

• 使用FileReader和相应的加载器（在您的情况下OBJLoader ）加载和解析实际文件。 链接方法处理许多不同的 3D 格式。 只需搜索OBJ部分。

https://github.com/mrdoob/three.js/blob/b524f4bca95169a2b197f8a68058e6c28abf416d/editor/js/Loader.js#L45

three.js R104

Answer 2

我遵循建议的解决方案，为了让系统正常工作，我添加了以下部分：

document.addEventListener("dragover", function (event) {
   event.preventDefault();
   event.dataTransfer.dropEffect = "copy";
});