Three.js跨域问题(无法预览)

Three.js跨域问题

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

个人WebGL/Three.js技术博客

浏览器控制台报错:

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:8080http://127.0.0.1:8080地址打开相应的.html文件就可以显示三维模型效果。

前端脚手架

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

相关文章

所谓的跨域(Cross-Origin):https://blog.csdn.net/u011037503/article/details/78025072

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,323评论 1 45
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,157评论 0 3
  • 以下文章转载自知乎,暗灭-京华九月秋近寒,浮沉半生影长单. 暗灭 京华九月秋近寒,浮沉半生影长单 10,850 人...
    ve追风_685b阅读 9,548评论 1 15
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 7,495评论 0 25
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 10,862评论 1 32

友情链接更多精彩内容