javascript Three.js創(chuàng)建文字初體驗(yàn)
更新時間：2021年11月26日 14:45:50 作者：hongsir_12
這篇文章主要為大家介紹了Three.js創(chuàng)建文字初體驗(yàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
效果
首先引入必要組件
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();
加載字體庫
加載字體庫資源成功后會將該字體庫傳給回調(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)
計算文字幾何體外邊界矩形
可以想象幾何體存放于一個看不見的矩形立方體容器之中，而這個容器默認(rèn)位置為原點(diǎn)處，沿x軸z軸正方向向外延伸，如此我們的文字便不會處于視野中心。
此時，我們可以通過計算幾何體的外邊界矩形，設(shè)置幾何體的位置向反方向移動其長度的一半使得不論幾何體變得有多長，其始終處于視野中心。
// computeBoundingBox()計算當(dāng)前幾何體的的外邊界矩形
textGeometry.computeBoundingBox();
// console.log(textGeometry.boundingBox); 查看外邊界矩形頂點(diǎn)位置
// 文字位置向左移動文字長度的一半
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è)置越低時，可以看到文字沒有那么圓滑
// 文本曲線上的點(diǎn)的數(shù)量，越高曲線越平滑 curveSegments: 1,
當(dāng)開啟了斜角時，可以觀察到字體的邊棱變得圓滑，不再銳利
// 是否開啟斜角(棱角平滑過渡) 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()計算當(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)文章
java和javascript獲取word文檔的書簽位置對比
這篇文章主要介紹了java和javascript獲取word文檔的書簽位置代碼對比,需要的朋友可以參考下2014-06-06
JavaScript中16進(jìn)制顏色與rgb顏色互相轉(zhuǎn)換的示例代碼
這篇文章主要介紹了JavaScript中16進(jìn)制顏色與rgb顏色互相轉(zhuǎn)換的示例代碼,通過示例代碼介紹了JS 顏色16進(jìn)制、rgba相互轉(zhuǎn)換問題,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了JS字符串常用操作方法,結(jié)合實(shí)例形式總結(jié)分析了javascript字符串獲取、返回、拼接、替換、搜索、計算等相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
Js 導(dǎo)出table內(nèi)容到Excel的簡單實(shí)例
在做前端開發(fā)時，常常會用到通過js把數(shù)據(jù)導(dǎo)入到excel的功能，現(xiàn)在給出給簡單demo代碼，以供以后使用2013-11-11
這篇文章主要介紹了JavaScript中的Truthy和Falsy介紹,JavaScript中存在Truthy值和Falsy值的概念,本文講解了它的相關(guān)概念,需要的朋友可以參考下2015-01-01
JS實(shí)現(xiàn)點(diǎn)擊按鈕后框架內(nèi)載入不同網(wǎng)頁的方法
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊按鈕后框架內(nèi)載入不同網(wǎng)頁的方法,涉及javascript點(diǎn)擊按鈕載入頁面的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-05-05
TypeScript內(nèi)置工具類型快速入門運(yùn)用
TypeScript 中內(nèi)置了很多工具類型，我們無需導(dǎo)入，可以直接使用。 其中的很多都是比較常用的，接下來我們根據(jù)使用范圍來一一介紹，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-03-03
JavaScript canvas實(shí)現(xiàn)九宮格切圖效果
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)九宮格切圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript結(jié)合Canvas繪畫畫運(yùn)動小球
這篇文章主要介紹了JavaScript結(jié)合Canvas畫運(yùn)動小球，canvas被稱為畫布，可以結(jié)合javascript實(shí)現(xiàn)繪制各種圖形,制作各種炫酷的動畫效果，下面文章更多詳細(xì)內(nèi)容介紹需要的小伙伴可以參考一下2022-03-03
利用原生JS實(shí)現(xiàn)懶加載lazyLoad的三種方法總結(jié)
加載頁面的時候,圖片一直都是流量大頭,針對圖片的性能方法也挺多的比如base64、雪碧圖等;懶加載也是其中一種,這篇文章主要給大家介紹了關(guān)于利用原生JS實(shí)現(xiàn)懶加載lazyLoad的三種方法,需要的朋友可以參考下2021-07-07