关于前端: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":{} ，能够写一个申请，把所有展现的字申请接口后返回这个对象里。这样就防止了不必要的字的加载啦!