首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Three.js学习之文字形状及自定义形状

Posted in Javascript onAugust 01, 2016

1.文字形状

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

Three.js学习之文字形状及自定义形状

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

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

引用：

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

TextGeometry的构造函数是：

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})，其效果为：

 Three.js学习之文字形状及自定义形状

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

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

Three.js学习之文字形状及自定义形状

源码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>3.js测试六</title>
  </head>
  <body onload="init()">
    <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
  </body>
  <script type="text/javascript" src="js/three.min.js"></script>
    <!-- Find more information at https://github.com/mrdoob/three.js/tree/master/examples/fonts -->
    
    <script type="text/javascript">
      function init() {
        var renderer = new THREE.WebGLRenderer({
          canvas: document.getElementById('mainCanvas')
        });
        renderer.setClearColor(0x000000);
        var scene = new THREE.Scene();
        
        // camera
        var camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
        camera.position.set(5, 5, 20);
        camera.lookAt(new THREE.Vector3(1, 0, 0));
        scene.add(camera); 
        
//       var material = new THREE.MeshBasicMaterial({
//         color: 0xffff00,
//         wireframe: true
//       });
        //金属发亮物体
        var material = new THREE.MeshPhongMaterial({  
          color: 0xffff00,
          specular:0xffff00,  
          //指定该材质的光亮程度及其高光部分的颜色，如果设置成和color属性相同的颜色，则会得到另一个更加类似金属的材质，如果设置成grey灰色，则看起来像塑料
          shininess:0    
          //指定高光部分的亮度，默认值为30
        });
        
        //方向光
        var light = new THREE.DirectionalLight(0xffffff);
        light.position.set(-5, 10, 5);
        scene.add(light);

        // load font
        var loader = new THREE.FontLoader();
        loader.load('./helvetiker_regular.typeface.json', function(font) {
          var mesh = new THREE.Mesh(new THREE.TextGeometry('Hello', {
            font: font,
            size: 1,
            height: 1
          }), material);
          scene.add(mesh);
          
          // render
          renderer.render(scene, camera);
        });
      }
      
    </script>
</html>

2.自定义形状

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

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

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

THREE.Geometry()

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

 Three.js学习之文字形状及自定义形状

源码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>3.js测试六-二</title>
  </head>
  <body onload="init()">
    <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
  </body>
  <script type="text/javascript" src="js/three.js"></script> 
  <script type="text/javascript">
    function init() {
      var renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById('mainCanvas')
      });
      renderer.setClearColor(0x000000);
      var scene = new THREE.Scene();
      
      // camera
      var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
      camera.position.set(25, 25, 25);
      camera.lookAt(new THREE.Vector3(0, 0, 0));
      scene.add(camera);
      
      var material = new THREE.MeshBasicMaterial({
        color: 0xffff00,
        wireframe: true
      });
      
      // 初始化几何形状
      var geometry = new THREE.Geometry();
      
      // 设置顶点位置
      // 顶部4顶点
      geometry.vertices.push(new THREE.Vector3(-1, 2, -1));
      geometry.vertices.push(new THREE.Vector3(1, 2, -1));
      geometry.vertices.push(new THREE.Vector3(1, 2, 1));
      geometry.vertices.push(new THREE.Vector3(-1, 2, 1));
      // 底部4顶点
      geometry.vertices.push(new THREE.Vector3(-2, 0, -2));
      geometry.vertices.push(new THREE.Vector3(2, 0, -2));
      geometry.vertices.push(new THREE.Vector3(2, 0, 2));
      geometry.vertices.push(new THREE.Vector3(-2, 0, 2));
      
      // 设置顶点连接情况
      // 顶面
      geometry.faces.push(new THREE.Face3(0, 1, 3));
      geometry.faces.push(new THREE.Face3(1, 2, 3));
//     geometry.faces.push(new THREE.Face4(0, 1, 2, 3));
      // 底面
      geometry.faces.push(new THREE.Face3(4, 5, 6));
      geometry.faces.push(new THREE.Face3(5, 6, 7));
//     geometry.faces.push(new THREE.Face4(4, 5, 6, 7));
      // 侧面
      geometry.faces.push(new THREE.Face3(1, 5, 6));
      geometry.faces.push(new THREE.Face3(6, 2, 1));
      geometry.faces.push(new THREE.Face3(2, 6, 7));
      geometry.faces.push(new THREE.Face3(7, 3, 2));
      geometry.faces.push(new THREE.Face3(3, 7, 0));
      geometry.faces.push(new THREE.Face3(7, 4, 0));
      geometry.faces.push(new THREE.Face3(0, 4, 5));
      geometry.faces.push(new THREE.Face3(0, 5, 1));
//      // 四个顶点组成的面
//      geometry.faces.push(new THREE.Face4(0, 1, 5, 4)); 
//      geometry.faces.push(new THREE.Face4(1, 2, 6, 5)); 
//      geometry.faces.push(new THREE.Face4(2, 3, 7, 6)); 
//      geometry.faces.push(new THREE.Face4(3, 0, 4, 7));
      
      var mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
      
      // render
      renderer.render(scene, camera);
    }
  </script>
</html>

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

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

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

Three.js学习之文字形状及自定义形状

以上就是小编为大家整理的Three.js学习之文字形状及自定义形状的全部内容，之前小编也整理了几篇关于Three.js的相关文章，有需要的可以通过下面相关文章的链接查看，希望能帮到学习Three.js的大家。

Three.js学习之文字形状及自定义形状

- Author -

daisy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
关于jquery css的使用介绍
Apr 18 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 Javascript
JavaScript实现简单的音乐播放器
Aug 14 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 #Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 #Javascript
基于原生JS实现图片裁剪
Aug 01 #Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 #Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 #Javascript
AngularJS基础 ng-if 指令用法
Aug 01 #Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 #Javascript
ICF-SW7600GR(1) 山进(2) 飞利浦(2) D1875(1) 德生PL330(2) PHILIPS(3) 德劲1103(3) D1835(1) L4X25T(1) 德生9700DX(1)
You might like
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
详谈PHP编码转换问题
2015/07/28 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
php+webSoket实现聊天室示例代码（附源码）
2017/02/17 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
javascript 对象的定义方法
2007/01/10 Javascript
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
JQuery select（下拉框）操作方法汇总
2015/04/15 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
JavaScript如何实现跨域请求
2016/08/05 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
Python字符串格式化输出方法分析
2016/04/13 Python
python字符串的常用操作方法小结
2016/05/21 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
如何获取Python简单for循环索引
2019/11/21 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
原装进口全世界：天猫国际
2016/08/03 全球购物
Herschel Supply Co.美国：背包、手提袋及配件
2020/11/24 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
地下停车场租赁协议范本
2014/10/07 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
读《茶花女》有感：山茶花的盛开与凋零
2020/01/17 职场文书
Python pygame实现中国象棋单机版源码
2021/06/20 Python
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript