Three.js 跨域 Cross origin

发布于 2021-12-10 13:05:23 字数 1545 浏览 1383 评论 0

通过 Three.js 加载 obj、FBX 等格式外部模型文件的时候是 Ajax 异步加载数据的过程,需要建立本地服务器来解决,如果不这样直接使用浏览器打开加载三维模型的 .html 文件,会出现报错无法模型文件无法加载,浏览器控制报错跨域问题的情况。

浏览器控制台报错:

three.js:30833 Access to XMLHttpRequest at 'file://....' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

如果你有很好的前后端基础,肯定对跨域问题很了解,如果不了解也没关系,下面会详细说明如何解决。

解决方案

解决方案就是在本地自定义服务器,可以通过 nodejs、python 等任何一个你熟悉的语言来实现。

编辑器

如果不想麻烦在本地自定义服务器,也可以使用会自动帮助你建立本地服务器的一些代码编辑器,比如常见的的 atom、WebStorm 等编辑器,当然有些编辑器不会自动建立本地服务器,如果你不想更换不熟悉的代码编辑器,那就需要后端语言自定义本地服务器。

Nodejs 自定义服务器

如果你熟悉其它的后端语言直接使用你熟悉的后端语言自定义服务器就可以,如果不熟悉,可以选择 Nodejs。

如果你没有前后端基础,刚开始学习 Threejs 可以不展开学习前端、后端知识,能够调试 three.js 代码就行。如果你想开发项目,前后端的知识还是要补充一些,如果不是专门的后端工程师也没必要重新学习一门后端语言,直接使用 Nodejs 就行,Nodejs 和前端一样使用的是 JavaScript 语言。

使用Nodejs自定义服务器很简单,首先是你要先百度Nodejs安装的相关文章,先在你的电脑上安装配置好Nodejs,熟悉下NPM的使用,然后使用 npm 执行 npm install http-server 安装 http-server 模块,如果想创建创建一个自定义的服务器,打开命令行,在你要打开的html文件所在的目录下,执行 http-server 就可以完成服务器创建,具体不了解的可以百度相关内容。

浏览器访问 http://localhost:8080 或 http://127.0.0.1:8080 地址打开相应的.html文件就可以显示三维模型效果。

前端脚手架

刚开始学习 three.js 的时候,为了方便,可能不会使用一些前端框架,如果你实际开发项目的时候,可能会会把 Three.js 和 Vue.js、React 或 AngularJs 任何一种前端框架结合使用,这时候如果你使用这些前端框架的脚手架,比如 VueJs 的 vue-cli 脚手架,为了调试它本身就会创建本地服务器,这时候可以直接加载三维模型文件,不过注意不要把模型文件和 html 文件放在两个不同的服务器地址下面。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

虐人心

有一天你能到我的心里去,你会看到那里全是你给的伤悲。

0 文章
0 评论
24515 人气
更多

推荐作者

醉城メ夜风

文章 0 评论 0

远昼

文章 0 评论 0

平生欢

文章 0 评论 0

微凉

文章 0 评论 0

Honwey

文章 0 评论 0

qq_ikhFfg

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文