three.js 文字顯示不出來

試了下使用three.js加載文字，首先是報了一個這樣的錯誤：

Cross origin requests are only supported for HTTP.」 

當時很懵逼，去網上查了查，發現是由於我直接用瀏覽器打開了這個html文件，url的協議是file協議，沒法使用loader.load的方式加載出字體文件，只能使用http，https等等協議，因此不能直接用瀏覽器打開這個文件，這裏就要使用http-server了。

使用npm install -g http-server下載http-server，

而後再在項目目錄下輸入http-server，就能夠在本地的端口下運行了，eg：localhost:8080/helloworld.html

（原回答地址：https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local）

 

打開這個地址後，成功的進入到了這個頁面，雖然再也不報錯了，可是仍然沒有顯示文字。。。這是爲何呢，仔細看了一下代碼，發現我把

renderer.render(scene, camera);

這行代碼寫在了loader.load的外面，loader.load是異步函數，渲染寫在loader.load的外面的話，就會變成在字體成功加載出來以前，就進行了渲染，因此固然是渲染不出來的，把渲染寫在loader.load裏面或者把loader.load用async/await寫成同步函數就能夠了。