1.文字形状

　　说起3d文字想起了早年word里的一些艺术字：

时间真快。

　　那么TextGeometry可以用来创建三维的文字形状。

　　使用文字形状需要下载和引用额外的字体库。这里，我们以 helvetiker字体为例。引用：

  1. <script type="text/javascript" src="你的路径/helvetiker_regular.typeface.json"></script>

　　TextGeometry的构造函数是：

  1. THREE.TextGeometry(text, parameters)

　　text是文字字符串；

　　parameters是以下参数组成的对象：

　　　　· size：字号大小，一般为大写字母的高度

　　　　· height：文字的厚度

　　　　· curveSegments：弧线分段数，使得文字的曲线更加光滑

　　　　· font：字体，默认是'helvetiker'，需对应引用的字体文件

　　　　· weight：值为'normal'或'bold'，表示是否加粗

　　　　· style：值为'normal'或'italics'，表示是否斜体

　　　　· bevelEnabled：布尔值，是否使用倒角，意为在边缘处斜切

　　　　· bevelThickness：倒角厚度

　　　　· bevelSize：倒角宽度

　　创建一个三维文字：new THREE.TextGeometry('Hello', {size: 1, height: 1})，其效果为：

　　可以适当调整材质和光照以达到期望效果：

  1. //金属发亮物体
  2. var material = new THREE.MeshPhongMaterial({
  3.     color: 0xffff00,
  4.     specular:0xffff00,
  5.     //指定该材质的光亮程度及其高光部分的颜色，如果设置成和color属性相同的颜色，则会得到另一个更加类似金属的材质，如果设置成grey灰色，则看起来像塑料
  6.     shininess:0
  7.     //指定高光部分的亮度，默认值为30
  8. });
  9.  
  10. //方向光
  11. var light = new THREE.DirectionalLight(0xffffff);
  12. light.position.set(-5, 10, 5);
  13. scene.add(light);

　　源码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>3.js测试六</title>
  6.     </head>
  7.     <body onload="init()">
  8.         <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
  9.     </body>
  10.     <script type="text/javascript" src="js/three.min.js"></script>
  11.         <!-- Find more information at https://github.com/mrdoob/three.js/tree/master/examples/fonts -->
  12.  
  13.         <script type="text/javascript">
  14.             function init() {
  15.                 var renderer = new THREE.WebGLRenderer({
  16.                     canvas: document.getElementById('mainCanvas')
  17.                 });
  18.                 renderer.setClearColor(0x000000);
  19.                 var scene = new THREE.Scene();
  20.  
  21.                 // camera
  22.                 var camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
  23.                 camera.position.set(5, 5, 20);
  24.                 camera.lookAt(new THREE.Vector3(1, 0, 0));
  25.                 scene.add(camera); 
  26.  
  27. //              var material = new THREE.MeshBasicMaterial({
  28. //                  color: 0xffff00,
  29. //                  wireframe: true
  30. //              });
  31.                 //金属发亮物体
  32.                 var material = new THREE.MeshPhongMaterial({
  33.                     color: 0xffff00,
  34.                     specular:0xffff00,
  35.                     //指定该材质的光亮程度及其高光部分的颜色，如果设置成和color属性相同的颜色，则会得到另一个更加类似金属的材质，如果设置成grey灰色，则看起来像塑料
  36.                     shininess:0
  37.                     //指定高光部分的亮度，默认值为30
  38.                 });
  39.  
  40.                 //方向光
  41.                 var light = new THREE.DirectionalLight(0xffffff);
  42.                 light.position.set(-5, 10, 5);
  43.                 scene.add(light);
  44.  
  45.                 // load font
  46.                 var loader = new THREE.FontLoader();
  47.                 loader.load('./helvetiker_regular.typeface.json', function(font) {
  48.                     var mesh = new THREE.Mesh(new THREE.TextGeometry('Hello', {
  49.                         font: font,
  50.                         size: 1,
  51.                         height: 1
  52.                     }), material);
  53.                     scene.add(mesh);
  54.  
  55.                     // render
  56.                     renderer.render(scene, camera);
  57.                 });
  58.             }
  59.  
  60.         </script>
  61. </html>

2.自定义形状

　　对于Three.js没有提供的形状，可以提供自定义形状来创建。

　　由于自定义形状需要手动指定每个顶点位置，以及顶点连接情况，如果该形状非常复杂，程序员的计算量就会比较大。在这种情况下，建议在3ds Max之类的建模软件中创建模型，然后使用Three.js导入到场景中，这样会更高效方便。

　　自定义形状使用的是Geometry类，它是其他如CubeGeometry、SphereGeometry等几何形状的父类，其构造函数是：

  1. THREE.Geometry()

