首页
所有分类
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 相关文章推荐
js查找父节点的简单方法
Jun 28 Javascript
jquery 选择器部分整理
Oct 28 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
react实现一个优雅的图片占位模块组件详解
Oct 30 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
vue递归获取父元素的元素实例
Aug 07 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
Anaconda(2) 遍历文件夹(1) key(1) python-pcl(1) 公共键(1) 历史记录(1) 数据加密(1) pycryto(1) 有序排列(1) shell脚本(1)
You might like
常用表单验证类，有了这个，一般的验证就都齐了。
2006/12/06 PHP
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
js常用代码段收集
2011/10/28 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
python保留小数位的三种实现方法
2020/01/07 Python
pytorch中图像的数据格式实例
2020/02/11 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
ORACLE十问
2015/04/20 面试题
中专生的个人自我评价
2013/12/11 职场文书
请假条标准格式规范
2014/04/10 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
个人授权委托书格式
2014/08/30 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
社会实践活动报告
2015/02/05 职场文书
小人国观后感
2015/06/11 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL
MySQL 数据 data 基本操作
2022/05/04 MySQL