three-mesh-ui 生成中文字体

K歌、之王

已于 2023-02-21 11:03:08 修改

阅读量407

点赞数

分类专栏： threejs 文章标签：前端

于 2023-02-21 10:55:22 首次发布

本文链接：https://blog.csdn.net/u010568976/article/details/129138578

版权

threejs 专栏收录该内容

29 篇文章 11 订阅

订阅专栏

如题：
three-mesh-ui 如何生成中文字体？

去网站
https://msdf-bmfont.donmccurdy.com/

在这里插入图片描述

vue3集成
1、 html

<script src="https://unpkg.com/three@0.149.0/build/three.js"></script>
 <script src="https://unpkg.com/three-mesh-ui@6.4.1/build/three-mesh-ui.min.js"></script>

2、vue
import FontJSON from “…/assets/custom-msdf.json”;
import FontImage from “…/assets/custom.png”;

function addTextTag2() {
  const container = new ThreeMeshUI.Block({
    width: 3,
    height: 3,
    padding: 0.1,
    justifyContent: "center",
    textAlign: "center",
    fontFamily: FontJSON,
    fontTexture: FontImage,
    borderColor: new THREE.Color( 'orange' ),
    fontColor: new THREE.Color( 0x333333 ),
    backgroundOpacity: 1,
    borderRadius: 0.1,
    borderWidth: 0.1,
    borderOpacity: 1,
    backgroundColor: new THREE.Color( 0xf1c232 ),
  });

  container.position.set( -140.887,  2.423,  -76.754);
  container.rotation.x = Math.PI/180 * -93.5 ;
  container.rotation.y = Math.PI/180 * 71.8;
  container.rotation.z =  Math.PI/180 * 93.7 ;
  scene.add(container);

  //

  container.add(
      new ThreeMeshUI.Text({
        content: "你好世界",
        fontSize:0.2
      })
  );
}
  ThreeMeshUI.update();