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类,它是其他如CubeGeometrySphereGeometry等几何形状的父类,其构造函数是:

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的大家。

Javascript 相关文章推荐
各种常用浏览器getBoundingClientRect的解析
May 21 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
Javascript事件实例详解
Nov 06 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
node.js中的emitter.emit方法使用说明
Dec 10 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
JavaScript Array对象详解
Mar 01 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
JS自动生成动态HTML验证码页面
Jun 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
You might like
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
解决中英文字符串长度问题函数
2007/01/16 PHP
PHP教程 预定义变量
2009/10/23 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
php简单判断文本编码的方法
2015/07/30 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
django基于存储在前端的token用户认证解析
2019/08/06 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
市场营销专业自荐书
2014/06/10 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
校长师德表现自我评价
2015/03/05 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
从事会计工作年限证明
2015/06/23 职场文书
食品卫生管理制度
2015/08/06 职场文书
html5调用摄像头截图功能
2022/01/18 Javascript
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技