常用幾何體概念

所有幾何體的基類分為Geometry和BufferGeometry兩大類，兩類幾何體直接可以相互轉化。
注：以下所有示例材質（材質的具體概念下次再講）選用均建議用如下：

//第一個參數是幾何體顏色  第二個為網格 線框展示 圖形容易觀察
const material = new THREE.MeshBasicMaterial({ color: 0x8B4C39,wireframe: true });
  • 立方几何體（BoxGeometry）
構造器
BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)
width — X軸上面的寬度
height — Y軸上面的高度
depth — Z軸上面的深度
widthSegments — （可選）寬度的分段數，默認值是1。
heightSegments — （可選）寬度的分段數，默認值是1。
depthSegments — （可選）寬度的分段數，默認值是1。
new THREE.BoxGeometry( 1, 1, 1 );
  • 圓柱幾何體（CylinderGeometry）
//構造器
CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
radiusTop — 圓柱的頂部半徑，默認值是1。
radiusBottom — 圓柱的底部半徑，默認值是1。
height — 圓柱的高度，默認值是1。
radialSegments — 圓柱側面周圍的分段數，默認為8。
heightSegments — 圓柱側面沿着其高度的分段數，默認值為1。
openEnded — 一個Boolean值，指明該圓錐的底面是開放的還是封頂的。默認值為false，即其底面默認是封頂的。
thetaStart — 第一個分段的起始角度，默認為0。（three o'clock position）
thetaLength — 圓柱底面圓扇區的中心角，通常被稱為“θ”（西塔）。默認值是2*Pi，這使其成為一個完整的圓柱。
new THREE.CylinderGeometry( 5, 5, 20, 32 );
  • 球幾何體（SphereGeometry）
//構造器
SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)
radius — 球體半徑，默認為1。
widthSegments — 水平分段數（沿着經線分段），最小值為3，默認值為8。
heightSegments — 垂直分段數（沿着緯線分段），最小值為2，默認值為6。
phiStart — 指定水平（經線）起始角度，默認值為0。。
phiLength — 指定水平（經線）掃描角度的大小，默認值為 Math.PI * 2。
thetaStart — 指定垂直（緯線）起始角度，默認值為0。
thetaLength — 指定垂直（緯線）掃描角度大小，默認值為 Math.PI。
該幾何體是通過掃描並計算圍繞着Y軸（水平掃描）和X軸（垂直掃描）的頂點來創建的。 因此，不完整的球體（類似球形切片）可以通過為phiStart，phiLength，thetaStart和thetaLength設置不同的值來創建， 以定義我們開始（或結束）計算這些頂點的起點（或終點）。
new THREE.SphereGeometry( 5, 32, 32 )
  • 圓錐幾何體（ConeGeometry）
ConeGeometry(radius : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
radius — 圓錐底部的半徑，默認值為1。
height — 圓錐的高度，默認值為1。
radialSegments — 圓錐側面周圍的分段數，默認為8。
heightSegments — 圓錐側面沿着其高度的分段數，默認值為1。
openEnded — 一個Boolean值，指明該圓錐的底面是開放的還是封頂的。默認值為false，即其底面默認是封頂的。
thetaStart — 第一個分段的起始角度，默認為0。（three o'clock position）
thetaLength — 圓錐底面圓扇區的中心角，通常被稱為“θ”（西塔）。默認值是2*Pi，這使其成為一個完整的圓錐。
new THREE.ConeGeometry( 5, 20, 32 )

演示代碼

注：演示代碼中只需替換initObject()中的東西即可，更改幾何體形狀，替換對應的構造器就可以

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 100%;
                height: 800px;
                background-color: white;
            }

        </style>
    <script src="./js/three.js"></script>
      <!-- 常用相機控制器，依賴文件目錄 three.js\examples\js\controls -->
    <script  src="./js/OrbitControls.js"></script>
</head>
<body>
    <body onload="threeStart();">
        <div id="canvas-frame"></div>
    </body>

    <script>
        var axesHelper;
        var renderer;
        var scene;
        var camera;
        var orbitcontrols;
        init();
        function init(){
            //初始化座標系
            axesHelper = new THREE.AxesHelper( 10000 );
            axesHelper.position.y = 0;
            // 初始化渲染器
            let width = document.getElementById('canvas-frame').clientWidth;
            let height = document.getElementById('canvas-frame').clientHeight;
            renderer = new THREE.WebGLRenderer({
                antialias : true
            });
            renderer.setSize(width, height);
            document.getElementById('canvas-frame').appendChild(renderer.domElement);
            renderer.setClearColor(0xFFFFFF, 1.0);
            // 初始化場景
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0XFFFFFF);
            //場景添加座標系
            scene.add( axesHelper);
            //初始化相機
            camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
            camera.position.set(0,15,0);
            camera.up.set(0,1,0)
            camera.lookAt(0, 0, 0)
            //初始化引擎控制
            orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement);
            orbitcontrols.rotateSpeed = -0.25;
            initObject() ;
        }
        function initObject() {
            //BoxGeometry(1, 50, 50) 立方體 
            //CylinderGeometry( 5, 5, 20, 32 ) 圓柱體
            //ConeGeometry( 5, 20, 32 ) 圓錐體
            //SphereGeometry( 5, 50, 50 ) 球體
            const geometry = new  THREE.BoxGeometry( 5, 50, 50 ); //幾何體 直接替換上述幾何體就可以看到不同的畫面
            const material = new THREE.MeshBasicMaterial({ color: 0x8B4C39,wireframe: true }); //材質
            var cube = new THREE.Mesh(geometry,material)
            scene.add(cube);
     }
        function threeStart() {
                renderer.clear();
                requestAnimationFrame( threeStart );
                orbitcontrols.update(); // required when damping is enabled
                renderer.render( scene, camera );
            }
    </script>
</body>
</html>