　　初始化一个几何形状，然后设置顶点位置以及顶点连接情况：

　　源码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>3.js测试六-二</title>
  6.     </head>
  7.     <body onload="init()">
  8.         <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
  9.     </body>
  10.     <script type="text/javascript" src="js/three.js"></script>
  11.     <script type="text/javascript">
  12.         function init() {
  13.             var renderer = new THREE.WebGLRenderer({
  14.                 canvas: document.getElementById('mainCanvas')
  15.             });
  16.             renderer.setClearColor(0x000000);
  17.             var scene = new THREE.Scene();
  18.  
  19.             // camera
  20.             var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
  21.             camera.position.set(25, 25, 25);
  22.             camera.lookAt(new THREE.Vector3(0, 0, 0));
  23.             scene.add(camera);
  24.  
  25.             var material = new THREE.MeshBasicMaterial({
  26.                 color: 0xffff00,
  27.                 wireframe: true
  28.             });
  29.  
  30.             // 初始化几何形状
  31.             var geometry = new THREE.Geometry();
  32.  
  33.             // 设置顶点位置
  34.             // 顶部4顶点
  35.             geometry.vertices.push(new THREE.Vector3(-1, 2, -1));
  36.             geometry.vertices.push(new THREE.Vector3(1, 2, -1));
  37.             geometry.vertices.push(new THREE.Vector3(1, 2, 1));
  38.             geometry.vertices.push(new THREE.Vector3(-1, 2, 1));
  39.             // 底部4顶点
  40.             geometry.vertices.push(new THREE.Vector3(-2, 0, -2));
  41.             geometry.vertices.push(new THREE.Vector3(2, 0, -2));
  42.             geometry.vertices.push(new THREE.Vector3(2, 0, 2));
  43.             geometry.vertices.push(new THREE.Vector3(-2, 0, 2));
  44.  
  45.             // 设置顶点连接情况
  46.             // 顶面
  47.             geometry.faces.push(new THREE.Face3(0, 1, 3));
  48.             geometry.faces.push(new THREE.Face3(1, 2, 3));
  49. //          geometry.faces.push(new THREE.Face4(0, 1, 2, 3));
  50.             // 底面
  51.             geometry.faces.push(new THREE.Face3(4, 5, 6));
  52.             geometry.faces.push(new THREE.Face3(5, 6, 7));
  53. //          geometry.faces.push(new THREE.Face4(4, 5, 6, 7));
  54.             // 侧面
  55.             geometry.faces.push(new THREE.Face3(1, 5, 6));
  56.             geometry.faces.push(new THREE.Face3(6, 2, 1));
  57.             geometry.faces.push(new THREE.Face3(2, 6, 7));
  58.             geometry.faces.push(new THREE.Face3(7, 3, 2));
  59.             geometry.faces.push(new THREE.Face3(3, 7, 0));
  60.             geometry.faces.push(new THREE.Face3(7, 4, 0));
  61.             geometry.faces.push(new THREE.Face3(0, 4, 5));
  62.             geometry.faces.push(new THREE.Face3(0, 5, 1));
  63. //            // 四个顶点组成的面
  64. //            geometry.faces.push(new THREE.Face4(0, 1, 5, 4));
  65. //            geometry.faces.push(new THREE.Face4(1, 2, 6, 5));
  66. //            geometry.faces.push(new THREE.Face4(2, 3, 7, 6));
  67. //            geometry.faces.push(new THREE.Face4(3, 0, 4, 7));
  68.  
  69.             var mesh = new THREE.Mesh(geometry, material);
  70.             scene.add(mesh);
  71.  
  72.             // render
  73.             renderer.render(scene, camera);
  74.         }
  75.     </script>
  76. </html>

　　需要注意的是，new THREE.Vector3(-1, 2, -1)创建一个矢量，作为顶点位置追加到geometry.vertices数组中。

　　而由new THREE.Face3(0, 1, 2)创建一个三个顶点组成的面，追加到geometry.faces数组中。三个参数分别是三个顶点在geometry.vertices中的序号。如果需要设置由四个顶点组成的面片，可以类似地使用THREE.Face4。

  1. //顶面
  2. geometry.faces.push(new THREE.Face4(0, 1, 2, 3));
  3. //底面
  4. geometry.faces.push(new THREE.Face4(4, 5, 6, 7));
  5. //四个侧面
  6. geometry.faces.push(new THREE.Face4(0, 1, 5, 4));
  7. geometry.faces.push(new THREE.Face4(1, 2, 6, 5));
  8. geometry.faces.push(new THREE.Face4(2, 3, 7, 6));
  9. geometry.faces.push(new THREE.Face4(3, 0, 4, 7));

