Three.js學(xué)習(xí)之文字形狀及自定義形狀

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

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

1.文字形狀

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

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

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

引用：

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

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

THREE.TextGeometry(text, parameters)

　　text是文字字符串；

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

　　　　· size：字號(hào)大小，一般為大寫字母的高度

　　　　· height：文字的厚度

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

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

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

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

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

　　　　· bevelThickness：倒角厚度

　　　　· bevelSize：倒角寬度

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

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

//金屬發(fā)亮物體
var material = new THREE.MeshPhongMaterial({  
  color: 0xffff00,
  specular:0xffff00,  
  //指定該材質(zhì)的光亮程度及其高光部分的顏色，如果設(shè)置成和color屬性相同的顏色，則會(huì)得到另一個(gè)更加類似金屬的材質(zhì)，如果設(shè)置成grey灰色，則看起來(lái)像塑料
  shininess:0    
  //指定高光部分的亮度，默認(rèn)值為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測(cè)試六</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屬性相同的顏色，則會(huì)得到另一個(gè)更加類似金屬的材質(zhì)，如果設(shè)置成grey灰色，則看起來(lái)像塑料
          shininess:0    
          //指定高光部分的亮度，默認(rèn)值為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.自定義形狀

　　對(duì)于Three.js沒(méi)有提供的形狀，可以提供自定義形狀來(lái)創(chuàng)建。

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

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

THREE.Geometry()

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

　　源碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>3.js測(cè)試六-二</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è)置頂點(diǎn)位置
      // 頂部4頂點(diǎn)
      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頂點(diǎn)
      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è)置頂點(diǎn)連接情況
      // 頂面
      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));
//      // 四個(gè)頂點(diǎn)組成的面
//      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)建一個(gè)矢量，作為頂點(diǎn)位置追加到geometry.vertices數(shù)組中。

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

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

以上就是小編為大家整理的Three.js學(xué)習(xí)之文字形狀及自定義形狀的全部?jī)?nèi)容，之前小編也整理了幾篇關(guān)于Three.js的相關(guān)文章，有需要的可以通過(guò)下面相關(guān)文章的鏈接查看，希望能幫到學(xué)習(xí)Three.js的大家。

您可能感興趣的文章: