Three.js實(shí)現(xiàn)繪制字體模型示例代碼
更新時(shí)間：2017年09月26日 09:07:22 作者：專注前端30年
最近在學(xué)習(xí)three.js，這篇文章屬于系列文章，下面這篇文章主要給大家介紹了關(guān)于Three.js如何繪制字體模型的相關(guān)資料，通過(guò)文中介紹的方法實(shí)現(xiàn)的效果非常的贊，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
前言
本文主要給大家介紹了關(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);
});
}
最后又調(diào)節(jié)了一下位置，就成了現(xiàn)在這個(gè)樣子的代碼。
最后放上所有的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
canvas {
display: block;
}
</style>
</head>
<body onload="draw();">
</body>
<script src="build/three.js"></script>
<script src="examples/js/controls/OrbitControls.js"></script>
<script src="examples/js/libs/stats.min.js"></script>
<script>
var renderer;
function initRender() {
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 0, 400);
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
var light;
function initLight() {
scene.add(new THREE.AmbientLight(0x404040));
light = new THREE.DirectionalLight(0xffffff);
light.position.set(1, 1, 1);
scene.add(light);
}
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);
});
}
//初始化性能插件
var stats;
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
//用戶交互插件 鼠標(biāo)左鍵按住旋轉(zhuǎn)，右鍵按住平移，滾輪縮放
var controls;
function initControls() {
controls = new THREE.OrbitControls(camera, renderer.domElement);
// 如果使用animate方法時(shí)，將此函數(shù)刪除
//controls.addEventListener( 'change', render );
// 使動(dòng)畫(huà)循環(huán)使用時(shí)阻尼或自轉(zhuǎn) 意思是否有慣性
controls.enableDamping = true;
//動(dòng)態(tài)阻尼系數(shù) 就是鼠標(biāo)拖拽旋轉(zhuǎn)靈敏度
//controls.dampingFactor = 0.25;
//是否可以縮放
controls.enableZoom = true;
//是否自動(dòng)旋轉(zhuǎn)
controls.autoRotate = false;
//設(shè)置相機(jī)距離原點(diǎn)的最遠(yuǎn)距離
controls.minDistance = 200;
//設(shè)置相機(jī)距離原點(diǎn)的最遠(yuǎn)距離
controls.maxDistance = 600;
//是否開(kāi)啟右鍵拖拽
controls.enablePan = true;
}
function render() {
renderer.render(scene, camera);
}
//窗口變動(dòng)觸發(fā)的函數(shù)
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
//更新控制器
controls.update();
render();
//更新性能插件
stats.update();
requestAnimationFrame(animate);
}
function draw() {
initRender();
initScene();
initCamera();
initLight();
initModel();
initControls();
initStats();
animate();
window.onresize = onWindowResize;
}
</script>
</html>
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了js 閉包的9個(gè)使用場(chǎng)景，幫助大家更好的理解和學(xué)習(xí)JavaScript 閉包的使用，感興趣的朋友可以了解下
2020-12-12 
解決layui數(shù)據(jù)表格Date日期格式的回顯Object的問(wèn)題
今天小編就為大家分享一篇解決layui數(shù)據(jù)表格Date日期格式的回顯Object的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09 
js相冊(cè)效果代碼(點(diǎn)擊創(chuàng)建即可)
利用js 書(shū)寫(xiě)的相冊(cè)代碼，點(diǎn)擊創(chuàng)建即可看到效果，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)jquery有所幫助
2013-04-04 
微信小程序?qū)崿F(xiàn)發(fā)微博功能的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)發(fā)微博功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-06-06 
我們?cè)陂_(kāi)發(fā)中常遇到一種情況,在創(chuàng)建一個(gè)元素之后,需要給它綁定事件,這篇文章主要給大家介紹了關(guān)于js為新添加元素添加綁定事件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06 
ES6新特性之函數(shù)的擴(kuò)展實(shí)例詳解
這篇文章主要介紹了ES6新特性之函數(shù)的擴(kuò)展,實(shí)例形式較為詳細(xì)的分析了ES6針對(duì)函數(shù)參數(shù)、運(yùn)算符及相關(guān)新特性的擴(kuò)展操作與注意事項(xiàng),需要的朋友可以參考下
2017-04-04 
webpack構(gòu)建打包的性能優(yōu)化實(shí)戰(zhàn)指南
webpack是前端開(kāi)發(fā)中比較常用的打包工具之一,另外還有g(shù)ulp,grunt,下面這篇文章主要給大家介紹了關(guān)于webpack構(gòu)建打包的性能優(yōu)化的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-03-03 
小程序云開(kāi)發(fā)實(shí)戰(zhàn)小結(jié)
這篇文章主要介紹了小程序云開(kāi)發(fā)實(shí)戰(zhàn)小結(jié)，本文詳細(xì)的介紹了云開(kāi)發(fā)以及環(huán)境的搭建和項(xiàng)目實(shí)踐，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-10-10 
js簡(jiǎn)單判斷移動(dòng)端系統(tǒng)的方法
這篇文章主要介紹了js簡(jiǎn)單判斷移動(dòng)端系統(tǒng)的方法,通過(guò)JavaScript的navigator.userAgent相關(guān)屬性判斷訪問(wèn)端的系統(tǒng)類型,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2016-02-02