今天郭先生說一下如何在three中顯示中文字型，然後結合tween實現文字位置的動畫。線案例請點選chinese-font,

1. 生成中文字型

我們都使用過three.js的FontLoader載入typeface.json實現font的使用，但是很多案例都是英文字型，那麼如何來生成中文字型呢？現在我們可以通過Facetype.js實現ttf向typeface.json的轉換。 首先我們在網上下載ttf中文字型（或者在電腦的C:\Windows\Fonts直接複製一份中文的ttf字型），然後我們登陸Facetype.js網站，選中準備好的ttf檔案，點選convert即可。得到的json檔案就可以使用FontLoader載入了，其實還是挺簡單的，中文ttf一般都比較大，所以在選擇喜歡字型的同時，也要考慮好檔案的大小。

2. tween操作文字動畫

之前也說過tween動畫，不過我覺得挺有意思的，我們就拿百家姓來作文字素材。

效果就是這樣的，我們讓tween實現從圖一到圖二到圖三再到圖一的動畫，每個漢字除了位置的變化還有朝向（lookAt）的變化。這裡的lookAt方法就是設定物體的朝向。好了開始上程式碼。

1.設定點的位置和朝向

圖一中點的位置可以在平面幾何體中取點

let vertices1 = new THREE.PlaneGeometry(1400,900,13,6).vertices;

他們的朝向相對於每個字來說都是Vector3(0,1)，所以可以設定為

d.position.clone().add(Vector3(0,1)) //這裡的d.position就是每個點的位置

圖二中點的位置可以在球體中獲取

let vertices2 = new THREE.SphereGeometry(500,12,9).vertices;

他們的朝向很容易找，就是朝向中心點就可以Vector3(0,0) 圖三中的點可以通過計算得到，就是一組旋轉上升的點

for(let i=0; i<98; i++) {
 let x = Math.sin(Math.PI / 12 * i) * 400;
 let y = (49 - i) * 8;
 let z = Math.cos(Math.PI / 12 * i) * 400;
 positions3.push(new THREE.Vector3(x,y,z));
}

他們的朝向可以設定為

new THREE.Vector3(0,d.position.y,0) //d.position.y就是點的y座標

這樣就設定好了點，接下來就製作動畫

2.tween動畫

首先初始化三個動畫

initTween() {
 var pos = { time: 0 };
 tween1 = new TWEEN.Tween(pos).to({ time: 1 },1000);
 tween2 = new TWEEN.Tween(pos).to({ time: 2 },1000);
 tween3 = new TWEEN.Tween(pos).to({ time: 0 },1000);
 tween1.easing(TWEEN.Easing.Linear.None);
 tween2.easing(TWEEN.Easing.Linear.None);
 tween3.easing(TWEEN.Easing.Linear.None);
 tween1.onUpdate(onUpdate);
 tween2.onUpdate(onUpdate);
 tween3.onUpdate(onUpdate);
}

這裡的easing是動畫的緩動效果裡面有很多種，不妨打印出來看一下

然後就是onUpdate方法

function onUpdate() {
 let time = this._object.time; //動畫時刻值
 if(flag == 0) {//這裡有三段動畫flag判斷是那一段動畫
 group.children.forEach((d,i) => {//group裡面包含著所有文字網格
  d.position.copy(positions3[i].clone().multiplyScalar(time / 2).add(positions1[i].clone().multiplyScalar(1 - time / 2)));
  d.lookAt((new THREE.Vector3(0,0).multiplyScalar(time / 2)).add(d.position.clone().add(lookAt1).multiplyScalar(1 - time / 2)));
 })
 } else if(flag == 1) {
 group.children.forEach((d,i) => {
  d.position.copy(positions1[i].clone().multiplyScalar(1 - time).add(positions2[i].clone().multiplyScalar(time)));
  d.lookAt((d.position.clone().add(lookAt1).multiplyScalar(1 - time)).add(lookAt2.multiplyScalar(time)));
 })
 } else if(flag == 2) {
 group.children.forEach((d,i) => {
  d.position.copy(positions2[i].clone().multiplyScalar(2 - time).add(positions3[i].clone().multiplyScalar(time - 1)));
  d.lookAt((lookAt2.multiplyScalar(2 - time)).add(new THREE.Vector3(0,0).multiplyScalar(time - 1)));
 })
 }
}

最後通過點選觸發

click() {
 tween1.stop();
 tween2.stop();
 tween3.stop();
 if(flag == 0) {
 tween1.start();
 } else if(flag == 1) {
 tween2.start();
 } else if(flag == 2) {
 tween3.start();
 }
 flag = (flag + 1) % 3;
},

這裡注意，由於點選切換的時候動畫上一個動畫可能沒有完成，所以先呼叫stop方法，讓動畫先停下來。別忘了在render函式中呼叫TWEEN.update()，不然動畫是不會執行的。

總結

到此這篇關於three.js顯示中文字型與tween應用的文章就介紹到這了,更多相關three.js顯示中文字型與tween應用內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

版權宣告：本文為郭志強的原創文章，原文連結：https://www.mrguo.link