three.js使用中文汉字展示方法_threejs显示中文的json

一开始使用的就是自己在电脑C盘fonts 文件夹找的字体包在线转换为json引入的。本地没有发现问题。部署上线后发现模型加载出来了文字出不来，过一会刷新才正常展示，打开请求发现文字库几十M，加载太慢了。后来有使用canvas把文字当做纹理贴图到材质，可是纹理会跟着材质的透明度变薄或者消失不能单独显示文字。ThreeJS-四步绘制中文 - 简书 (jianshu.com) 这篇文章中提取了作者已经在线转好的一份json文件，通过只能AI询问如何挑取自己需要的文字并保存为需要的JSON文件，得到下面一份转换的JS脚本。

import {
  readFile,
  writeFile
} from 'fs/promises';
import {
  dirname,
  join
} from 'path';
import {
  fileURLToPath
} from 'url';
 
// 获取当前文件的目录
const __dirname = dirname(fileURLToPath(
  import.meta.url));
 
// JSON文件的路径
const inputFile = join(__dirname, 'AlibabaPuHuiTiRegular.json');
// 输出文件的路径
const outputFile = join(__dirname, 'filtered_text_library.json');
 
// 设置想要保留的汉字
const keywords = ['正', '主', '后', '左', '右', '俯', '仰', '视', '图','a','b', 'c', 'd', 'e','f', 'g', 'h', 'i','j','k','l','m','n','o','p','q','r','s','t','u', 'v', 'w', 'x', 'y', 'z',
,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','1','2','3','4','5','6','7','8','9','0',':','.'];
 
// 读取JSON文件
readFile(inputFile, 'utf8').then(data => {
  // 解析JSON数据为数组或对象
  const textLibrary = JSON.parse(data);
 
  // 筛选包含关键词的文字
  const selectedTexts = { glyphs: {} };
  if (typeof textLibrary === 'object' && textLibrary !== null) {
    // 如果textLibrary是一个对象
    for (const key in textLibrary) {
      if (key === 'glyphs') {
        for (const keyw in textLibrary[key]) {
          if (keywords.includes(keyw)) {
            selectedTexts.glyphs[keyw] = textLibrary[key][keyw];
          }
        }
      } else {
        selectedTexts[key] = textLibrary[key];
      }
    }
  } else {
    throw new Error('Invalid JSON structure');
  }
 
  // 将筛选后的结果转换为JSON字符串
  const selectedTextsJSON = JSON.stringify(selectedTexts, null, 4);
 
  // 将JSON字符串保存回文件
  return writeFile(outputFile, selectedTextsJSON, 'utf8');
}).then(() => {
  console.log('文件已保存');
}).catch(err => {
  console.error('处理文件时出错:', err);
});

只要你拥有一份汉字json，挑取自己需要的就能转换得到一份简化后的JSON，大大缩小了文件大小，由原来的30M直接变30K。真的很有成就感。