新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
Three.js實(shí)現(xiàn)繪制字體模型示例代碼-創(chuàng)新互聯(lián)
前言
本文主要給大家介紹了關(guān)于利用Three.js繪制字體模型的相關(guān)內(nèi)容,使用three.js繪制字體模型,沒(méi)有想象當(dāng)中那么難。下面話不多說(shuō)了,來(lái)一起看看詳細(xì)的介紹:
- 首先你需要實(shí)例化
THREE.FontLoader()
來(lái)進(jìn)行json格式的文字格式加載,在加載成功的回調(diào)函數(shù)里面進(jìn)行創(chuàng)建網(wǎng)格。 - 然后通過(guò)THREE.TextBufferGeometry或者
THREE.TextGeometry
方法進(jìn)行網(wǎng)格創(chuàng)建,并將需要設(shè)置的問(wèn)題傳入。 - 再設(shè)置一個(gè)紋理,
通過(guò)THREE.Mesh()
函數(shù)創(chuàng)建成圖形添加到場(chǎng)景當(dāng)中即可。
示例代碼:
var fontModel; function initModel() { var font; var loader = new THREE.FontLoader(); loader.load("examples/fonts/gentilis_regular.typeface.json", function (res) { font = new THREE.TextBufferGeometry("fdsfasd", { font: res, size: 100, height: 60 }); font.computeBoundingBox(); // 運(yùn)行以后設(shè)置font的boundingBox屬性對(duì)象,如果不運(yùn)行無(wú)法獲得。 //font.computeVertexNormals(); var map = new THREE.TextureLoader().load("examples/textures/UV_Grid_Sm.jpg"); var material = new THREE.MeshLambertMaterial({map:map,side:THREE.DoubleSide}); fontModel = new THREE.Mesh(font,material); //設(shè)置位置 fontModel.position.x = - (font.boundingBox.max.x - font.boundingBox.min.x)/2; //計(jì)算出整個(gè)模型的寬度的一半 fontModel.position.y = - 50; fontModel.position.z = - 30; scene.add(fontModel); }); }
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
標(biāo)題名稱:Three.js實(shí)現(xiàn)繪制字體模型示例代碼-創(chuàng)新互聯(lián)
分享鏈接:http://www.ef60e0e.cn/article/decgds.html