乐趣区

关于前端:ThreeJS学习记录二中文文字

我在 Vue 我的项目中引入了 threeJS,须要在视图中展现文字,一开始没在意,间接依照例子来写:

import * as THREE from 'three'
import {FontLoader} from 'three/examples/jsm/loaders/FontLoader.js'
import {TextGeometry} from 'three/examples/jsm/geometries/TextGeometry.js'
const loader = new FontLoader()

      loader.load('./static/helvetiker_regular.typeface.json', function(font) {

          const textGeo = new TextGeometry("xxx", {
            font: font,
            size: 0.8,
            height: 0
          })
          const mesh = new THREE.Mesh(textGeo, new THREE.MeshBasicMaterial({ color: 0x333333}))
          mesh.position.set(1,1,1)

          // 网格模型增加到场景中
          t.scene.add(mesh)
      })

这个字体 json 是从 node_modules/three/examples/fonts/helvetiker_regular.typeface.json 复制到 static 文件夹中,作为动态文件。

然而一渲染发现,全是 问号,才发现这个字体包是不满足中文的。

解决方案

在本电脑中(C:\Windows\Fonts)找到 ttf 字体包,进入网址 http://gero3.github.io/facety…,将 ttf 转为 json 后应用。

优化

我应用了电脑里的黑体,一共 36955KB,很大。能够看下外面的构造,”glyphs”:{},能够写一个申请,把所有展现的字申请接口后返回这个对象里。这样就防止了不必要的字的加载啦!

退出移动版