首页
所有分类
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 相关文章推荐
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
js函数调用常用方法详解
Dec 03 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
JavaScript表单验证实现代码
May 22 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
Vue实现简易购物车页面
Dec 30 Vue.js
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
有序排列(1) pycryto(1) 数据加密(1) shell脚本(1) key(1) python-pcl(1) 遍历文件夹(1) kafka(2) Anaconda(2) 公共键(1)
You might like
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
python的多重继承的理解
2017/08/06 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
美体小铺加拿大官方网站：The Body Shop加拿大
2016/10/30 全球购物
Topshop法国官网：英国快速时尚品牌
2018/04/08 全球购物
工程质量承诺书
2014/03/27 职场文书
实习推荐信
2014/05/10 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
入党函调证明材料
2015/06/19 职场文书
公司职员入党自传书
2015/06/26 职场文书
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers