Three.js之繪製中文文字並跟隨物體

webhmy發表於2022-03-03
JS

本週更新的需求是物體上顯示文字資訊，效果圖如下：

載入字型

import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';

    const loader = new FontLoader();
    loader.load('/engine-static/fonts/FZCuHeiSongS-B-GB_Regular.json', (response) => {
      this.threeFont = response;
    });

  • 坑1：中文的字型，three.js的案例中都是英文的，使用英文字型，中文顯示就是？？？所以需要更換字型，開啟電腦的字型庫 找個最小的ttf字型，然後去這個網站進行轉換成json格式，不可以本地引入，需要通過url可訪問的引入，所以放到專案的static資料夾中
    更改字型網站：http://gero3.github.io/facetype.js/

  • 坑2：字型比較大，載入需要時間，如果在字型載入前去建立文字會報錯，需要等字型載入成功後再繪製文字

建立字型

 let textGeo = new TextGeometry(text, {
          font: self.threeFont, // 字型
          size: 0.5, // 大小
          height: 0 // 是否是立體的文字，如果是2d的顯示就設定0
        });

        let textMaterials = new THREE.MeshBasicMaterial({ 
          color: 'red',  
          wireframe: false,
          transparent: true,
          opacity: 1, 
          side: THREE.DoubleSide
        })
        let textMesh = new THREE.Mesh(textGeo, textMaterials);
        textMesh.name = 'labelText';
           
        textMesh.position.set(0, (item.height / 1.95), 0); // 保持一點點的距離

        // 跟隨物體旋轉
        textMesh.rotation.z = -item.rotateZ;
        // 不跟隨物體擴大或者縮小 
        textMesh.scale.x = item.originWidth / item.width;    
        textMesh.scale.y = item.originHeight / item.height; 
        textMesh.scale.z = item.originDepth / item.depth;

        // 新增至於物體中
        wrapper.add(textMesh);

相關文章