threejs加載圖片需創站與 如何寫出字體

前一陣在做ThreeJs的圖表，現在整理一下當時的筆記。

今天準備解決的有threejs中貼圖跨域問題   如何添加文字

首先是threejs加圖片時的跨域錯誤

原因是    沒有放到網站，本地測試需要加上 跨域 解除

解決辦法有兩個 一個是臨時解決，一個是長期解決

臨時解決辦法是把瀏覽器設置一下：

在chrome快捷方式，目標裏如下設置
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" 後面加           

        --disable-web-security   或者加

        --allow-file-access-from-files 

長久的解決辦法是開一個服務器 

需要部署在一個http sever上 錯誤是不允許讀file 路徑 因爲相當於客戶機本機

步驟在threejs-master/utils/servers的readme裏面有寫哦

而我採取的方法是，裝了一個Python

下載Python，然後更改path路徑

裝了python需要服務器的話直接在命令提示行進入當前目錄然後輸入python -m SimpleHTTPServer就是一個新的服務器了

要運行localhost：8080

---

下面是怎麼顯示文字的方法：

總體思想是，將ttf（字體的格式）變成js格式

注意的內容有：記得字體名字一定是英文全小寫 而且 默認字體只有英文，如果生成的字體js的文字名字裏有中文需要改成英文   怎麼可以轉換字體爲中文呢？

1、首先網上去下一個體積小一點的ttf（字體格式）然後丟進“facetype.js-gh-pages”（這是一個zip，長相如下圖）就會給你轉換好

 http://pan.baidu.com/s/1kTCMTUn （facetype.js-gh-pages下載的百度雲鏈接）

然後選擇下載的ttf文件，之後你的瀏覽器就會自動下載出來一個js字體文件

2、下面就是如何使用“facetype.js-gh-pages生成字體的js:

首先將生成的文字的JavaScript打開，將他的name改爲英文的。

然後將js引用在HTML裏面

<script type="text/javascript" src="js/helvetiker_regular.typeface.js"></script>

再在script裏寫入字體的屬性：

var options = {
                    size: 10,
                    height: 0,
                    weight: 'normal',
                    font: 'helvetiker',這個字體要用英文名字哦，是中文字體也要用英文名字
                    style: 'normal',
                    bevelThickness: 1,
                    bevelSize: 1,
                    bevelSegments: 1,
                    curveSegments: 50,
                    steps: 1
               };
               scene.add(new THREE.Mesh(
                    new THREE.TextGeometry("hello",options),
                    new THREE.MeshBasicMaterial({color:0xcccccc})
               ))