在Threejs中我們可以通過FontLoader和TextGeometry結(jié)合使用來創(chuàng)建三維文字，F(xiàn)ontLoader用于加載JSON格式的字體，F(xiàn)ontLoader返回值是表示字體的Shape類型的數(shù)組；TextGeometry用于將文本生成為單一的幾何體。下面我們先來了解下這兩個(gè)類
FontLoader
用于加載JSON格式的字體的類。返回font, 返回值是表示字體的Shape類型的數(shù)組。 其內(nèi)部使用FileLoader來加載文件。
構(gòu)造函數(shù)
FontLoader( manager : LoadingManager )
manager — 加載器所使用的loadingManager。默認(rèn)值為THREE.DefaultLoadingManager.
常用方法
FileLoader常用的方法是.load()方法
.load ( url : String, onLoad : Function, onProgress : Function, onError : Function )
url — 文件的URL或者路徑
onLoad — 在加載完成時(shí)調(diào)用。參數(shù)是將要被加載的font
onProgress — 在加載過程中調(diào)用。參數(shù)是包含total和loaded字節(jié)的XMLHttpRequest實(shí)例。如果server沒有設(shè)置header的Content-Length，則total值為0
onError — 在加載錯(cuò)誤時(shí)調(diào)用
注意
這里需要注意的是，F(xiàn)ontLoader加載的是JSON格式的字體，Threejs默認(rèn)提供了一些json格式的字體在/examples/fonts中，可以將其拷貝到項(xiàng)目中直接使用。如果里面沒有需要的之前,如中文字體，可以通過facetype.js進(jìn)行字體轉(zhuǎn)換.
TextGeometry 文本緩沖幾何體
TextGeometry 用于將文本生成為單一的幾何體的類。 它是由一串給定的文本，以及由加載的font和該幾何體ExtrudeGeometry父類中的設(shè)置所組成的參數(shù)來構(gòu)造的
構(gòu)造函數(shù)
TextGeometry(text : String, parameters : Object)
text — 將要顯示的文本。
parameters — 包含有下列參數(shù)的對(duì)象：
font — THREE.Font的實(shí)例。
size — Float類型。字體大小，默認(rèn)值為100。
height — Float類型。擠出文本的厚度。默認(rèn)值為50。
curveSegments — Integer類型。（表示文本的）曲線上點(diǎn)的數(shù)量。默認(rèn)值為12。
bevelEnabled — Boolean類型。是否開啟斜角，默認(rèn)為false。
bevelThickness — Float類型。文本上斜角的深度，默認(rèn)值為20。
bevelSize — Float類型。斜角與原始文本輪廓之間的延伸距離。默認(rèn)值為8。
bevelSegments — Integer類型。斜角的分段數(shù)。默認(rèn)值為3。
facetype.js在線轉(zhuǎn)換字體
facetype.js在線轉(zhuǎn)換可以將我們想要轉(zhuǎn)換的ttf格式的字體文件轉(zhuǎn)換為json格式的字體文件，其用法非常簡(jiǎn)單，打開網(wǎng)站，在選擇文件中選擇需要轉(zhuǎn)換的ttf文件，默認(rèn)選中Generate a JSON file (.json)，不需要修改，點(diǎn)擊下面的Convert即可將ttf轉(zhuǎn)換為json格式，并下載到本地
這里需要注意，facetype.js只能轉(zhuǎn)換ttf格式的字體
創(chuàng)建三維文字
對(duì)FontLoader和TextGeometry有了了解后，我們就可以在場(chǎng)景中創(chuàng)建三維文字了，在我們的vue項(xiàng)目中的components文件夾下新建FontView.vue文件，引入threejs并初始化，這些都是創(chuàng)建Threejs的基本套路，這里就不在贅述了，對(duì)Threejs創(chuàng)建的過程還不了解的小伙伴可以看我前面的博客文章。
初始化代碼
<template>
<div id="scene"></div>
</template>
<script setup>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { onMounted } from 'vue'
let scene,camera,renderer,controls
onMounted(()=>{
init()
})
function init() {
initScene()
initCamera()
initAxesHelper()
initLight()
initRenderer()
initControls()
animate()
window.addEventListener('resize',onWindowResize.bind(this))
}
// 初始化場(chǎng)景
function initScene() {
scene = new THREE.Scene()
scene.background = new THREE.Color(0x808080)
}
// 初始化相機(jī)
function initCamera() {
camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000)
camera.position.set(0,2,2)
}
// 輔助軸
function initAxesHelper() {
const axesHelper = new THREE.AxesHelper(1)
scene.add(axesHelper)
}
// 燈光
function initLight() {
const hesLight = new THREE.HemisphereLight(0xffffff,0x444444)
hesLight.intensity = 0.6
scene.add(hesLight)
const dirLight = new THREE.DirectionalLight()
dirLight.position.set(5,5,5)
scene.add(dirLight)
}
// 初始化渲染器
function initRenderer() {
renderer = new THREE.WebGLRenderer({antialias:true}) //抗鋸齒
// 設(shè)置屏幕像素比
renderer.setPixelRatio(window.devicePixelRatio)
// 設(shè)置大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 添加到容器
document.querySelector('#scene').appendChild(renderer.domElement)
// 加載陰影
renderer.shadowMap.enable = true
}
// 初始化軌道控制器
function initControls() {
controls = new OrbitControls(camera,renderer.domElement)
controls.minPolarAngle = 0 //默認(rèn)0
// 左鍵拖動(dòng)時(shí)視窗垂直方向的最大旋轉(zhuǎn)角度。Math.PI/2 為地平線視角
controls.maxPolarAngle = 80 / 360 * 2 * Math.PI // 默認(rèn)Math.PI，即可以向下旋轉(zhuǎn)到撒旦視角。
controls.update()
}
function animate() {
const delta = clock.getDelta()
renderer.render(scene,camera)
controls.update(delta) // 當(dāng)controls.enableDamping=true或者controls.autoRotate=true時(shí)調(diào)用
requestAnimationFrame(animate)
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth,window.innerHeight)
}
</script>
<style scoped>
</style>
創(chuàng)建三維文字
引用FontLoader和TextGeometry
FontLoader位于three/examples/jsm/loaders/目錄下，
TextGeometry位于three/examples/jsm/geometries/目錄下
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
創(chuàng)建initFont()方法
創(chuàng)建initFont()方法，在該方法中創(chuàng)建三維文字
創(chuàng)建材質(zhì)
一個(gè)三維文字有兩個(gè)面組成，分別是文字的正面和拉伸出來的面組成,如果只設(shè)置一種材質(zhì)，則不會(huì)有三維立體效果，仍然是二維的文字，可以調(diào)整兩個(gè)材質(zhì)的顏色不同來觀察區(qū)別
const materials = [
new THREE.MeshPhongMaterial({
color:0xffffff,
flatShading:true
}),//front
new THREE.MeshPhongMaterial({color:0xff0000})//back
]
實(shí)例化FontLoader對(duì)象
const loader = new FontLoader()
調(diào)用FontLoader的.load方法，在.load方法中設(shè)置要調(diào)用的字體和加載成功時(shí)的回調(diào)
在成功的回調(diào)中主要處理以下幾個(gè)邏輯
1、創(chuàng)建TextGeometry，并設(shè)置相關(guān)參數(shù)，
2、創(chuàng)建Mesh，將上面定義的幾何體和材質(zhì)作為參數(shù)傳入
3、設(shè)置Mesh的位置并添加到屏幕
const font = loader.load(
// font資源URL
'fonts/helvetiker_regular.typeface.json',
// onLoad回調(diào)
function (font) {
const geometry = new TextGeometry('你好 hello',{
font:font,
size:0.25, // Float。字體大小，默認(rèn)值為100。
height:0.05, // Float。擠出文本的厚度。默認(rèn)值為50。
curveSegments: 12, // Integer （表示文本的）曲線上點(diǎn)的數(shù)量。默認(rèn)值為12。
bevelEnabled: true, // Boolean 是否開啟斜角，默認(rèn)為false。
bevelThickness: 0.01, // Float。文本上斜角的深度，默認(rèn)值為20。
bevelSize: 0,// Float。斜角與原始文本輪廓之間的延伸距離。默認(rèn)值為8。
bevelSegments: 3 // Integer 斜角的分段數(shù)。默認(rèn)值為3。
})
const textMesh1 = new THREE.Mesh(geometry,materials)
textMesh1.position.set(0,0,0)
scene.add(textMesh1)
}
)
在init()函數(shù)中調(diào)用initFont()方法
在init()函數(shù)中調(diào)用initFont()方法，刷新瀏覽器看效果
獲取文字寬度并向左偏移
我們得到的是從原點(diǎn)開始的一個(gè)三維文字，如果我們想要讓這個(gè)文字的中心與原點(diǎn)重合，即將文字向左偏移一般，應(yīng)該如何處理呢？
這里我們可以借助Geometry的.computeBoundingBox () 方法，該方法用于計(jì)算當(dāng)前幾何體的的邊界矩形，該操作會(huì)更新已有 .boundingBox。這里注意，邊界矩形不會(huì)默認(rèn)計(jì)算，我們需要調(diào)用該接口指定計(jì)算邊界矩形，否則保持默認(rèn)值 null
我們?cè)谑褂脮r(shí)，首先調(diào)用geometry.computeBoundingBox ()方法，然后在geometry.boundingBox屬性中獲取max和min對(duì)應(yīng)的x、y、z的值，我們根據(jù)最大值的x和最小值的x的差值來獲取文字邊界的長(zhǎng)度，從而獲取偏移量
geometry.computeBoundingBox()
// console.log(geometry.boundingBox);
const xOffset = (geometry.boundingBox.max.x - geometry.boundingBox.min.x) / 2
const textMesh1 = new THREE.Mesh(geometry,materials)
textMesh1.position.set(-xOffset,0,0)
scene.add(textMesh1)
添加中文
前面我們提到，要想創(chuàng)建三維的中文文字，需要支持中文的字體的json格式字體文件，我們前面也介紹了如何將ttf文件轉(zhuǎn)換為json格式的字體文件，這里我們將轉(zhuǎn)換好的簡(jiǎn)體中文直接使用
const font = loader.load(
// font資源URL
'fonts/KaiTi_Regular.json',
// onLoad回調(diào)
function (font) {
console.log(font);
const geometry = new TextGeometry('歡迎',{
font:font,
size:0.25, // Float。字體大小，默認(rèn)值為100。
height:0.08, // Float。擠出文本的厚度。默認(rèn)值為50。
curveSegments: 12, // Integer （表示文本的）曲線上點(diǎn)的數(shù)量。默認(rèn)值為12。
bevelEnabled: true, // Boolean 是否開啟斜角，默認(rèn)為false。
bevelThickness: 0.01, // Float。文本上斜角的深度，默認(rèn)值為20。
bevelSize: 0,// Float。斜角與原始文本輪廓之間的延伸距離。默認(rèn)值為8。
bevelSegments: 3 // Integer 斜角的分段數(shù)。默認(rèn)值為3。
})
geometry.computeBoundingBox()
// console.log(geometry.boundingBox);
const xOffset = (geometry.boundingBox.max.x - geometry.boundingBox.min.x) / 2
const textMesh1 = new THREE.Mesh(geometry,materials)
textMesh1.position.set(-xOffset,0,0)
scene.add(textMesh1)
}
)
讓文字產(chǎn)生倒影效果
要產(chǎn)生倒影效果的三維文字，我們可以在添加一個(gè)文字Mesh，將其沿x軸旋轉(zhuǎn)180度，這樣就得到了文字的倒影
旋轉(zhuǎn)后得到的文字與原文字在z軸上有偏差，對(duì)其進(jìn)行微調(diào)文章來源：http://www.zghlxwxcb.cn/news/detail-737467.html
geometry.computeBoundingBox()
const xOffset = (geometry.boundingBox.max.x - geometry.boundingBox.min.x) / 2
const textMesh1 = new THREE.Mesh(geometry,materials)
textMesh1.position.set(-xOffset,0,0)
scene.add(textMesh1)
const textMesh2 =new THREE.Mesh(geometry,materials)
// console.log(geometry.boundingBox);
textMesh2.position.set(-xOffset,-geometry.boundingBox.min.y-0.03,geometry.boundingBox.max.z-0.01)
textMesh2.rotation.x = Math.PI
scene.add(textMesh2)
好了，這次就寫到這里吧，祝小伙伴們勞動(dòng)節(jié)快樂！喜歡的關(guān)注點(diǎn)贊收藏吧文章來源地址http://www.zghlxwxcb.cn/news/detail-737467.html
到了這里，關(guān)于Threejs進(jìn)階之十一：使用FontLoader和TextGeometry創(chuàng)建三維文字的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
