在运行时从本地文件导入 three.js 中的 3d 模型
Importing 3d model in three.js at runtime from localfile
我正在尝试在运行时从本地文件上传 3d 模型，但遇到 CORS 错误消息。我一开始使用 http-server 上传固定模型，但是如果我想从我的本地文件上传随机对象到场景，避免 CORS 错误的最佳方法是什么？
为了加载，我使用了 https://threejs.org/docs/#examples/loaders/OBJLoader 中的 "OBJLoader"。
您可以使用类似于 three.js editor 的拖放方法将文件从计算机加载到应用程序中。这个想法是向 drop 事件添加一个事件侦听器，从相应的事件对象中提取文件，然后使用 FileReader 读取实际内容。加载过程完成后，您可以直接使用 OBJLoader.parse() 来创建实际的 3D 对象。
查看编辑器的以下代码部分以更好地理解此工作流程。
- 处理
drop 事件。
- 处理文件列表，因为可以一次拖放多个对象。
- 使用
FileReader 和相应的加载程序（在您的情况下为OBJLoader）来加载和解析实际文件。链接方法处理许多不同的 3D 格式。只需搜索 OBJ 部分。
three.js R104
我遵循建议的解决方案，为了让系统正常工作，我添加了以下部分：
document.addEventListener("dragover", function (event) {
event.preventDefault();
event.dataTransfer.dropEffect = "copy";
});
我正在尝试在运行时从本地文件上传 3d 模型，但遇到 CORS 错误消息。我一开始使用 http-server 上传固定模型，但是如果我想从我的本地文件上传随机对象到场景，避免 CORS 错误的最佳方法是什么？
为了加载，我使用了 https://threejs.org/docs/#examples/loaders/OBJLoader 中的 "OBJLoader"。
您可以使用类似于 three.js editor 的拖放方法将文件从计算机加载到应用程序中。这个想法是向 drop 事件添加一个事件侦听器，从相应的事件对象中提取文件，然后使用 FileReader 读取实际内容。加载过程完成后，您可以直接使用 OBJLoader.parse() 来创建实际的 3D 对象。
查看编辑器的以下代码部分以更好地理解此工作流程。
- 处理
drop事件。
- 处理文件列表，因为可以一次拖放多个对象。
- 使用
FileReader和相应的加载程序（在您的情况下为OBJLoader）来加载和解析实际文件。链接方法处理许多不同的 3D 格式。只需搜索OBJ部分。
three.js R104
我遵循建议的解决方案，为了让系统正常工作，我添加了以下部分：
document.addEventListener("dragover", function (event) {
event.preventDefault();
event.dataTransfer.dropEffect = "copy";
});