1.效果
2.threejs代码
addFont:function(){
console.log('aaa')
let text = new this.THREE.FontLoader().load('/data/font/helvetiker_regular.typeface.json',(font)=>{
let fontGeo = new this.THREE.TextGeometry( "iCrazy", {
size: 20, //字号大小,一般为大写字母的高度
height: 10, //文字的厚度
weight: 'normal', //值为'normal'或'bold',表示是否加粗
font: font, //字体,默认是'helvetiker',需对应引用的字体文件
style: 'normal', //值为'normal'或'italics',表示是否斜体
bevelThickness: 1, //倒角厚度
bevelSize: 1, //倒角宽度
curveSegments: 30,//弧线分段数,使得文字的曲线更加光滑
bevelEnabled: true, //布尔值,是否使用倒角,意为在边缘处斜切
} );
let fontMat = new this.THREE.MeshPhongMaterial({
color: 0xcccccc,
shininess: 60,
specular: 0xcccccc
})
let fontMesh = new this.THREE.Mesh(fontGeo,fontMat)
fontMesh.rotation.x = -Math.PI/2
this.scene.add(fontMesh)
},undefined,(e)=>{console.log(e)})
说明:MeshPhongMaterial
参数设定
3.问题说明
(一)字体引入
通过http://gero3.github.io/facetype.js,这个网址可以把字体文件ttf格式转化成json文件就是我们需要引入的。中文字体的引入就是需要将中文的ttf字体先转化成json格式再引用就可以显示中文啦。
(二)文件路径
出现如上的错误就是json文件的路径不对,记住所有threejs加载的问价都需要放在静态文件夹下,这里用的Vue3+,所以就是Public文件夹下,在引用的时候一定要用绝对路径,不要用相对路径。