Three.js之繪製中文文字並跟隨物體
阿新 • • 發佈:2022-03-03
本週更新的需求是物體上顯示文字資訊,效果圖如下:
載入字型
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資料夾中
更改字型網站: -
坑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);