欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

threejs加载三维字体

程序员文章站 2022-05-26 19:09:50
...

1.效果

threejs加载三维字体

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参数设定
threejs加载三维字体

3.问题说明

(一)字体引入

通过http://gero3.github.io/facetype.js,这个网址可以把字体文件ttf格式转化成json文件就是我们需要引入的。中文字体的引入就是需要将中文的ttf字体先转化成json格式再引用就可以显示中文啦。

(二)文件路径

threejs加载三维字体
出现如上的错误就是json文件的路径不对,记住所有threejs加载的问价都需要放在静态文件夹下,这里用的Vue3+,所以就是Public文件夹下,在引用的时候一定要用绝对路径,不要用相对路径。

相关标签: threejs