在运行时从本地文件在Three.js中导入3D模型

Question

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

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

Answer 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