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> 

总结

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

(0)

相关推荐

  • Three.js快速入门教程

    引言 本文主要是讲解Three.js的相关概念,帮助读者对Three.js以及相关知识形成比较完整的理解. 近年来web得到了快速的发展.随着HTML5的普及,网页的表现能力越来越强大.网页上已经可以做出很多复杂的动画,精美的效果. 但是,人总是贪的.那么,在此之上还能做什么呢?其中一种就是通过WebGL在网页中绘制高性能的3D图形. OpenGL,WebGL到Three.js OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于OpenGL设计的面向web的图形标准,

  • three.js快速入门【推荐】

    Three.js的核心五步就是: 1.设置three.js渲染器 2.设置摄像机camera 3.设置场景scene 4.设置光源light 5.设置物体object 1.设置three.js渲染器 三维空间里的物体映射到二维平面的过程被称为三维渲染. 一般来说我们都把进行渲染操作的软件叫做渲染器. 具体来说要进行下面这些处理. var renderer; function initThree(){ width = document.getElementById("box").clie

  • Three.js源码阅读笔记(物体是如何组织的)

    这是Three.js源码阅读笔记第三篇.之前两篇主要是关于核心对象的,这些核心对象主要围绕着矢量vector3对象和矩阵matrix4对象展开的,关注的是空间中的单个顶点的位置和变化.这一篇将主要讨论Three.js中的物体是如何组织的:即如何将顶点.表面.材质组合成为一个具体的对象. Object::Mesh 该构造函数构造了一个空间中的物体.之所以叫"网格"是因为,实际上具有体积的物体基本都是建模成为"网格"的. 复制代码 代码如下: THREE.Mesh =

  • Three.js利用顶点绘制立方体的方法详解

    前言 之前我们在学些WebGL基础的时候每天都是在一直研究顶点位置,法向量,绘制下标什么的.虽然复杂,但是毕竟原生,性能没得说. three.js也给我们提供了相关的接口供我们使用原生的方法绘制模型,下面话不多说了,来一起看看详细的介绍吧. 下面是我的个人一个案例. 首先,我创建了一个空白的形状: //立方体 var cubeGeometry = new THREE.Geometry(); 立方体的形状如下: // 创建一个立方体 // v6----- v5 // /| /| // v1----

  • three.js实现围绕某物体旋转

    话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://cdn.bootcss.com/t

  • Three.js基础部分学习

    一.关于使用Three.js几点理论说明 1.请参考官网地址 https://threejs.org/ 2.使用three.js必备条件  <场景 A scene.相机a camera.渲染器 a renderer  三者缺一不可> To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the

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

    前言 本文主要给大家介绍了关于利用Three.js绘制字体模型的相关内容,使用three.js绘制字体模型,没有想象当中那么难.下面话不多说了,来一起看看详细的介绍: 首先你需要实例化 THREE.FontLoader() 来进行json格式的文字格式加载,在加载成功的回调函数里面进行创建网格. 然后通过THREE.TextBufferGeometry或者THREE.TextGeometry方法进行网格创建,并将需要设置的问题传入. 再设置一个纹理,通过THREE.Mesh()函数创建成图形添加

  • 使用D3.js创建物流地图的示例代码

    本文介绍了使用D3.js创建物流地图的示例代码,分享给大家,具体如下: 示例图 制作思路 需要绘制一张中国地图,做为背景. 需要主要城市的经纬坐标,以绘制路张起点和终点. 接收到物流单的城市,绘制一个闪烁的标记. 已经有过物流单的目标城市,不再绘制路线. 每次新产生一笔物流单,都有一个标记沿路线移向目标的动画效果. 绘制结束后的数据,需要清理掉,以减少对浏览器的资源占用. 开始撸码 1.创建网页模板 加载D3JS,为了方便调试,直接下载d3.js文件在本地,实际使用的时候,可以换成加载路径.注意

  • 微信小游戏中three.js离屏画布的示例代码

    国庆8天长假,重庆之行因故未成,偶得闲,用three.js结合cannon.js写个3D小游戏耍耍. 在微信小游戏中,把three.js的3D内容在离屏画布处理,然后复制到在屏画布,方法是: let c_toolbarHeight=140; let sysInfo=wx.getSystemInfoSync(); require('./js/libs/weapp-adapter.js'); var canvas_webGL=window.canvas; canvas_webGL.width = s

  • JS实现按钮添加背景音乐示例代码

    1-代码 <html> <head> <meta charset="utf-8"> <title>js实现按键声</title> </head> <body> <ul> <li> <a href="menu-list" rel="external nofollow" rel="external nofollow"

  • Android中js和原生交互的示例代码

    本文介绍了Android中js和原生交互的示例代码,分享给大家,具体如下: 加载webview的类 public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); JavaScriptInterf

  • C# 获取系统字体的示例代码

    获取已安装的所有字体列表 System.Drawing.FontFamily StringBuilder str = new StringBuilder(2000); InstalledFontCollection fonts = new InstalledFontCollection(); foreach (FontFamily family in fonts.Families) { str.Append(family.Name); str.AppendLine(); } ContentTex

  • 用p5.js制作烟花特效的示例代码

    前言 之前看过一篇文章,使用processing制作烟花特效.效果如下 fireworks 网上调查了一圈了,发现processing是一个互动编程软件,java语言发展而来.而且动画效果是跑在processing专门的模拟器上. 不过好在也有对应的web扩展语言,有processing.js和p5.js. processing.js在github上已经好几年没有人维护了,一些processing的特性支持不了.为此踩了不少坑, 本文就集中讲解如何用p5.js写烟花特效. 代码讲解 proces

  • 使用D3.js构建实时图形的示例代码

    首先你需要在计算机上安装Node和npm. 数据的可视化表示是传递复杂信息的最有效手段之一,D3.js提供了创建这些数据可视化的强大工具和灵活性. D3.js是一个JavaScript库,用于使用SVG,HTML和CSS在Web浏览器中生成动态的交互式数据可视化. D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度.由于它本质上是 JavaScript ,所以用 JavaScript 也是可以实现所有功能的,但它能大大减小你的工作量,尤其是在数据可视化方面,D3 已

  • Node.js搭建WEB服务器的示例代码

    前言 这几天为了熟悉vue.js框架,还有webpack的使用,就准备搭建一个发布和浏览markdwon的简单WEB应用.原本是想着用bash脚本和busybox的httpd来作为后台服务,但是bash脚本解析和生成JSON非常不方便,而用Java语言写又觉得部署不方便,所以就想到了正在用到的Node.js,于是就有了这篇博文.(文末有本文代码的github地址) 简单例子 首先,从搭建最简单的 Hello world 开始,建立以下目录.文件和内容. 建立项目及运行 project web-s

  • js canvas实现擦除效果示例代码

    关于canvas的定义: HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. html代码: <div class="container"> <canvas id="canvas" width="200" height="50"></canvas>

随机推荐

其他