three.js 加载中文字体 typeface.json

最新推荐文章于 2025-09-23 11:15:11 发布

转载最新推荐文章于 2025-09-23 11:15:11 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/uvvv/blog/859904

文章标签：

#json #移动开发

本文探讨了使用facetype.js将字体转换为JSON格式，并在不同设备上加载的问题。作者分享了在桌面和Android设备上成功加载字体的方法，但在iPhone上遇到了问题。代码示例展示了如何使用THREE.FontLoader加载特定字体并应用于3D几何体。

部署运行你感兴趣的模型镜像

下面网址把字体转成成json
http://gero3.github.io/facetype.js/

加入
<script src="js/utils/GeometryUtils.js"></script>

代码
       new THREE.FontLoader().load('fonts/Microsoft_YaHei_Regular.json', function (response) {
           var hello = new THREE.TextGeometry("紫外线博客好", {
               font : response,
               fontName : "optimer",
               size: 10,
               height : 1,
               hover : 10,
               curveSegments : 10,//弧线分段数，使得文字的曲线更加光滑
               bevelThickness : 2,
               bevelSize : 1,
               bevelSegments : 3,
               bevelEnabled : false//是否使用倒角，意为在边缘处斜切
           })
           var tobj = new THREE.Mesh(hello, mesh);
           tobj.position.set(-10, -10, 0);
           scene.add(tobj);
       });