# ThreeJS

# 3D 文本标注

Mapbox GL 默认文本标注图层不支持高度属性,这里使用 ThreeJS 来实现有高度的文本标注。

该方法需要引入字体文件,ThreeJS 官方案例中提供了几种英文字体的 json 文件,如果想要显示中文,可以下载相关字体的 ttf 格式文件,在 Facetype.js 网站生成 json 文件,即可使用。

但是一个完整的中文字体文件会很大,可通过 Google 开源项目 sfntly 中的 sfnttool 工具提取指定的文字。

# 字体提取步骤

  1. 下载 sfnttool 工具(直接下载 或 从源码 sfntly 编译)
  2. 提取指定文字,输出 ttf 文件(需要 java 环境)
java -jar sfnttool.jar -s '茶牛奶咖啡' 庞门正道标题体2.0增强版.ttf PangMenZhengDao_Regular.ttf
1
  1. Facetype.js 网站生成 json 文件
  2. 使用
const loader = new THREE.FontLoader()
loader.load('PangMenZhengDao_Regular.json', font => {
  const textBufferGeometry = new THREE.TextBufferGeometry('牛奶', {
    font
  })
})
1
2
3
4
5
6