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

快捷導(dǎo)航

Three.js學(xué)習(xí)之幾何形狀

更新時間：2016年08月01日 11:08:12 投稿：daisy

本文利用實例代碼詳細(xì)介紹了一些Three.js中的幾何形狀的實現(xiàn)過程，包括立方體、平面與球體，有需要的朋友們可以學(xué)習(xí)下。

1.立方體

　　雖然這一形狀的名字叫立方體（CubeGeometry），但它其實是長方體，也就是長寬高可以設(shè)置為不同的值。其構(gòu)造函數(shù)是：

THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments)

　　width：x方向上的長度

　　height：y方向上的長度

　　depth：z方向上的長度

　　widthSegments：x方向上的分段數(shù)（可選，缺省值1）

　　heightSegments：y方向上的分段數(shù)（同上）

　　depthSegments：z方向上的分段數(shù)（同上）

　　未分段：

var material = new THREE.MeshBasicMaterial({

　　color: 0xffff00,

　　wireframe: true

});

drawCube(scene, material);

function drawCube(scene, material) {

　　var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3), material);

　　scene.add(cube);

}

　　物體的默認(rèn)位置是原點，對于立方體而言，是其幾何中心在原點的位置。

　　分段：

var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3, 2, 2, 3), material);

　　為什么會有這么多邪線呢？版本問題。R73版本：

　　注意這個分段是對六個面進行分段，而不是對立方體的體素分段，因此在立方體的中間是不分段的，只有六個側(cè)面被分段。

2.平面

　　這里的平面（PlaneGeometry）其實是一個長方形，而不是數(shù)學(xué)意義上無限大小的平面。其構(gòu)造函數(shù)為：

THREE.PlaneGeometry(width, height, widthSegments, heightSegments)

　　width：x方向上的長度

　　height：y方向上的長度

　　widthSegments：x方向上的分段數(shù)（可選，缺省值1）

　　heightSegments：y方向上的分段數(shù)（同上）

　　new THREE.PlaneGeometry(2, 4);創(chuàng)建的平面在x軸和y軸所在平面內(nèi)，效果如下：

3.球體

　　球體（SphereGeometry）的構(gòu)造函數(shù)是：

THREE.SphereGeometry(radius,segmentsWidth,segmentsHeight,phiStart, phiLength, thetaStart, thetaLength)

// radius：半徑

// segmentsWidth：經(jīng)度上的分段數(shù)

// segmentsHeight：緯度上的分段數(shù)

// phiStart：經(jīng)度開始的弧度

// phiLength：經(jīng)度跨過的弧度

// thetaStart：緯度開始的弧度

// thetaLength：緯度跨過的弧度

　　3.1 經(jīng)緯度分段數(shù)

　　首先，我們來理解下segmentsWidth和segmentsHeight。使用var sphere = new THREE.SphereGeometry(3, 8, 6)可以創(chuàng)建一個半徑為3，經(jīng)度劃分成8份，緯度劃分成6份的球體，如下圖所示。

　　segmentsWidth相當(dāng)于經(jīng)度被切成了幾瓣，而segmentsHeight相當(dāng)于緯度被切成了幾層。

　　new THREE.SphereGeometry(3, 5, 4)的效果：

　　new THREE.SphereGeometry(3, 8, 6)的效果：

　　new THREE.SphereGeometry(3, 18, 12)的效果：

　　在圖形底層的實現(xiàn)中，并沒有曲線的概念，曲線都是由多個折線近似構(gòu)成的。對于球體而言，當(dāng)這兩個值較大的時候，形成的多面體就可以近似看做是球體了。

　　3.2 經(jīng)度弧度

　　new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3)表示起始經(jīng)度為Math.PI / 6，經(jīng)度跨度為Math.PI / 3。

效果如下：

　　注意，這里segmentsWidth為8意味著對于經(jīng)度從Math.PI / 6跨過Math.PI / 3的區(qū)域內(nèi)劃分為8塊，而不是整個球體的經(jīng)度劃分成8塊后再判斷在此經(jīng)度范圍內(nèi)的部分。

　　3.3 緯度弧度

　　緯度弧度同理。new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3)表示緯度從Math.PI / 6跨過Math.PI / 3。

效果如下：

　　new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2)的效果：

4.源碼

<!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>
  <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);
      
      // 材質(zhì)
      var material = new THREE.MeshBasicMaterial({
        color: 0xffff00,
        wireframe: true
      });
      
      drawCube(scene, material);    //立方體
//     drawPlane(scene, material);    //平面
//     drawSphere(scene, material);  //球體
      
      // render
      renderer.render(scene, camera);
    }
    
    function drawCube(scene, material) {
      var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3, 2, 2, 3), material);
      scene.add(cube);
    }
    
    function drawPlane(scene, material) {
      var plane = new THREE.Mesh(new THREE.PlaneGeometry(2, 4), material);
      scene.add(plane);
    }
    
    function drawSphere(scene, material) {
      var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 18, 12), material);
//     var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3), material);
//     var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3), material);
//      var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2), material);
      scene.add(sphere);
    }
  </script>
</html>

以上就是Three.js學(xué)習(xí)之幾何形狀的全部內(nèi)容，小編陸續(xù)還會更新關(guān)于Three.js的文章，請大家繼續(xù)關(guān)注腳本之家。

您可能感興趣的文章: