在运行时从 localfile 在three.js 中导入3d 模型答案

【问题标题】：Importing 3d model in three.js at runtime from localfile在运行时从 localfile 在three.js 中导入3d 模型
【发布时间】：2019-09-20 06:17:44
【问题描述】：

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

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

【问题讨论】：

标签： javascript three.js localhost same-origin-policy

【解决方案1】：

您可以使用类似于three.js editor 的拖放方法将文件从您的计算机加载到应用程序中。想法是为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

【讨论】：