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);
     });

输出

Threejs使用TextGeometry中文出现乱码问题解决

原因：

　　在官方提供的字库里没有中文的

解决方法：

　　在 C:\Windows\Fonts 下找打一个有中文字符的字库，文件格式为TTF

　　去 facetype.js 转换成json

　　加载文件换成刚转换的

　　我选择的

Threejs使用TextGeometry中文出现乱码问题解决

修改加载的字体

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);
     });

结果

Threejs使用TextGeometry中文出现乱码问题解决