Threejs使用TextGeometry中文出現亂碼問題解決

THREE.js 使用 TextGeometry 類可以很容易地生成三維文字

但是換成中文后

var textLoad = new THREE.FontLoader().load('fonts/helvetiker_regular.typeface.json',function(font){
     var txtGeo = new THREE.TextGeometry('你好',{
         font: font,
         size: 0.8,
         height: 0.1,
         curveSegments: 12,
         bevelEnabled: true,
         bevelThickness: 0.1,
         bevelSize: 0.05,
         bevelSegments: 3
     });
     var txtMater = new THREE.MeshNormalMaterial({
         flatShading: THREE.FlatShading,
         transparent: true,
         opacity: 0.9
     });
     var txtMesh = new THREE.Mesh(txtGeo,txtMater);
          txtMesh.position.set(-2,2.3,-0.4);
          scene.add(txtMesh);
     });

輸出

原因：

　　在官方提供的字庫里沒有中文的

解決方法：

　　在 C:\Windows\Fonts 下找打一個有中文字符的字庫，文件格式為TTF

　　去 facetype.js 轉換成json

　　加載文件換成剛轉換的

　　我選擇的

      

　　

 修改加載的字體

var textLoad = new THREE.FontLoader().load('fonts/FZYaoTi_Regular.json',function(font){
     var txtGeo = new THREE.TextGeometry('你好',{
         font: font,
         size: 0.8,
         height: 0.1,
         curveSegments: 12,
         bevelEnabled: true,
         bevelThickness: 0.1,
         bevelSize: 0.05,
         bevelSegments: 3
     });
     var txtMater = new THREE.MeshNormalMaterial({
         flatShading: THREE.FlatShading,
         transparent: true,
         opacity: 0.9
     });
     var txtMesh = new THREE.Mesh(txtGeo,txtMater);
          txtMesh.position.set(-2,2.3,-0.4);
          scene.add(txtMesh);
     });

結果