腳本之家服務(wù)器常用軟件

快捷導航

軟件下載

android MAC 驅(qū)動下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

Three.js學習之文字形狀及自定義形狀

更新時間：2016年08月01日 16:51:57 投稿：daisy

今天小編帶大家學習的是Three.js的文字形狀與自定義形狀，文章內(nèi)容很詳細，對大家學習Three.js或許有幫助，下面一起來看看吧。

1.文字形狀

　　說起3d文字想起了早年word里的一些藝術(shù)字：

　　那么TextGeometry可以用來創(chuàng)建三維的文字形狀。

　　使用文字形狀需要下載和引用額外的字體庫。這里，我們以 helvetiker字體為例。

引用：

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

　　TextGeometry的構(gòu)造函數(shù)是：

THREE.TextGeometry(text, parameters)

　　text是文字字符串；

　　parameters是以下參數(shù)組成的對象：

　　　　· size：字號大小，一般為大寫字母的高度

　　　　· height：文字的厚度

　　　　· curveSegments：弧線分段數(shù)，使得文字的曲線更加光滑

　　　　· font：字體，默認是'helvetiker'，需對應(yīng)引用的字體文件

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

　　　　· style：值為'normal'或'italics'，表示是否斜體

　　　　· bevelEnabled：布爾值，是否使用倒角，意為在邊緣處斜切

　　　　· bevelThickness：倒角厚度

　　　　· bevelSize：倒角寬度

　　創(chuàng)建一個三維文字：new THREE.TextGeometry('Hello', {size: 1, height: 1})，其效果為：

　　可以適當調(diào)整材質(zhì)和光照以達到期望效果：

//金屬發(fā)亮物體
var material = new THREE.MeshPhongMaterial({  
  color: 0xffff00,
  specular:0xffff00,  
  //指定該材質(zhì)的光亮程度及其高光部分的顏色，如果設(shè)置成和color屬性相同的顏色，則會得到另一個更加類似金屬的材質(zhì)，如果設(shè)置成grey灰色，則看起來像塑料
  shininess:0    
  //指定高光部分的亮度，默認值為30
});
        
//方向光
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(-5, 10, 5);
scene.add(light);

　　源碼：

<!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
//       });
        //金屬發(fā)亮物體
        var material = new THREE.MeshPhongMaterial({  
          color: 0xffff00,
          specular:0xffff00,  
          //指定該材質(zhì)的光亮程度及其高光部分的顏色，如果設(shè)置成和color屬性相同的顏色，則會得到另一個更加類似金屬的材質(zhì)，如果設(shè)置成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沒有提供的形狀，可以提供自定義形狀來創(chuàng)建。

　　由于自定義形狀需要手動指定每個頂點位置，以及頂點連接情況，如果該形狀非常復雜，程序員的計算量就會比較大。在這種情況下，建議在3ds Max之類的建模軟件中創(chuàng)建模型，然后使用Three.js導入到場景中，這樣會更高效方便。

　　自定義形狀使用的是Geometry類，它是其他如CubeGeometry、SphereGeometry等幾何形狀的父類，其構(gòu)造函數(shù)是：

THREE.Geometry()

　　初始化一個幾何形狀，然后設(shè)置頂點位置以及頂點連接情況：

　　源碼：

<!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();
      
      // 設(shè)置頂點位置
      // 頂部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));
      
      // 設(shè)置頂點連接情況
      // 頂面
      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));
      // 側(cè)面
      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)創(chuàng)建一個矢量，作為頂點位置追加到geometry.vertices數(shù)組中。

　　而由new THREE.Face3(0, 1, 2)創(chuàng)建一個三個頂點組成的面，追加到geometry.faces數(shù)組中。三個參數(shù)分別是三個頂點在geometry.vertices中的序號。如果需要設(shè)置由四個頂點組成的面片，可以類似地使用THREE.Face4。

//頂面
geometry.faces.push(new THREE.Face4(0, 1, 2, 3));
//底面
geometry.faces.push(new THREE.Face4(4, 5, 6, 7));
//四個側(cè)面
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));