javascript Three.js創(chuàng)建文字初體驗(yàn)
更新時(shí)間：2021年11月26日 14:45:50 作者：hongsir_12
這篇文章主要為大家介紹了Three.js創(chuàng)建文字初體驗(yàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
效果
首先引入必要組件
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';
然后不可少的初始化場(chǎng)景、渲染器、相機(jī)、控制器
var renderer, scene, camera, controls
// 初始化場(chǎng)景
function initScene() {
scene = new THREE.Scene();
//給場(chǎng)景添加煙霧效果
// 參數(shù)：煙霧顏色，煙霧范圍near，煙霧范圍far
scene.fog = new THREE.Fog(0x000000, 0, 3000)
// 給場(chǎng)景添加坐標(biāo)軸
var axes = new THREE.AxesHelper(100)
scene.add(axes)
}
// 初始化渲染器
function initRenderer() {
// antialias是否開(kāi)啟抗鋸齒
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; //是否開(kāi)啟縮放；
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);
}
開(kāi)始創(chuàng)建文本
首先創(chuàng)建字體加載器
var loader = new FontLoader();
加載字體庫(kù)
加載字體庫(kù)資源成功后會(huì)將該字體庫(kù)傳給回調(diào)函數(shù)
loader.load（src, callback）
字體庫(kù)資源可以通過(guò)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,
// 是否開(kāi)啟斜角(棱角平滑過(guò)渡)
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è)看不見(jiàn)的矩形立方體容器之中，而這個(gè)容器默認(rèn)位置為原點(diǎn)處，沿x軸z軸正方向向外延伸，如此我們的文字便不會(huì)處于視野中心。
此時(shí)，我們可以通過(guò)計(jì)算幾何體的外邊界矩形，設(shè)置幾何體的位置向反方向移動(dòng)其長(zhǎng)度的一半使得不論幾何體變得有多長(zhǎng)，其始終處于視野中心。
// computeBoundingBox()計(jì)算當(dāng)前幾何體的的外邊界矩形
textGeometry.computeBoundingBox();
// console.log(textGeometry.boundingBox); 查看外邊界矩形頂點(diǎn)位置
// 文字位置向左移動(dòng)文字長(zhǎ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í)，可以看到文字沒(méi)有那么圓滑
// 文本曲線上的點(diǎn)的數(shù)量，越高曲線越平滑 curveSegments: 1,
當(dāng)開(kāi)啟了斜角時(shí)，可以觀察到字體的邊棱變得圓滑，不再銳利
// 是否開(kāi)啟斜角(棱角平滑過(guò)渡) 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是否開(kāi)啟抗鋸齒
renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setClearColor(0xeeeeee)
document.body.appendChild(renderer.domElement);
}
// 初始化場(chǎng)景
function initScene() {
scene = new THREE.Scene();
//給場(chǎng)景添加煙霧效果
// 參數(shù)：煙霧顏色，煙霧范圍near，煙霧范圍far
scene.fog = new THREE.Fog(0x000000, 0, 3000)
// 給場(chǎng)景添加坐標(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,
// 是否開(kāi)啟斜角(棱角平滑過(guò)渡)
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é)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！
相關(guān)文章
java和javascript獲取word文檔的書(shū)簽位置對(duì)比
這篇文章主要介紹了java和javascript獲取word文檔的書(shū)簽位置代碼對(duì)比,需要的朋友可以參考下2014-06-06
JavaScript中16進(jìn)制顏色與rgb顏色互相轉(zhuǎn)換的示例代碼
這篇文章主要介紹了JavaScript中16進(jìn)制顏色與rgb顏色互相轉(zhuǎn)換的示例代碼,通過(guò)示例代碼介紹了JS 顏色16進(jìn)制、rgba相互轉(zhuǎn)換問(wèn)題,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了JS字符串常用操作方法,結(jié)合實(shí)例形式總結(jié)分析了javascript字符串獲取、返回、拼接、替換、搜索、計(jì)算等相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
Js 導(dǎo)出table內(nèi)容到Excel的簡(jiǎn)單實(shí)例
在做前端開(kāi)發(fā)時(shí)，常常會(huì)用到通過(guò)js把數(shù)據(jù)導(dǎo)入到excel的功能，現(xiàn)在給出給簡(jiǎ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)頁(yè)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊按鈕后框架內(nèi)載入不同網(wǎng)頁(yè)的方法,涉及javascript點(diǎn)擊按鈕載入頁(yè)面的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-05-05
TypeScript內(nèi)置工具類型快速入門運(yùn)用
TypeScript 中內(nèi)置了很多工具類型，我們無(wú)需導(dǎo)入，可以直接使用。 其中的很多都是比較常用的，接下來(lái)我們根據(jù)使用范圍來(lái)一一介紹，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-03-03
JavaScript canvas實(shí)現(xiàn)九宮格切圖效果
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)九宮格切圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript結(jié)合Canvas繪畫(huà)畫(huà)運(yùn)動(dòng)小球
這篇文章主要介紹了JavaScript結(jié)合Canvas畫(huà)運(yùn)動(dòng)小球，canvas被稱為畫(huà)布，可以結(jié)合javascript實(shí)現(xiàn)繪制各種圖形,制作各種炫酷的動(dòng)畫(huà)效果，下面文章更多詳細(xì)內(nèi)容介紹需要的小伙伴可以參考一下2022-03-03
利用原生JS實(shí)現(xiàn)懶加載lazyLoad的三種方法總結(jié)
加載頁(yè)面的時(shí)候,圖片一直都是流量大頭,針對(duì)圖片的性能方法也挺多的比如base64、雪碧圖等;懶加載也是其中一種,這篇文章主要給大家介紹了關(guān)于利用原生JS實(shí)現(xiàn)懶加載lazyLoad的三種方法,需要的朋友可以參考下2021-07-07