欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Three.js实现绘制字体模型示例代码

程序员文章站 2022-09-08 15:28:23
前言 本文主要给大家介绍了关于利用three.js绘制字体模型的相关内容,使用three.js绘制字体模型,没有想象当中那么难。下面话不多说了,来一起看看详细的介绍:...

前言

本文主要给大家介绍了关于利用three.js绘制字体模型的相关内容,使用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> 

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。