本文主要给大家介绍了关于three.js如何绘制字体模型的相关资料，通过文中介绍的方法实现的效果非常的赞，需要的朋友可以参考借鉴，下面来一起看看吧。
首先你需要实例化 three.fontloader() 来进行json格式的文字格式加载，在加载成功的回调函数里面进行创建网格。
然后通过three.textbuffergeometry或者three.textgeometry方法进行网格创建，并将需要设置的问题传入。
再设置一个纹理，通过three.mesh()函数创建成图形添加到场景当中即可。
示例代码：
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(); // 运行以后设置font的boundingbox属性对象，如果不运行无法获得。
//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);
//设置位置
fontmodel.position.x = - (font.boundingbox.max.x - font.boundingbox.min.x)/2; //计算出整个模型的宽度的一半
fontmodel.position.y = - 50;
fontmodel.position.z = - 30;
scene.add(fontmodel);
});
}
最后又调节了一下位置，就成了现在这个样子的代码。
最后放上所有的代码：
<!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(); // 运行以后设置font的boundingbox属性对象，如果不运行无法获得。
//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);
//设置位置
fontmodel.position.x = - (font.boundingbox.max.x - font.boundingbox.min.x)/2; //计算出整个模型的宽度的一半
fontmodel.position.y = - 50;
fontmodel.position.z = - 30;
scene.add(fontmodel);
});
}
//初始化性能插件
var stats;
function initstats() {
stats = new stats();
document.body.appendchild(stats.dom);
}
//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
var controls;
function initcontrols() {
controls = new three.orbitcontrols(camera, renderer.domelement);
// 如果使用animate方法时，将此函数删除
//controls.addeventlistener( 'change', render );
// 使动画循环使用时阻尼或自转 意思是否有惯性
controls.enabledamping = true;
//动态阻尼系数 就是鼠标拖拽旋转灵敏度
//controls.dampingfactor = 0.25;
//是否可以缩放
controls.enablezoom = true;
//是否自动旋转
controls.autorotate = false;
//设置相机距离原点的最远距离
controls.mindistance = 200;
//设置相机距离原点的最远距离
controls.maxdistance = 600;
//是否开启右键拖拽
controls.enablepan = true;
}
function render() {
renderer.render(scene, camera);
}
//窗口变动触发的函数
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>
相关推荐：
如何解决html5 canvas 绘制字体、图片与图形模糊问题
以上就是three.js绘制字体模型示例代码的详细内容。