Three.js開發指南---學習使用幾何體（第五章）

時間 2019-12-11

標籤 three.js 開發指南學習使用幾何體第五欄目 JavaScript 简体版

原文原文鏈接

一基礎幾何體javascript

　　1 二維圖形：二維圖形都是基於x和y軸構建的，即展現的形式就是他們都是「直立」的，若是但願這些二維圖形躺下，則須要將幾何體沿着x軸向後旋轉1/4圈html

mesh.rotation.x=-Math.PI/2;java

　　1.1 PlaneGeometry：平面幾何體 new THREE.PlaneGeometry(width,height,widthSegments,heightSegments)web

<!DOCTYPE html>

<html>

<head>
    <title>Example 05.01 - Basic 2D geometries - Plane</title>
    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        //var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMapEnabled = true;
        
        //寬 高，寬度分爲幾段，長度分爲幾段
        var plane = createMesh(new THREE.PlaneGeometry(10, 14, 4, 4));
        // add the sphere to the scene
        scene.add(plane);

        // position and point the camera to the center of the scene
        camera.position.x = -20;
        camera.position.y = 30;
        camera.position.z = 40;
        camera.lookAt(new THREE.Vector3(10, 0, 0));


        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        scene.add(spotLight);

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

        // call the render function
        var step = 0;


        // setup the control gui
        var controls = new function () {
            // we need the first child, since it's a multimaterial

            //初始控制器的寬和高展現的是上面咱們new THREE.Plane的寬和高
            //因此咱們使用對象plane來獲取其寬和高以及寬度的段數和高度的段數
            this.width = plane.children[0].geometry.parameters.width; this.height = plane.children[0].geometry.parameters.height; this.widthSegments = plane.children[0].geometry.parameters.widthSegments; this.heightSegments = plane.children[0].geometry.parameters.heightSegments; this.redraw = function () {
                // remove the old plane
                scene.remove(plane);
                // create a new one
                plane = createMesh(new THREE.PlaneGeometry(controls.width, controls.height, Math.round(controls.widthSegments), Math.round(controls.heightSegments)));
                // add it to the scene.
                scene.add(plane);
            };
        };

        var gui = new dat.GUI();
        gui.add(controls, 'width', 0, 40).onChange(controls.redraw);
        gui.add(controls, 'height', 0, 40).onChange(controls.redraw);
        gui.add(controls, 'widthSegments', 0, 10).onChange(controls.redraw);
        gui.add(controls, 'heightSegments', 0, 10).onChange(controls.redraw);
        render();

        function createMesh(geom) {

            // 生成一個法向量材質
            var meshMaterial = new THREE.MeshNormalMaterial();  //幾何體的兩面都應用該材質
 meshMaterial.side = THREE.DoubleSide; //生成一個基礎材質，即賦予幾何體一種簡單的顏色或者線框
            var wireFrameMat = new THREE.MeshBasicMaterial(); //看來基礎材質在此處的做用是線框
 wireFrameMat.wireframe = true; // create a multimaterial
            //一種幾何體應用多種材質THREE.SceneUtils.createMultiMaterialObject
            var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);

            return plane;
        }

        function render() {
            //stats.update();

            plane.rotation.y = step += 0.01;

            // render using requestAnimationFrame
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }

        
    }
    window.onload = init;
</script>
</body>
</html>

1.2 CircleGeometry：二維圓/部分圓：new THREE.CircleGeometry(radius,segment,thetaStart開始角度,thetaLength角度)數組

<!DOCTYPE html>

<html>