整理自张雯莉《Three.js入门指南》

其他参考：THREE.JS中常用的3种材质

上一篇：其他几何形状

Three.js基础探寻六——文字形状与自定义形状的更多相关文章

  1. Three.js基础探寻二——正交投影照相机

    本篇主要介绍照相机中的正交投影照相机. 第一篇传送门:Three.js基础探寻一 1.照相机 图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机 ...

  2. Three.js基础探寻一

    1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了webGL以外,Three.js还提供了基于Canvas.SV ...

  3. Three.js基础探寻五——正二十面体、圆环面等

    除了立方体.平面.球体,Three.js还提供了很多其他几何形状. 1.圆形 CircleGeometry可以创建圆形或者扇形: THREE.CircleGeometry(radius, segmen ...

  4. Three.js基础探寻九——网格

    在学习了几何形状和材质之后,我们就能使用他们来创建物体了.最常用的一种物体就是网格(Mesh),网格是由顶点.边.面等组成的物体:其他物体包括线段(Line).骨骼(Bone).粒子系统(Partic ...

  5. Three.js基础探寻四——立方体、平面与球体

    前面简单介绍了webGL和Three.js的背景以及照相机的设定,接下来介绍一些Three.js中的几何形状. 1.立方体 虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也 ...

  6. Three.js基础探寻八——法向材质与材质的纹理贴图

    4.法向材质 法向材质可以将材质的颜色设置为其法向量的方向,有时候对于调试很有帮助. 法向材质的设定很简单,甚至不用设置任何参数: new THREE.MeshNormalMaterial() 材质的 ...

  7. Three.js基础探寻十——动画

    本篇将介绍如果使用Three.js进行动态画面的渲染.此外,将会介绍一个Three.js作者写的另外一个库stat.js,用来观测每秒帧数(FPS). 1.实现动画效果 1.1 动画原理 对于Thre ...

  8. [妙味JS基础]第六课：作用域、JS预解析机制

    知识点总结 浏览器的解析方法 script 全局变量,全局函数 自上而下 函数 由里到外 "JS的解析器": 1)“找一些东西”:var function 参数 var a=未定义 ...

  9. Three.js基础探寻三——透视投影照相机

    本篇主要介绍Three.js照相机中的透视投影照相机. 上一篇:正交投影照相机 5.透视投影照相机构造函数 透视投影照相机(Perspective Camera)的构造函数是: THREE.Persp ...

随机推荐

  1. php整理

    linux上安装php配套环境有些繁琐 推荐使用一键安装: https://lnmp.org/install.html phalcon框架环境: centos7下php7.0.x安装phalcon框架

  2. 「PLC」PLC的硬件与工作原理

  3. P3620 [APIO/CTSC 2007]数据备份

    P3620 [APIO/CTSC 2007]数据备份 题目描述 你在一家 IT 公司为大型写字楼或办公楼(offices)的计算机数据做备份.然而数据备份的工作是枯燥乏味的,因此你想设计一个系统让不同 ...

  4. UITableView .grouped 类型去除顶部间距

    在设置 UITableView 的 style 为 .grouped 类型的时候,发现第一个 cell 的顶部存在大段的间距,而改为 .plain 类型则没有这个间距,效果如下: 设置了 conten ...

  5. DialogFragment 将数据传回Activity的onActivityResult方法

    在MyActivity中 弹出一个DialogFragment (某一个控件的点击事件) search= findViewById(R.id.search); search.setOnClickLis ...

  6. [ERROR] Too many connections 尚未解决

    [ERROR] - com.alibaba.druid.support.logging.Log4j2Impl.error(Log4j2Impl.java:53) - create connection ...

  7. 【BZOJ】1597 [Usaco2008 Mar]土地购买

    [算法]DP+斜率优化 [题意]n(n≤50000)块土地,长ai宽bi,可分组购买,每组代价为max(ai)*max(bi),求最小代价. [题解] 斜率优化:http://www.cnblogs. ...

  8. phpcms直接取子栏目的内容、调用点击量的方法

    子栏目里面的内容可以直接取,而不需要通过循环. {$CATEGORYS[$catid][catname]}//取子栏目的栏目名称 {$CATEGORYS[$catid][image]}//取子栏目的栏 ...

  9. C语言实现线性表(链式存储方式)

    #include <stdio.h> #include <stdlib.h> //提供malloc()原型 typedef struct LNode *List; typede ...

  10. JS中短路运算符&&和||

    在JS函数中我们经常会使用到短路运算符,主要是逻辑与(&&) 和 逻辑或(||) 1.逻辑与 && 的运算方式 var a = 5 && 6; cons ...