javascript Three.js創(chuàng)建文字初體驗(yàn)
更新時(shí)間：2021年11月26日 14:45:50 作者：hongsir_12
這篇文章主要為大家介紹了Three.js創(chuàng)建文字初體驗(yàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
效果
首先引入必要組件
import './build/three.js';
import './libs/js/controls/OrbitControls.js'
import { FontLoader } from './libs/jsm/loaders/FontLoader.js';
import { TextGeometry } from './libs/jsm/geometries/TextGeometry.js';
然后不可少的初始化場景、渲染器、相機(jī)、控制器
var renderer, scene, camera, controls
// 初始化場景
function initScene() {
scene = new THREE.Scene();
//給場景添加煙霧效果
// 參數(shù)：煙霧顏色，煙霧范圍near，煙霧范圍far
scene.fog = new THREE.Fog(0x000000, 0, 3000)
// 給場景添加坐標(biāo)軸
var axes = new THREE.AxesHelper(100)
scene.add(axes)
}
// 初始化渲染器
function initRenderer() {
// antialias是否開啟抗鋸齒
renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setClearColor(0xeeeeee)
document.body.appendChild(renderer.domElement);
}
// 初始化相機(jī)
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.x = 50
camera.position.y = 50
camera.position.z = 50
}
// 初始化控制器
function initControls() {
controls = new THREE.OrbitControls(camera, renderer.domElement)
controls.enableZoom = false; //是否開啟縮放；
controls.minPolarAngle = Math.PI / 2.5; //限制豎直方向上最小旋轉(zhuǎn)角度 y軸正向?yàn)?度
controls.maxPolarAngle = Math.PI / 2.5; //限制豎直方向上最大旋轉(zhuǎn)角度 y軸正向?yàn)?度
}
初始化光源
// 初始化光源
function initLight() {
// 白光，光強(qiáng)1
var pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(0, 100, 100);
scene.add(pointLight);
var pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(0, 100, -100);
scene.add(pointLight);
}
開始創(chuàng)建文本
首先創(chuàng)建字體加載器
var loader = new FontLoader();
加載字體庫
加載字體庫資源成功后會(huì)將該字體庫傳給回調(diào)函數(shù)
loader.load（src, callback）
字體庫資源可以通過typeface.json選擇自己想要的ttf字體文件將之轉(zhuǎn)換為json文件，然后在回調(diào)函數(shù)中創(chuàng)建字體幾何體
loader.load('./fonts/FZKaTong-M19S_Regular.json', function (response) {
// 在這里面創(chuàng)建文字
})
創(chuàng)建文字幾何體
// 創(chuàng)建文本緩沖幾何體
var textGeometry = new TextGeometry('狗托吳嘉豪', {
// 字體類型
font: response,
// 字體大小
size: 15,
// 字體的厚度
height: 1,
// 文本曲線上的點(diǎn)的數(shù)量，越高字體曲線越平滑
curveSegments: 12,
// 是否開啟斜角(棱角平滑過渡)
bevelEnabled: false,
// 文本上斜角的深度
bevelThickness: 0.1,
// 斜角與原始文本輪廓之間的延伸距離(斜角尺寸)
bevelSize: 0.1,
// 斜角分段數(shù)
bevelSegments: 3
})
// 文字材質(zhì)
// 使用材質(zhì)數(shù)組
var textMaterial = [
// 第一項(xiàng)修飾文字正面背面
new THREE.MeshPhongMaterial( { color: 0x00ff00, flatShading: true } ), // front
// 第二項(xiàng)修飾文字側(cè)面(頂部底部)
new THREE.MeshPhongMaterial( { color: 0x0000ff, flatShading: true } ) // side
// Phong網(wǎng)格材質(zhì)可以模擬具有鏡面高光的光澤表面（例如涂漆木材）
]
// 創(chuàng)建文字
var text = new THREE.Mesh(textGeometry, textMaterial)
計(jì)算文字幾何體外邊界矩形
可以想象幾何體存放于一個(gè)看不見的矩形立方體容器之中，而這個(gè)容器默認(rèn)位置為原點(diǎn)處，沿x軸z軸正方向向外延伸，如此我們的文字便不會(huì)處于視野中心。
此時(shí)，我們可以通過計(jì)算幾何體的外邊界矩形，設(shè)置幾何體的位置向反方向移動(dòng)其長度的一半使得不論幾何體變得有多長，其始終處于視野中心。
// computeBoundingBox()計(jì)算當(dāng)前幾何體的的外邊界矩形
textGeometry.computeBoundingBox();
// console.log(textGeometry.boundingBox); 查看外邊界矩形頂點(diǎn)位置
// 文字位置向左移動(dòng)文字長度的一半
var centerOffset = -0.5*(textGeometry.boundingBox.max.x-textGeometry.boundingBox.min.x)
text.position.x = centerOffset
text.position.z = 0
scene.add(text);
創(chuàng)建鏡像文字
// 創(chuàng)建文字鏡像
var mirror = new THREE.Mesh(textGeometry, textMaterial)
// 翻轉(zhuǎn)180度
mirror.rotation.x = Math.PI
mirror.position.x = centerOffset
mirror.position.y = -8
scene.add(mirror)
創(chuàng)建半透明平面
// 創(chuàng)建文字鏡像
var mirror = new THREE.Mesh(textGeometry, textMaterial)
// 翻轉(zhuǎn)180度
mirror.rotation.x = Math.PI
mirror.position.x = centerOffset
mirror.position.y = -8
scene.add(mirror)
渲染
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render)
}
function start() {
initRenderer()
initScene();
initCamera();
initControls()
initLight()
initText()
render()
}
start()
關(guān)于文本構(gòu)造器參數(shù)
當(dāng)curveSegments設(shè)置越低時(shí)，可以看到文字沒有那么圓滑
// 文本曲線上的點(diǎn)的數(shù)量，越高曲線越平滑 curveSegments: 1,
當(dāng)開啟了斜角時(shí)，可以觀察到字體的邊棱變得圓滑，不再銳利
// 是否開啟斜角(棱角平滑過渡) bevelEnabled: true,
設(shè)置斜角參數(shù)
// 文本上斜角的深度 bevelThickness: 0.1, // 斜角與原始文本輪廓之間的延伸距離(斜角尺寸) bevelSize: .1, // 斜角分段數(shù) bevelSegments: 3
完整代碼
<script type="module">
import './build/three.js';
import './libs/js/controls/OrbitControls.js'
import { FontLoader } from './libs/jsm/loaders/FontLoader.js';
import { TextGeometry } from './libs/jsm/geometries/TextGeometry.js';
var renderer, scene, camera, controls
// 初始化渲染器
function initRenderer() {
// antialias是否開啟抗鋸齒
renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setClearColor(0xeeeeee)
document.body.appendChild(renderer.domElement);
}
// 初始化場景
function initScene() {
scene = new THREE.Scene();
//給場景添加煙霧效果
// 參數(shù)：煙霧顏色，煙霧范圍near，煙霧范圍far
scene.fog = new THREE.Fog(0x000000, 0, 3000)
// 給場景添加坐標(biāo)軸
var axes = new THREE.AxesHelper(100)
scene.add(axes)
}
// 初始化相機(jī)
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.x = 50
camera.position.y = 50
camera.position.z = 50
}
// 初始化控制器
function initControls() {
controls = new THREE.OrbitControls(camera, renderer.domElement)
}
// 初始化光源
function initLight() {
var pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(0, 100, 100);
scene.add(pointLight);
var pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(0, 100, -100);
scene.add(pointLight);
}
function initText() {
var loader = new FontLoader();
loader.load('./fonts/FZKaTong-M19S_Regular.json', function (response) {
// 創(chuàng)建文字幾何圖形
var textGeometry = new TextGeometry('狗托吳嘉豪', {
font: response,
// 字體大小
size: 15,
// 字體的厚度
height: 4,
// 文本曲線上的點(diǎn)的數(shù)量，越高曲線越平滑
curveSegments: 12,
// 是否開啟斜角(棱角平滑過渡)
bevelEnabled: true,
// 文本上斜角的深度
bevelThickness: 0.1,
// 斜角與原始文本輪廓之間的延伸距離(斜角尺寸)
bevelSize: .1,
// 斜角分段數(shù)
bevelSegments: 3
})
// 文字材質(zhì)
// 使用材質(zhì)數(shù)組
var textMaterial = [
// 第一項(xiàng)修飾文字正面背面
new THREE.MeshPhongMaterial( { color: 0x00ff00, flatShading: true } ), // front
// 第二項(xiàng)修飾文字側(cè)面(頂部底部)
new THREE.MeshPhongMaterial( { color: 0x0000ff, flatShading: true } ) // side
// Phong網(wǎng)格材質(zhì)可以模擬具有鏡面高光的光澤表面（例如涂漆木材）
]
var text = new THREE.Mesh(textGeometry, textMaterial)
// computeBoundingBox()計(jì)算當(dāng)前幾何體的的邊界矩形
textGeometry.computeBoundingBox();
// console.log(textGeometry.boundingBox);
var centerOffset = -0.5*(textGeometry.boundingBox.max.x-textGeometry.boundingBox.min.x)
text.position.x = centerOffset
text.position.z = 0
scene.add(text);
// 創(chuàng)建文字鏡像
var mirror = new THREE.Mesh(textGeometry, textMaterial)
mirror.rotation.x = Math.PI
mirror.position.x = centerOffset
mirror.position.y = -8
scene.add(mirror)
// 創(chuàng)建半透明平面
var plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(200,200),new THREE.MeshBasicMaterial({color:0xffffff,opacity:.5,transparent:true}))
plane.rotation.x = -Math.PI / 2
plane.position.y = -3
scene.add(plane)
})
}
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render)
}
function start() {
initRenderer()
initScene();
initCamera();
initControls()
initLight()
initText()
render()
}
start()
</script>
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！
相關(guān)文章
js實(shí)現(xiàn)tab選項(xiàng)卡切換功能
本文主要分享了javascript實(shí)現(xiàn)tab選項(xiàng)卡切換功能的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
Bootstrap下拉菜單Dropdowns的實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap下拉菜單Dropdowns的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)調(diào)用相機(jī)自動(dòng)拍照功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)調(diào)用相機(jī)自動(dòng)拍照功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
js實(shí)現(xiàn)右下角可關(guān)閉最小化div(可用于展示推薦內(nèi)容)
使用Javascript實(shí)現(xiàn)右下角可關(guān)閉最小化div，可以用于展示推薦內(nèi)容，完整源代碼如下，感興趣的各位可以參下哈，希望對(duì)大家有所幫助2013-06-06
js實(shí)現(xiàn)簡單的省市縣三級(jí)聯(lián)動(dòng)效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)簡單的省市縣三級(jí)聯(lián)動(dòng)效果,以完整實(shí)例形式分析了JavaScript實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)效果的具體步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-02-02
uni-app中實(shí)現(xiàn)元素拖動(dòng)效果
這篇文章主要介紹了uni-app中實(shí)現(xiàn)元素拖動(dòng)效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-01-01 
微信小程序?qū)崿F(xiàn)topBar底部選擇欄效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)topBar底部選擇欄效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07 
javascript 表格左右收縮實(shí)現(xiàn)代碼。
2009-07-07 
p5.js碼繪“跳動(dòng)的小正方形”的實(shí)現(xiàn)代碼
這篇文章主要介紹了p5.js碼繪“跳動(dòng)的小正方形”，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-10-10