這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)怎么在three.js中顯示中文字體，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)公司是一家專業(yè)提供華亭企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、html5、小程序制作等業(yè)務(wù)。10年已為華亭眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

1. 生成中文字體

我們都使用過three.js的FontLoader加載typeface.json實(shí)現(xiàn)font的使用，但是很多案例都是英文字體，那么如何來生成中文字體呢？現(xiàn)在我們可以通過Facetype.js實(shí)現(xiàn)ttf向typeface.json的轉(zhuǎn)換。 首先我們在網(wǎng)上下載ttf中文字體（或者在電腦的C:\Windows\Fonts直接復(fù)制一份中文的ttf字體），然后我們登陸Facetype.js網(wǎng)站，選中準(zhǔn)備好的ttf文件，點(diǎn)擊convert即可。得到的json文件就可以使用FontLoader加載了，其實(shí)還是挺簡單的，中文ttf一般都比較大，所以在選擇喜歡字體的同時(shí)，也要考慮好文件的大小。

2. tween操作文字動(dòng)畫

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

效果就是這樣的，我們讓tween實(shí)現(xiàn)從圖一到圖二到圖三再到圖一的動(dòng)畫，每個(gè)漢字除了位置的變化還有朝向（lookAt）的變化。這里的lookAt方法就是設(shè)置物體的朝向。好了開始上代碼。

1.設(shè)置點(diǎn)的位置和朝向

圖一中點(diǎn)的位置可以在平面幾何體中取點(diǎn)

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

他們的朝向相對(duì)于每個(gè)字來說都是Vector3(0, 0, 1)，所以可以設(shè)置為

d.position.clone().add(Vector3(0, 0, 1)) //這里的d.position就是每個(gè)點(diǎn)的位置

圖二中點(diǎn)的位置可以在球體中獲取

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

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

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));
}

他們的朝向可以設(shè)置為

new THREE.Vector3(0, d.position.y, 0) //d.position.y就是點(diǎn)的y坐標(biāo)

這樣就設(shè)置好了點(diǎn)，接下來就制作動(dòng)畫

2.tween動(dòng)畫

首先初始化三個(gè)動(dòng)畫

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是動(dòng)畫的緩動(dòng)效果里面有很多種，不妨打印出來看一下

然后就是onUpdate方法

function onUpdate() {
 let time = this._object.time; //動(dòng)畫時(shí)刻值
 if(flag == 0) {//這里有三段動(dòng)畫flag判斷是那一段動(dòng)畫
 group.children.forEach((d, i) => {//group里面包含著所有文字網(wǎng)格
  d.position.copy(positions3[i].clone().multiplyScalar(time / 2).add(positions1[i].clone().multiplyScalar(1 - time / 2)));
  d.lookAt((new THREE.Vector3(0, d.position.y, 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, d.position.y, 0).multiplyScalar(time - 1)));
 })
 }
}

最后通過點(diǎn)擊觸發(fā)

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;
},

這里注意，由于點(diǎn)擊切換的時(shí)候動(dòng)畫上一個(gè)動(dòng)畫可能沒有完成，所以先調(diào)用stop方法，讓動(dòng)畫先停下來。別忘了在render函數(shù)中調(diào)用TWEEN.update()，不然動(dòng)畫是不會(huì)執(zhí)行的。

上述就是小編為大家分享的怎么在three.js中顯示中文字體了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：怎么在three.js中顯示中文字體-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://jinyejixie.com/article6/cceiog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站維護(hù)、定制網(wǎng)站、云服務(wù)器、企業(yè)建站、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)