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);
});
输出
![](https://www.codeprj.com/image/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2ktYmV0YS83OTgyMTQvMjAyMDAxLzc5ODIxNC0yMDIwMDExNDA5MTE0ODA0NS0xNzYxMjU4NjAxLnBuZw==.png)
原因:
在官方提供的字库里没有中文的
解决方法:
在 C:\Windows\Fonts 下找打一个有中文字符的字库,文件格式为TTF
去 facetype.js 转换成json
加载文件换成刚转换的
我选择的
![](https://www.codeprj.com/image/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2ktYmV0YS83OTgyMTQvMjAyMDAxLzc5ODIxNC0yMDIwMDExNDA5MTYyNzI1NC0xOTc4MTIyODE0LnBuZw==.png)
![](https://www.codeprj.com/image/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2ktYmV0YS83OTgyMTQvMjAyMDAxLzc5ODIxNC0yMDIwMDExNDA5MjAyNDg1Mi0xMzM0NzY0MTg1LnBuZw==.png)
修改加载的字体
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);
});
结果
![](https://www.codeprj.com/image/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2ktYmV0YS83OTgyMTQvMjAyMDAxLzc5ODIxNC0yMDIwMDExNDA5MjAxMDI5Mi0xOTAxNDY4NTI4LnBuZw==.png)
|