提取中文字体并在Threejs中应用

3D场景中的中文字体大小较大，若涉及性能优化，提取中文字体是必备技能。今天介绍项目中提炼出来的一种在Threejs项目中，提取中文字体并用FontLoader加载的方法。

下载FontSmaller

链接

iesqppc4f4.feishu.cn/file/boxcn1…

打开FontSmaller并选择字体

输入预备好的文字

导出后得到预期字体

使用facetype转化

链接

gero3.github.io/facetype.js…

步骤

1. 选择文件
2. 得到预期.json格式字体

Threejs中应用字体

 const loader = new THREE.FontLoader();
 loader.load('./assets/fonts/FZCuHeiSongS-B-GB_Regular.json', function (font) {
                            const textParams = {
                                font: font,
                                size: 0.5,
                                height: 0.2,
                                curveSegments: 12,
                                bevelEnabled: true,
                                bevelThickness: 0.03,
                                bevelSize: 0.02,
                                bevelOffset: 0,
                                bevelSegments: 5
                            };
                            const textGeometry = new THREE.TextBufferGeometry(sloganName, textParams);
                            const textMaterial = new THREE.MeshStandardMaterial({
                                flatShading: true
                            });
                            const text = new THREE.Mesh(textGeometry, textMaterial);
                           
                        });

                    });

查看结果