ThreeJS实现3D文字----(15)

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情 >

可以通过gero3.github.io/facetype.js… 这个网址将自己的ttf的文字文件转换为json文件，在threejs中使用

FontLoader & TextGeometry

 // 引入字体实例
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js'
// 引入 TextGeometry
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js'
// 初始化
const fontLoader = new FontLoader()
// 加载文字文件
fontLoader.load('/fonts/自定义转换的字体文件.json',()=>{
    // 加载完成的回调  可以测试自己的文件及路径是否成功加载
    console.error('fonts load')
    // 创建 TextGeometry
    const textGeometry = new TextGeometry('ZJJ', {
        font,
        size: 0.5,
        //值为'normal'或'bold'，表示是否加粗
        weight: 'normal',
        // 字体深度
        height: 0.2,
        // 文本曲线上点的数量
        curveSegments: 6,
        // 是否打开斜面 意为在边缘处斜切
        bevelEnabled: true,
        // 文本斜面的深度
        bevelThickness: 0.03,
        // 斜面离轮廓的距离
        bevelSize: 0.02,
        // 表示斜角与原始形状轮廓之间的延伸距离,默认值为0
        bevelOffset: 0,
        // 表示斜角的分段层数,默认值为3
        bevelSegments: 4
    })
    textGeometry.computeBoundingBox()
    // 打印结果如图一
    console.error(textGeometry.boundingBox)
    // 实现文本居中 方法一
    textGeometry.translate(
      -(textGeometry.boundingBox.max.x +0.01) * 0.5,
      -(textGeometry.boundingBox.max.y + 0.02) * 0.5,
      -(textGeometry.boundingBox.max.z -0.03) * 0.5,
    )
    // 方法二 
    // textGeometry内置方法center 根据边界矩形将几何体居中。
    textGeometry.center()

    const textMaterial = new THREE.MeshBasicMaterial({
        // 打开线框
        wireframe: true
    });
    const text = new THREE.Mesh(textGeometry, textMaterial)
    // 将文本添加至场景
    scene.add(text)

})

boundingBox

模型的边界框，默认为null,但当调用computeBoundingBox() 方法后,该值为图一效果,其中min表示盒子的下(x,y,z)的边界值,max表示盒子的上(x,y,z)值
方法一: 我们计算出其中间值设置给textGeometry就可以实现text居中;完全居中后我们的boundingBox值应该如图二,但未达到此效果是由于我们忽略了bevelSize与bevelThickness,将这两个值所占用的数量在在xyz轴上面进行调整就可以; 方法二: 使用center方法,是Geometry居中,该方法继承于# BufferGeometry,所以也可以在其他geometry上使用;

图一

图二

为文本设置适合的贴图，最终效果

如果有哪里描述不准确或者有问题,欢迎大佬指正!
(≖ᴗ≖)✧