1.立方體
雖然這一形狀的名字叫立方體（CubeGeometry），但它其實(shí)是長(zhǎng)方體，也就是長(zhǎng)寬高可以設(shè)置為不同的值。其構(gòu)造函數(shù)是：
THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments)
width：x方向上的長(zhǎng)度
height：y方向上的長(zhǎng)度
depth：z方向上的長(zhǎng)度
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)位置是原點(diǎn)，對(duì)于立方體而言，是其幾何中心在原點(diǎn)的位置。
分段：
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3, 2, 2, 3), material);
為什么會(huì)有這么多邪線呢？版本問題。R73版本：
注意這個(gè)分段是對(duì)六個(gè)面進(jìn)行分段，而不是對(duì)立方體的體素分段，因此在立方體的中間是不分段的，只有六個(gè)側(cè)面被分段。
2.平面
這里的平面（PlaneGeometry）其實(shí)是一個(gè)長(zhǎng)方形，而不是數(shù)學(xué)意義上無限大小的平面。其構(gòu)造函數(shù)為：
THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
width：x方向上的長(zhǎng)度
height：y方向上的長(zhǎng)度
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)建一個(gè)半徑為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)的效果：
在圖形底層的實(shí)現(xiàn)中，并沒有曲線的概念，曲線都是由多個(gè)折線近似構(gòu)成的。對(duì)于球體而言，當(dāng)這兩個(gè)值較大的時(shí)候，形成的多面體就可以近似看做是球體了。
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意味著對(duì)于經(jīng)度從Math.PI / 6跨過Math.PI / 3的區(qū)域內(nèi)劃分為8塊，而不是整個(gè)球體的經(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測(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> <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í)之幾何形狀的全部?jī)?nèi)容，小編陸續(xù)還會(huì)更新關(guān)于Three.js的文章，請(qǐng)大家繼續(xù)關(guān)注武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
