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:8080或http://127.0.0.1:8080 地址打開相應的.html文件就能夠顯示三維模型效果。

前端腳手架

剛開始學習three.js的時候，爲了方便，可能不會使用一些前端框架，若是你實際開發項目的時候，可能會會把Three.js和Vue.js、React或AngularJs任何一種前端框架結合使用，這時候若是你使用這些前端框架的腳手架，好比VueJs的vue-cli腳手架，爲了調試它自己就會建立本地服務器，這時候能夠直接加載三維模型文件，不過注意不要把模型文件和html文件放在兩個不一樣的服務器地址下面。

相關文章

所謂的跨域（Cross-Origin）：https://blog.csdn.net/u011037...