<head>
    <title>Example 05.02 - Basic 2D geometries - Circle</title>
    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMapEnabled = true;

        var circle = createMesh(new THREE.CircleGeometry(4, 10, 0, Math.PI * 2));
        // add the sphere to the scene
        scene.add(circle);

        // position and point the camera to the center of the scene
        camera.position.x = -20;
        camera.position.y = 30;
        camera.position.z = 40;
        camera.lookAt(new THREE.Vector3(10, 0, 0));


        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        scene.add(spotLight);

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

        // call the render function
        var step = 0;


        // setup the control gui
        var controls = new function () {
            // we need the first child, since it's a multimaterial


            //console.log(circle.children[0].geometry);
           this.radius =circle.children[0].geometry.parameters.radius; this.thetaStart =circle.children[0].geometry.parameters.thetaStart; this.thetaLength =circle.children[0].geometry.parameters.thetaLength; this.segments =circle.children[0].geometry.parameters.segments; this.redraw = function () {
                // remove the old plane
                scene.remove(circle);
                // create a new one
                circle = createMesh(new THREE.CircleGeometry(controls.radius, controls.segments, controls.thetaStart, controls.thetaLength));
                // add it to the scene.
                
                scene.add(circle);
            };
        };

        var gui = new dat.GUI();
        gui.add(controls, 'radius', 0, 40).onChange(controls.redraw);
        gui.add(controls, 'segments', 0, 40).onChange(controls.redraw);
        gui.add(controls, 'thetaStart', 0, 2 * Math.PI).onChange(controls.redraw);
        gui.add(controls, 'thetaLength', 0, 2 * Math.PI).onChange(controls.redraw);
        render();

        function createMesh(geom) {

            // assign two materials
            var meshMaterial = new THREE.MeshNormalMaterial();
            meshMaterial.side = THREE.DoubleSide;
            var wireFrameMat = new THREE.MeshBasicMaterial();
            wireFrameMat.wireframe = true;

            // create a multimaterial
            var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
            
            //將該二維圓形「放倒」
 mesh.rotation.x=-Math.PI/2
            return mesh;
        }

        function render() {
            stats.update();

            circle.rotation.y = step += 0.01;

            // render using requestAnimationFrame
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init;
</script>
</body>
</html>

　　1.3 塑形平面：ShapeGeometryapp

　　使用ShapeGeometry定製圖形，必須使用shape的繪製函數，下面咱們先介紹一下繪製函數dom

Shape對象（注意與ShapGeometry對象的區別）的繪圖函數ide

函數名稱	描述
moveTo	將繪圖點移動到某個位置
lineTo	/從當前位置繪製一條直線到指定的x，y處
quadraticCurveTo(acPx,acPy)	二次曲線
bezierCurveTo(acPx1,acPy1,acPx2,acPy2,x,y)	貝塞爾曲線
splineThru(數組集合)	沿着所給定的點，繪製一條光滑的曲線，參數是一個THREE.Vector2的數組
arc(ax,ay,aRdius,aStartAngle,aEndAngle,aClockwise)函數	ax,ay用來指定圓心與當前位置之間的偏移量，ui aRadius半徑， aStartAngle,aEndAngle開始與結束的弧長，以及aClockwise順/逆時針
makeGeometry	該函數從Shape對象返回一個ShapeGeometry對象
createPointsGeometry(divisions)	將圖形轉換爲一個點集，參數爲返回點的數量，該值越高，返回的點越多，再次繪製圖形時曲線越光滑參數divisions會分別應用到路徑的每個部分
createSpacedPointsGeometry(divisions)	與createPointsGeometry函數功能相同，可是該方法的參數會一次性的應用到整個路徑上

<!DOCTYPE html>

<html>

<head>
    <title>Example 05.03 - Basic 2D geometries - Shape</title>
    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMapEnabled = true;
        var shape=drawShape();//此處返回的是Shape對象
        var shapeGeo=new THREE.ShapeGeometry(shape);//Shape對象是做爲參數傳遞給ShapeGeometry對象的構造函數的
        var shapeMesh = createMesh(shapeGeo);//幾何體與材質相結合生成一個網格
        // add the sphere to the scene
        scene.add(shapeMesh);//將網格追加到場景中

        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 70;
        camera.position.z = 70;
        camera.lookAt(new THREE.Vector3(10, 0, 0));


        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        scene.add(spotLight);

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

        // call the render function
        var step = 0;


        // setup the control gui
        var controls = new function () {

            this.asGeom = function () {
                // remove the old plane
                scene.remove(shapeMesh);
                // create a new one
　　　　　　//注意shape，shapGeometry的關係
                var shape=drawShape(); var shapeGeo=new THREE.ShapeGeometry(shape); shapeMesh = createMesh(shapeGeo); // add it to the scene.  scene.add(shapeMesh);
            };

            this.asPoints = function () {
                // remove the old plane
                scene.remove(shapeMesh);
                // create a new one
                var 
                shapeMesh = createLine(drawShape(), false);
                // add it to the scene.
                scene.add(shapeMesh);
            };

            this.asSpacedPoints = function () {
                // remove the old plane
                scene.remove(shapeMesh);
                // create a new one
                shapeMesh = createLine(drawShape(), true);
                // add it to the scene.
                scene.add(shapeMesh);
            };
        };

        var gui = new dat.GUI();
        gui.add(controls, 'asGeom');
        gui.add(controls, 'asPoints');
        gui.add(controls, 'asSpacedPoints');


        render();

        function drawShape() {

            // create a basic shape
            var shape = new THREE.Shape(); // startpoint開始的點
            shape.moveTo(10, 10);

            // straight line upwards 沿着開始點畫直線
            shape.lineTo(10, 40);

            // the top of the figure, curve to the right 繪製貝塞爾曲線
            shape.bezierCurveTo(15, 25, 25, 25, 30, 40);

            // spline back down 沿着所提供的座標集合繪製一條光滑的曲線，起始點是當前所在的位置
            shape.splineThru(
                    [new THREE.Vector2(32, 30),
                        new THREE.Vector2(28, 20),
                        new THREE.Vector2(30, 10),
                    ]);

            // curve at the bottom，繪製二次曲線
            shape.quadraticCurveTo(20, 15, 10, 10);

            // add 'eye' hole one
            var hole1 = new THREE.Path(); //繪製圓弧  hole1.absellipse(16, 24, 2, 3, 0, Math.PI * 2, true); shape.holes.push(hole1); // add 'eye hole 2'
            var hole2 = new THREE.Path();
            hole2.absellipse(23, 24, 2, 3, 0, Math.PI * 2, true);
            shape.holes.push(hole2);

            // add 'mouth'
            var hole3 = new THREE.Path();
            hole3.absarc(20, 16, 2, 0, Math.PI, true);
            shape.holes.push(hole3);

            //Shape對象的makeGeometry方法，用於返回一個幾何體
            console.log(shape.makeGeometry());
            return shape;
        }

        function createMesh(geom) {
            //console.log(geom);
            // assign two materials
            var meshMaterial = new THREE.MeshNormalMaterial();
            meshMaterial.side = THREE.DoubleSide;
            var wireFrameMat = new THREE.MeshBasicMaterial();
            wireFrameMat.wireframe = true;

            // create a multimaterial
            var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]); return mesh;
        }

        function createLine(shape, spaced) {
            console.log(shape);
            if (!spaced) {
                
                var mesh = new THREE.Line(shape.createPointsGeometry(10), new THREE.LineBasicMaterial({
                    color: 0xff3333,
                    linewidth: 2
                }));
                return mesh;
            } else {
            //three.js的該方法錯誤createSpacedPointsGeometry
                var points=shape.createSpacedPointsGeometry(3);
                var mesh = new THREE.Line(points, new THREE.LineBasicMaterial({
                    color: 0xff3333,
                    linewidth: 2
                }));
                return mesh;
            }

        }

        function render() {
            //stats.update();

            shapeMesh.rotation.y = step += 0.01;

            // render using requestAnimationFrame
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }
    }
    window.onload = init;
</script>
</body>
</html>

2、三維幾何體

　　2.1 BoxGeometry：立方體 new THREE.BoxGeometry(width,height,depth,widthSegements,heightSegements,depthSegements)

<!DOCTYPE html>

<html>

<head>
    <title>Example 05.04 - Basic 2D geometries - Cube</title>
    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMapEnabled = true;

        var cube = createMesh(new THREE.BoxGeometry(10, 10, 10, 1, 1, 1));
        // add the sphere to the scene
        scene.add(cube);

        // position and point the camera to the center of the scene
        camera.position.x = -20;
        camera.position.y = 30;
        camera.position.z = 40;
        camera.lookAt(new THREE.Vector3(10, 0, 0));


        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        scene.add(spotLight);

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

        // call the render function
        var step = 0;


        // setup the control gui
        var controls = new function () {

            this.width = cube.children[0].geometry.parameters.width;
            this.height = cube.children[0].geometry.parameters.height;
            this.depth = cube.children[0].geometry.parameters.depth;

            this.widthSegments = cube.children[0].geometry.parameters.widthSegments;
            this.heightSegments = cube.children[0].geometry.parameters.heightSegments;
            this.depthSegments = cube.children[0].geometry.parameters.depthSegments;


            this.redraw = function () {
                // remove the old plane
                scene.remove(cube);
                // create a new one
                cube = createMesh(new THREE.BoxGeometry(controls.width, controls.height, controls.depth, Math.round(controls.widthSegments), Math.round(controls.heightSegments), Math.round(controls.depthSegments)));
                // add it to the scene.
                scene.add(cube);
            };
        };

        var gui = new dat.GUI();
        gui.add(controls, 'width', 0, 40).onChange(controls.redraw);
        gui.add(controls, 'height', 0, 40).onChange(controls.redraw);
        gui.add(controls, 'depth', 0, 40).onChange(controls.redraw);
        gui.add(controls, 'widthSegments', 0, 10).onChange(controls.redraw);
        gui.add(controls, 'heightSegments', 0, 10).onChange(controls.redraw);
        gui.add(controls, 'depthSegments', 0, 10).onChange(controls.redraw);
        render();

        function createMesh(geom) {

            // assign two materials
            var meshMaterial = new THREE.MeshNormalMaterial();
            meshMaterial.side = THREE.DoubleSide;
            var wireFrameMat = new THREE.MeshBasicMaterial();
            wireFrameMat.wireframe = true;

            // create a multimaterial
            var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);

            return mesh;
        }

        function render() {
            stats.update();

            cube.rotation.y = step += 0.01;

            // render using requestAnimationFrame
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init;
</script>
</body>
</html>

　　2.2 SphereGeometry球體

　　參數：radius半徑,

　　　　widthSegements豎直方向分段,

　　　　heightSegments水平方向分段,

　　　　phiStart從x軸的什麼地方開始繪製0-2*pi,

　　　　phiLength繪製多少弧度,

　　　　thetaStart從y軸的什麼地方開始繪製,

　　　　thetaLength繪製多少弧度

<!DOCTYPE html>

<html>

<head>
    <title>Example 05.05 - Basic 3D geometries - Sphere</title>
    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMapEnabled = true;

        var sphere = createMesh(new THREE.SphereGeometry(4, 10, 10));
        // add the sphere to the scene
        scene.add(sphere);

        // position and point the camera to the center of the scene
        camera.position.x = -20;
        camera.position.y = 30;
        camera.position.z = 40;
        camera.lookAt(new THREE.Vector3(10, 0, 0));


        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

        // call the render function
        var step = 0;


        // setup the control gui
        var controls = new function () {
            // we need the first child, since it's a multimaterial
            this.radius = sphere.children[0].geometry.parameters.radius;
            this.widthSegments = sphere.children[0].geometry.parameters.widthSegments;
            this.heightSegments = sphere.children[0].geometry.parameters.heightSegments;
            this.phiStart = 0;
            this.phiLength = Math.PI * 2;
            this.thetaStart = 0;
            this.thetaLength = Math.PI;


            this.redraw = function () {
                // remove the old plane
                scene.remove(sphere);
                // create a new one
　　　　　　　　　　var r=controls.radius;
　　　　　　　　　　var ws=controls.widthSegments;
　　　　　　　　　　var hs= controls.heightSegments;
var ps=controls.phiStart;
var pl=controls.phiLength;
var ts=controls.thetaStart;
var tl=controls.thetaLength
　　　　　　　　　　var geo=new THREE.SphereGeometry(r, ws,hs , ps,pl , ts,tl )

                sphere = createMesh(geo);
                // add it to the scene.
                scene.add(sphere);
            };
        };

        var gui = new dat.GUI();
        gui.add(controls, 'radius', 0, 40).onChange(controls.redraw);
        gui.add(controls, 'widthSegments', 0, 20).onChange(controls.redraw);
        gui.add(controls, 'heightSegments', 0, 20).onChange(controls.redraw);
        gui.add(controls, 'phiStart', 0, 2 * Math.PI).onChange(controls.redraw);
        gui.add(controls, 'phiLength', 0, 2 * Math.PI).onChange(controls.redraw);
        gui.add(controls, 'thetaStart', 0, 2 * Math.PI).onChange(controls.redraw);
        gui.add(controls, 'thetaLength', 0, 2 * Math.PI).onChange(controls.redraw);


        render();

        function createMesh(geom) {

            // assign two materials
            var meshMaterial = new THREE.MeshNormalMaterial();
            meshMaterial.side = THREE.DoubleSide;
            var wireFrameMat = new THREE.MeshBasicMaterial();
            wireFrameMat.wireframe = true;

            // create a multimaterial
            var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);

            return mesh;
        }

        function render() {
            stats.update();

            sphere.rotation.y = step += 0.01;

            // render using requestAnimationFrame
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init;
</script>
</body>
</html>

　　2.3 CylinderGeometry:構建圓柱體

　　參數：radiusTop：圓柱頂部的半徑

　　　　　　radiusBottom：圓柱底部的半徑

　　　　　　height：圓柱體的高度

　　　　　　segmentsX：沿x軸，即豎向分割爲多少段

　　　　segmentsY：沿Y軸，即橫向分割爲多少段

　　　　openEnded：網格頂部和底部是否封閉

<!DOCTYPE html>

<html>

<head>
    <title>Example 05.07 - Basic 3D geometries - Cylinder</title>
    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMapEnabled = true;

        var cylinder = createMesh(new THREE.CylinderGeometry(20, 20, 20));
        // add the sphere to the scene
        scene.add(cylinder);

        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 50;
        camera.lookAt(new THREE.Vector3(10, 0, 0));

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

        // call the render function
        var step = 0;


        // setup the control gui
        var controls = new function () {
            // we need the first child, since it's a multimaterial

            this.radiusTop = 20;
            this.radiusBottom = 20;
            this.height = 20;

            this.radialSegments = 8;
            this.heightSegments = 8;

            this.openEnded = false;

            this.redraw = function () {
                // remove the old plane
                scene.remove(cylinder);
                // create a new one
              var rt=controls.radiusTop;//圓柱頂部的半徑，能夠爲負數 var rb=controls.radiusBottom;//圓柱底部的半徑 var h=controls.height;//圓柱體的高度 var rs=controls.radialSegments;//圓柱體豎向的段數 var hs=controls.heightSegments;//圓柱體橫向的段數 var oe=controls.openEnded;//圓柱體的底部和頂部是否封閉  cylinder = createMesh(new THREE.CylinderGeometry(rt, rb, h,rs , hs,oe )); // add it to the scene.
                scene.add(cylinder);
            };
        };

        var gui = new dat.GUI();
        gui.add(controls, 'radiusTop', -40, 40).onChange(controls.redraw);
        gui.add(controls, 'radiusBottom', -40, 40).onChange(controls.redraw);
        gui.add(controls, 'height', 0, 40).onChange(controls.redraw);
        gui.add(controls, 'radialSegments', 1, 20).step(1).onChange(controls.redraw);
        gui.add(controls, 'heightSegments', 1, 20).step(1).onChange(controls.redraw);
        gui.add(controls, 'openEnded').onChange(controls.redraw);


        render();

        function createMesh(geom) {

            // assign two materials
            var meshMaterial = new THREE.MeshNormalMaterial();
            meshMaterial.side = THREE.DoubleSide;
            var wireFrameMat = new THREE.MeshBasicMaterial();
            wireFrameMat.wireframe = true;

            // create a multimaterial
            var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);

            return mesh;
        }

        function render() {
            stats.update();

            cylinder.rotation.y = step += 0.01;

            // render using requestAnimationFrame
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init;
</script>
</body>
</html>

　　2.4 圓環RingGeometry:相似於甜甜圈

　　參數：radius：半徑，整個圓環的半徑

　　　　tube：圓環的半徑，注意與radius的區別

　　　　radialSegments：沿圓環長度方向分割的段數

　　　　tubularSegments：沿圓環寬度方向分割的段數

　　　　arc：繪製多少圓環，便是否爲2*pi

<!DOCTYPE html>

<html>

<head>
    <title>Example 05.09 - Basic 3D geometries - Ring</title>
    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMapEnabled = true;

        var torus = createMesh(new THREE.RingGeometry());
        // add the sphere to the scene
        scene.add(torus);

        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 50;
        camera.lookAt(new THREE.Vector3(10, 0, 0));

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

        // call the render function
        var step = 0;


        // setup the control gui
        var controls = new function () {
            // we need the first child, since it's a multimaterial

            this.innerRadius = 0;
            this.outerRadius = 50;
            this.thetaSegments = 8;
            this.phiSegments = 8;
            this.thetaStart = 0;
            this.thetaLength = Math.PI * 2;

            this.redraw = function () {
                // remove the old plane
                scene.remove(torus);
                // create a new one
                var ir=controls.innerRadius; var or=controls.outerRadius; var tseg=controls.thetaSegments; var ps=controls.phiSegments; var ts=controls.thetaStart; var tl=controls.thetaLength; torus = createMesh(new THREE.RingGeometry(ir,or ,tseg ,ps , ts, tl)); // add it to the scene.
                scene.add(torus);
            };
        };

        var gui = new dat.GUI();
        gui.add(controls, 'innerRadius', 0, 40).onChange(controls.redraw);
        gui.add(controls, 'outerRadius', 0, 100).onChange(controls.redraw);
        gui.add(controls, 'thetaSegments', 1, 40).step(1).onChange(controls.redraw);
        gui.add(controls, 'phiSegments', 1, 20).step(1).onChange(controls.redraw);
        gui.add(controls, 'thetaStart', 0, Math.PI * 2).onChange(controls.redraw);
        gui.add(controls, 'thetaLength', 0, Math.PI * 2).onChange(controls.redraw);


        render();

        function createMesh(geom) {

            // assign two materials
            var meshMaterial = new THREE.MeshNormalMaterial();
            meshMaterial.side = THREE.DoubleSide;
            var wireFrameMat = new THREE.MeshBasicMaterial();
            wireFrameMat.wireframe = true;

            // create a multimaterial
            var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);

            return mesh;
        }

        function render() {
            stats.update();

            torus.rotation.y = step += 0.01;

            // render using requestAnimationFrame
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init;
</script>
</body>
</html>

　　2.5 TorusKnotGeometry環面紐結

　　參數：radius：半徑

　　　　tube：環的實際半徑

　　　　radialSegments：沿圓環長度方向分割的段數

　　　　tubularSegments：沿圓環寬度方向分割的段數

　　　　p：多久旋轉一次

　　　　q：繞其內部旋轉多少次

　　　　heightScale：經過該屬性能夠拉伸環面紐結

<!DOCTYPE html>

<html>

<head>
    <title>Example 05.08 - Basic 3D geometries - Torusknot</title>
    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMapEnabled = true;

        var knot = createMesh(new THREE.TorusKnotGeometry(10, 1, 64, 8, 2, 3, 1));
        // add the sphere to the scene
        scene.add(knot);

        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 50;
        camera.lookAt(new THREE.Vector3(10, 0, 0));

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

        // call the render function
        var step = 0;


        // setup the control gui
        var controls = new function () {
            // we need the first child, since it's a multimaterial
            this.radius = knot.children[0].geometry.parameters.radius;
            this.tube = 0.3;
            this.radialSegments = knot.children[0].geometry.parameters.radialSegments;
            this.tubularSegments = knot.children[0].geometry.parameters.tubularSegments;
            this.p = knot.children[0].geometry.parameters.p;
            this.q = knot.children[0].geometry.parameters.q;
            this.heightScale = knot.children[0].geometry.parameters.heightScale;

            this.redraw = function () {
                // remove the old plane
                scene.remove(knot);
                // create a new one
             var r=controls.radius; var t=controls.tube; var rs=Math.round(controls.radialSegments); var ts=Math.round(controls.tubularSegments); var p=Math.round(controls.p); var q=Math.round(controls.q); var hs=controls.heightScale; knot = createMesh(new THREE.TorusKnotGeometry(r,t , rs, ts, p,q ,hs )); // add it to the scene.
                scene.add(knot);
            };
        };

        var gui = new dat.GUI();
        gui.add(controls, 'radius', 0, 40).onChange(controls.redraw);
        gui.add(controls, 'tube', 0, 40).onChange(controls.redraw);
        gui.add(controls, 'radialSegments', 0, 400).step(1).onChange(controls.redraw);
        gui.add(controls, 'tubularSegments', 1, 20).step(1).onChange(controls.redraw);
        gui.add(controls, 'p', 1, 10).step(1).onChange(controls.redraw);
        gui.add(controls, 'q', 1, 15).step(1).onChange(controls.redraw);
        gui.add(controls, 'heightScale', 0, 5).onChange(controls.redraw);


        render();

        function createMesh(geom) {

            // assign two materials
            var meshMaterial = new THREE.MeshNormalMaterial({});
            meshMaterial.side = THREE.DoubleSide;

            // create a multimaterial
            var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial]);

            return mesh;
        }

        function render() {
            stats.update();

            knot.rotation.y = step += 0.01;

            // render using requestAnimationFrame
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init;
</script>
</body>
</html>

　　2.6 多面體PolyhedronGeometry

　　參數：vertices頂點

　　faces：面

　　radius:多面體的半徑，即大小，這裏只是縮放，並非真的改變座標

　　detail：當該值爲1時，x面體的每一個面分割爲x個面體，當參數爲2時，在參數爲1的基礎上，再次將各個面分割爲x面體，依次類推

<!DOCTYPE html>

<html>

<head>
    <title>Example 05.09 - Basic 3D geometries - Polyhedron</title>
    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMapEnabled = true;

        var polyhedron = createMesh(new THREE.IcosahedronGeometry(10, 0));
        // add the sphere to the scene
        scene.add(polyhedron);

        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 50;
        camera.lookAt(new THREE.Vector3(10, 0, 0));

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

        // call the render function
        var step = 0;


        // setup the control gui
        var controls = new function () {
            // we need the first child, since it's a multimaterial
            this.radius = 10;
            this.detail = 0;
            this.type = 'Icosahedron';


            this.redraw = function () {
                // remove the old plane
                scene.remove(polyhedron);
                // create a new one

                switch (controls.type) {
                    case 'Icosahedron':
                    //正20面體  polyhedron = createMesh(new THREE.IcosahedronGeometry(controls.radius, controls.detail)); break; case 'Tetrahedron': //正四面體  polyhedron = createMesh(new THREE.TetrahedronGeometry(controls.radius, controls.detail)); break; case 'Octahedron': //正八面體  polyhedron = createMesh(new THREE.OctahedronGeometry(controls.radius, controls.detail)); break; case 'Dodecahedron': //正十二面體  polyhedron = createMesh(new THREE.DodecahedronGeometry(controls.radius, controls.detail)); break; case 'Custom': var vertices = [ 1, 1, 1, -1, -1, 1, -1, 1, -1, 1, -1, -1 ]; var indices = [ 2, 1, 0, 0, 3, 2, 1, 3, 0, 2, 3, 1 ]; polyhedron = createMesh(new THREE.PolyhedronGeometry(vertices, indices, controls.radius, controls.detail)); break;
                }

                // add it to the scene.
                scene.add(polyhedron);
            };
        };

        var gui = new dat.GUI();
        gui.add(controls, 'radius', 0, 40).step(1).onChange(controls.redraw);
        gui.add(controls, 'detail', 0, 3).step(1).onChange(controls.redraw);
        gui.add(controls, 'type', ['Icosahedron', 'Tetrahedron', 'Octahedron', 'Dodecahedron', 'Custom']).onChange(controls.redraw);


        render();

        function createMesh(geom) {

            // assign two materials
            var meshMaterial = new THREE.MeshNormalMaterial();
            meshMaterial.side = THREE.DoubleSide;
            var wireFrameMat = new THREE.MeshBasicMaterial();
            wireFrameMat.wireframe = true;

            // create a multimaterial
            var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);

            return mesh;
        }

        function render() {
            stats.update();

            polyhedron.rotation.y = step += 0.01;

            // render using requestAnimationFrame
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init;
</script>
</body>
</html>