import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

/**
 * 3d 幾何體
 * https://threejs.org/docs/index.html#api/zh/geometries/BoxGeometry
 */
export class ThreeDoc4Geometry {
    constructor(canvasId) {
        this.work(canvasId);
    }

    work(canvasId) {
        
 
// 建立 3d 場景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x9e9e9e);

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        // 最後一步很重要，我們將renderer（渲染器）的dom元素（renderer.domElement）新增到我們的HTML文件中。這就是渲染器用來顯示場景給我們看的<canvas>元素。
 

        document.body.appendChild(renderer.domElement);

        let geo;
        // 立方緩衝幾何體（BoxGeometry）
        // geo = this.addBox(scene);
        // 膠囊緩衝幾何體（CapsuleGeometry）
        // geo = this.addCapsule(scene);
        // 圓形緩衝幾何體（CircleGeometry）
        // geo = this.addCircle(scene);
        // 圓錐緩衝幾何體（ConeGeometry）
 

        // geo = this.addCone(scene);
        // 圓柱緩衝幾何體（CylinderGeometry）
        // geo = this.addCylinder(scene);
        // 十二面緩衝幾何體（DodecahedronGeometry）
        // geo = this.addDodecahedron(scene);
        // 新增邊緣幾何體（EdgesGeometry）
        // geo = this.addEdges(scene);
        // 擠壓緩衝幾何體（ExtrudeGeometry）
        // geo = this.addExtrude(scene);
        // 二十面緩衝幾何體（IcosahedronGeometry）
        // geo = this.addIcosahedron(scene);
        // 車削緩衝幾何體（LatheGeometry）
        // geo = this.addLatheGeometry(scene);
        // 八面緩衝幾何體（OctahedronGeometry）
        // geo = this.addOctahedronGeometry(scene);
        // 平面緩衝幾何體（PlaneGeometry）
        // geo = this.addPlane(scene);
        // 多面緩衝幾何體（PolyhedronGeometry）
        // geo = this.addPolyhedronGeometry(scene);
        // 圓環緩衝幾何體（RingGeometry）
        // geo = this.addRingGeometry(scene);
        // 形狀緩衝幾何體（ShapeGeometry）
        // geo = this.addShapeGeometry(scene);
        // 球緩衝幾何體（SphereGeometry）
        // geo = this.addSphere(scene);
        // 四面緩衝幾何體（TetrahedronGeometry）
        // geo = this.addTetrahedronGeometry(scene);
        // 圓環緩衝幾何體（TorusGeometry）
        // geo = this.addTorus(scene);
        // 圓環緩衝扭結幾何體（TorusKnotGeometry）
        // geo = this.addTorusKnotGeometry(scene);
        // 管道緩衝幾何體（TubeGeometry）
        // geo = this.addTubeGeometry(scene);
        // 網格幾何體（WireframeGeometry）
        geo = this.addWireframeGeometry(scene);


        // 邊緣輔助線
        let edges = new THREE.EdgesHelper(geo, 0x00ff00);
        scene.add(edges);

        //在場景中新增光源
        let light = new THREE.DirectionalLight(0xffffff, 2);
        light.position.set(0, 20, 0);
        scene.add(light);
        let light2 = new THREE.DirectionalLight(0xffffff, 2);
        light2.position.set(0, -10, 0);
        scene.add(light2);

        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        // 設定相機位置
        camera.position.x = 30;
        camera.position.y = 20;
        camera.position.z = 0;
        camera.lookAt(0, 0, 0);

        // 新增控制器
        let orb = new OrbitControls(camera, document.body);
        orb.addEventListener('change', function () {
            console.log(camera.position);
        });

        function animate() {
            requestAnimationFrame(animate);
            let step = 0.005;
            geo.rotation.x += step;
            geo.rotation.y += step;
            geo.rotation.z += step;
            edges.rotation.x += step;
            edges.rotation.y += step;
            edges.rotation.z += step;
            renderer.render(scene, camera);
        }

        animate();
    }

    /**
     * 立方緩衝幾何體（BoxGeometry）
     * BoxGeometry是四邊形的原始幾何類，它通常使用建構函式所提供的“width”、“height”、“depth”引數來建立立方體或者不規則四邊形。
     * BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)
     * width — X軸上面的寬度，預設值為1。
     * height — Y軸上面的高度，預設值為1。
     * depth — Z軸上面的深度，預設值為1。
     * widthSegments — （可選）寬度的分段數，預設值是1。
     * heightSegments — （可選）高度的分段數，預設值是1。
     * depthSegments — （可選）深度的分段數，預設值是1。
     * @type {BoxGeometry}
     * @return Object
     */
    addBox(scene) {
        const geometry = new THREE.BoxGeometry(10, 10, 10);
        const material = new THREE.MeshPhongMaterial({ color: 0x049EF4 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
        return cube;
    }

    /**
     * 膠囊緩衝幾何體（CapsuleGeometry）
     * CapsuleGeometry is a geometry class for a capsule with given radii and height. It is constructed using a lathe.
     * CapsuleGeometry(radius : Float, length : Float, capSubdivisions : Integer, radialSegments : Integer)
     * radius — Radius of the capsule. Optional; defaults to 1.
     * length — Length of the middle section. Optional; defaults to 1.
     * capSegments — Number of curve segments used to build the caps. Optional; defaults to 4.
     * radialSegments — Number of segmented faces around the circumference of the capsule. Optional; defaults to 8.
     * @type {BoxGeometry}
     * @return Object
     */
    addCapsule(scene) {
        const geometry = new THREE.CapsuleGeometry( 10, 10, 4, 16 );
        const material = new THREE.MeshBasicMaterial( {color: 0x049EF4} );
        const capsule = new THREE.Mesh( geometry, material );
        scene.add( capsule );
        return capsule;
    }

    /**
     * 圓形緩衝幾何體（CircleGeometry）
     * CircleGeometry是歐式幾何的一個簡單形狀，它由圍繞著一箇中心點的三角分段的數量所構造，由給定的半徑來延展。 同時它也可以用於建立規則多邊形，其分段數量取決於該規則多邊形的邊數。
     * CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float)
     * radius — 圓形的半徑，預設值為1
     * segments — 分段（三角面）的數量，最小值為3，預設值為8。
     * thetaStart — 第一個分段的起始角度，預設為0。（three o'clock position）
     * thetaLength — 圓形扇區的中心角，通常被稱為“θ”（西塔）。預設值是2*Pi，這使其成為一個完整的圓。
     * @return Object
     */
    addCircle(scene) {
        const geometry = new THREE.CircleGeometry(10, 32);
        const material = new THREE.MeshBasicMaterial({ color: 0x049EF4 });
        const circle = new THREE.Mesh(geometry, material);
        scene.add(circle);
        return circle;
    }

    /**
     * 圓錐緩衝幾何體（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，這使其成為一個完整的圓錐。
     * @return Object
     */
    addCone(scene) {
        const geometry = new THREE.ConeGeometry(10, 10, 16);
        const material = new THREE.MeshBasicMaterial({ color: 0x049EF4 });
        const cone = new THREE.Mesh(geometry, material);
        scene.add(cone);
        return cone;
    }

    /**
     * 圓柱緩衝幾何體（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，這使其成為一個完整的圓柱。
     * @return Object
     */
    addCylinder(scene) {
        const geometry = new THREE.CylinderGeometry(10, 10, 10, 16);
        const material = new THREE.MeshBasicMaterial({ color: 0x049EF4 });
        const cylinder = new THREE.Mesh(geometry, material);
        scene.add(cylinder);
        return cylinder;
    }

    /**
     * 十二面緩衝幾何體（DodecahedronGeometry）
     * 一個用於建立十二面幾何體的類。
     * DodecahedronGeometry(radius : Float, detail : Integer)
     * radius — 十二面體的半徑，預設值為1。
     * detail — 預設值為0。將這個值設為一個大於0的數將會為它增加一些頂點，使其不再是一個十二面體。
     * @return Object
     */
    addDodecahedron(scene) {
        const geometry = new THREE.DodecahedronGeometry(10, 0);
        const material = new THREE.MeshBasicMaterial({ color: 0x049EF4 });
        const dodecahedron = new THREE.Mesh(geometry, material);
        scene.add(dodecahedron);
        return dodecahedron;
    }

    /**
     * 邊緣幾何體（EdgesGeometry）
     * 這可以作為一個輔助物件來檢視geometry的邊緣。
     * EdgesGeometry( geometry : BufferGeometry, thresholdAngle : Integer )
     * geometry — 任何一個幾何體物件。
     * thresholdAngle — 僅當相鄰面的法線之間的角度（單位為角度）超過這個值時，才會渲染邊緣。預設值為1。
     * @return Object
     */
    addEdges(scene) {
        const geometry = new THREE.BoxGeometry(10, 10, 10);
        const edges = new THREE.EdgesGeometry(geometry);
        const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0xffffff }));
        scene.add(line);
        return line;
    }

    /**
     * 擠壓緩衝幾何體（ExtrudeGeometry）
     * 從一個形狀路徑中，擠壓出一個BufferGeometry。
     * ExtrudeGeometry(shapes : Array, options : Object)
     * shapes — 形狀或者一個包含形狀的陣列。
     * options — 一個包含有下列引數的物件：
     *
     * curveSegments — int，曲線上點的數量，預設值是12。
     * steps — int，用於沿著擠出樣條的深度細分的點的數量，預設值為1。
     * depth — float，擠出的形狀的深度，預設值為1。
     * bevelEnabled — bool，對擠出的形狀應用是否斜角，預設值為true。
     * bevelThickness — float，設定原始形狀上斜角的厚度。預設值為0.2。
     * bevelSize — float。斜角與原始形狀輪廓之間的延伸距離，預設值為bevelThickness-0.1。
     * bevelOffset — float. Distance from the shape outline that the bevel starts. Default is 0.
     * bevelSegments — int。斜角的分段層數，預設值為3。
     * extrudePath — THREE.Curve物件。一條沿著被擠出形狀的三維樣條線。Bevels not supported for path extrusion.
     * UVGenerator — Object。提供了UV生成器函式的物件。
     * 該物件將一個二維形狀擠出為一個三維幾何體。
     * 當使用這個幾何體建立Mesh的時候，如果你希望分別對它的表面和它擠出的側面使用單獨的材質，你可以使用一個材質陣列。 第一個材質將用於其表面；第二個材質則將用於其擠壓出的側面。
     * @return Object
     */
    addExtrude(scene) {
        const length = 6, width = 4;

        const shape = new THREE.Shape();
        shape.moveTo( 0,0 );
        shape.lineTo( 0, width );
        shape.lineTo( length, width );
        shape.lineTo( length, 0 );
        shape.lineTo( 0, 0 );

        const extrudeSettings = {
            steps: 2,
            depth: 8,
            bevelEnabled: true,
            bevelThickness: 1,
            bevelSize: 1,
            bevelOffset: 0,
            bevelSegments: 1
        };

        const geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
        const material = new THREE.MeshBasicMaterial( { color: 0x049EF4 } );
        const mesh = new THREE.Mesh( geometry, material ) ;
        scene.add( mesh );
        return mesh;
    }

    /**
     * 二十面緩衝幾何體（IcosahedronGeometry）
     * 一個用於生成二十面體的類。
     * IcosahedronGeometry(radius : Float, detail : Integer)
     * radius — 二十面體的半徑，預設為1。
     * detail — 預設值為0。將這個值設為一個大於0的數將會為它增加一些頂點，使其不再是一個二十面體。當這個值大於1的時候，實際上它將變成一個球體。
     * @return Object
     */
    addIcosahedron(scene) {
        const geometry = new THREE.IcosahedronGeometry(10, 0);
        const material = new THREE.MeshBasicMaterial({ color: 0x049EF4 });
        const icosahedron = new THREE.Mesh(geometry, material);
        scene.add(icosahedron);
        return icosahedron;
    }

    /**
     * 車削緩衝幾何體（LatheGeometry）
     * 建立具有軸對稱性的網格，比如花瓶。車削繞著Y軸來進行旋轉。
     * @return Object
     */
    addLatheGeometry(scene) {
        const points = [];
        for ( let i = 0; i < 10; i ++ ) {
            points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
        }
        const geometry = new THREE.LatheGeometry( points );
        const material = new THREE.MeshBasicMaterial( { color: 0x049EF4 } );
        const lathe = new THREE.Mesh( geometry, material );
        scene.add( lathe );
        return lathe;
    }

    /**
     * 八面緩衝幾何體（OctahedronGeometry）
     * 一個用於建立八面體的類。
     * OctahedronGeometry(radius : Float, detail : Integer)
     * radius — 八面體的半徑，預設值為1。
     * detail — 預設值為0，將這個值設為一個大於0的數將會為它增加一些頂點，使其不再是一個八面體。
     * @return Object
     */
    addOctahedronGeometry(scene) {
        const geometry = new THREE.OctahedronGeometry( 10, 0);
        const material = new THREE.MeshBasicMaterial( {color: 0x049EF4, side: THREE.DoubleSide} );
        const plane = new THREE.Mesh( geometry, material );
        scene.add( plane );
        return plane;
    }

    /**
     * 平面緩衝幾何體（PlaneGeometry）
     * 一個用於生成平面幾何體的類。
     * PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)
     * width — 平面沿著X軸的寬度。預設值是1。
     * height — 平面沿著Y軸的高度。預設值是1。
     * widthSegments — （可選）平面的寬度分段數，預設值是1。
     * heightSegments — （可選）平面的高度分段數，預設值是1。
     * @return Object
     */
    addPlane(scene) {
        const geometry = new THREE.PlaneGeometry( 10, 10 );
        const material = new THREE.MeshBasicMaterial( {color: 0x049EF4, side: THREE.DoubleSide} );
        const plane = new THREE.Mesh( geometry, material );
        scene.add( plane );
        return plane;
    }

    /**
     * 多面緩衝幾何體（PolyhedronGeometry）
     * 多面體在三維空間中具有一些平面的立體圖形。這個類將一個頂點陣列投射到一個球面上，之後將它們細分為所需的細節級別。
     * 這個類由DodecahedronGeometry、IcosahedronGeometry、OctahedronGeometry和TetrahedronGeometry 所使用，以生成它們各自的幾何結構。
     * PolyhedronGeometry(vertices : Array, indices : Array, radius : Float, detail : Integer)
     * vertices — 一個頂點Array（陣列）：[1,1,1, -1,-1,-1, ... ]。
     * indices — 一個構成面的索引Array（陣列）， [0,1,2, 2,3,0, ... ]。
     * radius — Float - 最終形狀的半徑。
     * detail — Integer - 將對這個幾何體細分多少個級別。細節越多，形狀就越平滑。
     * @return Object
     */
    addPolyhedronGeometry(scene) {
        const verticesOfCube = [
            -1,-1,-1,    1,-1,-1,    1, 1,-1,    -1, 1,-1,
            -1,-1, 1,    1,-1, 1,    1, 1, 1,    -1, 1, 1,
        ];
        const indicesOfFaces = [
            2,1,0,    0,3,2,
            0,4,7,    7,3,0,
            0,1,5,    5,4,0,
            1,2,6,    6,5,1,
            2,3,7,    7,6,2,
            4,5,6,    6,7,4
        ];
        const geometry = new THREE.PolyhedronGeometry( verticesOfCube, indicesOfFaces, 6, 2 );
        const material = new THREE.MeshBasicMaterial( { color: 0x049EF4 } );
        const plane = new THREE.Mesh( geometry, material );
        scene.add( plane );
        return plane;
    }

    /**
     * 圓環緩衝幾何體（RingGeometry）
     * 一個用於生成二維圓環幾何體的類。
     * RingGeometry(innerRadius : Float, outerRadius : Float, thetaSegments : Integer, phiSegments : Integer, thetaStart : Float, thetaLength : Float)
     * innerRadius — 內部半徑，預設值為0.5。
     * outerRadius — 外部半徑，預設值為1。
     * thetaSegments — 圓環的分段數。這個值越大，圓環就越圓。最小值為3，預設值為8。
     * phiSegments — 最小值為1，預設值為8。
     * thetaStart — 起始角度，預設值為0。
     * thetaLength — 圓心角，預設值為Math.PI * 2。
     * @return Object
     */
    addRingGeometry(scene) {
        const geometry = new THREE.RingGeometry( 5, 15, 8 );
        const material = new THREE.MeshBasicMaterial( { color: 0x049EF4, side: THREE.DoubleSide } );
        const mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );
        return mesh;
    }

    /**
     * 形狀緩衝幾何體（ShapeGeometry）
     * 從一個或多個路徑形狀中建立一個單面多邊形幾何體。
     * ShapeGeometry(shapes : Array, curveSegments : Integer)
     * shapes — 一個單獨的shape，或者一個包含形狀的Array。Default is a single triangle shape.
     * curveSegments - Integer - 每一個形狀的分段數，預設值為12。
     * @return Object
     */
    addShapeGeometry(scene) {
        const x = 0, y = 0;

        const heartShape = new THREE.Shape();

        heartShape.moveTo( x + 5, y + 5 );
        heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y );
        heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7,x - 6, y + 7 );
        heartShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 );
        heartShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 );
        heartShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y );
        heartShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 );

        const geometry = new THREE.ShapeGeometry( heartShape );
        const material = new THREE.MeshBasicMaterial( { color: 0x049EF4 } );
        const mesh = new THREE.Mesh( geometry, material ) ;
        scene.add( mesh );
        return mesh;
    }

    /**
     * 球緩衝幾何體（SphereGeometry）
     * 一個用於生成球體的類。
     * SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength :
     * Float, thetaStart : Float, thetaLength : Float)
     * radius — 球體半徑，預設為1。
     * widthSegments — 水平分段數（沿著經線分段），最小值為3，預設值為32。
     * heightSegments — 垂直分段數（沿著緯線分段），最小值為2，預設值為16。
     * phiStart — 指定水平（經線）起始角度，預設值為0。。
     * phiLength — 指定水平（經線）掃描角度的大小，預設值為 Math.PI * 2。
     * thetaStart — 指定垂直（緯線）起始角度，預設值為0。
     * thetaLength — 指定垂直（緯線）掃描角度大小，預設值為 Math.PI。
     * 該幾何體是通過掃描並計算圍繞著Y軸（水平掃描）和X軸（垂直掃描）的頂點來建立的。 因此，不完整的球體（類似球形切片）可以通過為phiStart，
     * phiLength，thetaStart和thetaLength設定不同的值來建立， 以定義我們開始（或結束）計算這些頂點的起點（或終點）。
     * @return Object
     */
    addSphere(scene) {
        const geometry = new THREE.SphereGeometry( 10, 32, 16 );
        const material = new THREE.MeshBasicMaterial( { color: 0x049EF4 } );
        const sphere = new THREE.Mesh( geometry, material );
        scene.add( sphere );
        return sphere;
    }

    /**
     * 四面緩衝幾何體（TetrahedronGeometry）
     * 一個用於生成四面幾何體的類。
     * TetrahedronGeometry(radius : Float, detail : Integer)
     * radius — 四面體的半徑，預設值為1。
     * detail — 預設值為0。將這個值設為一個大於0的數將會為它增加一些頂點，使其不再是一個四面體。
     * @return Object
     */
    addTetrahedronGeometry(scene) {
        const geometry = new THREE.TetrahedronGeometry( 10, 0 );
        const material = new THREE.MeshBasicMaterial( { color: 0x049EF4 } );
        const sphere = new THREE.Mesh( geometry, material );
        scene.add( sphere );
        return sphere;
    }

    /**
     * 圓環緩衝幾何體（TorusGeometry）
     * 一個用於生成圓環幾何體的類。
     * TorusGeometry(radius : Float, tube : Float, radialSegments : Integer, tubularSegments : Integer, arc : Float)
     * radius - 環面的半徑，從環面的中心到管道橫截面的中心。預設值是1。
     * tube — 管道的半徑，預設值為0.4。
     * radialSegments — 管道橫截面的分段數，預設值為8。
     * tubularSegments — 管道的分段數，預設值為6。
     * arc — 圓環的圓心角（單位是弧度），預設值為Math.PI * 2。
     * @return Object
     */
    addTorus(scene) {
        const geometry = new THREE.TorusGeometry( 10, 2, 16, 32 );
        const material = new THREE.MeshBasicMaterial( { color: 0x049EF4 } );
        const torus = new THREE.Mesh( geometry, material );
        scene.add( torus );
        return torus;
    }

    /**
     * 圓環緩衝扭結幾何體（TorusKnotGeometry）
     * 建立一個圓環扭結，其特殊形狀由一對互質的整數，p和q所定義。如果p和q不互質，創建出來的幾何體將是一個環面連結。
     * TorusKnotGeometry(radius : Float, tube : Float, tubularSegments : Integer, radialSegments : Integer, p : Integer, q : Integer)
     * radius - 圓環的半徑，預設值為1。
     * tube — 管道的半徑，預設值為0.4。
     * tubularSegments — 管道的分段數量，預設值為64。
     * radialSegments — 橫截面分段數量，預設值為8。
     * p — 這個值決定了幾何體將繞著其旋轉對稱軸旋轉多少次，預設值是2。
     * q — 這個值決定了幾何體將繞著其內部圓環旋轉多少次，預設值是3。
     * @return Object
     */
    addTorusKnotGeometry(scene) {
        const geometry = new THREE.TorusKnotGeometry( 10, 3, 64, 8 );
        const material = new THREE.MeshBasicMaterial( { color: 0x049EF4 } );
        const torusKnot = new THREE.Mesh( geometry, material );
        scene.add( torusKnot );
        return torusKnot;
    }

    /**
     * 管道緩衝幾何體（TubeGeometry）
     * 建立一個沿著三維曲線延伸的管道。
     * TubeGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean)
     * path — Curve - 一個由基類Curve繼承而來的3D路徑。 Default is a quadratic bezier curve.
     * tubularSegments — Integer - 組成這一管道的分段數，預設值為64。
     * radius — Float - 管道的半徑，預設值為1。
     * radialSegments — Integer - 管道橫截面的分段數目，預設值為8。
     * closed — Boolean 管道的兩端是否閉合，預設值為false。
     * @return Object
     */
    addTubeGeometry(scene) {
        class CustomSinCurve extends THREE.Curve {
            constructor( scale = 1 ) {
                super();
                this.scale = scale;
            }
            getPoint( t, optionalTarget = new THREE.Vector3() ) {
                const tx = t * 3 - 1.5;
                const ty = Math.sin( 2 * Math.PI * t );
                const tz = 0;
                return optionalTarget.set( tx, ty, tz ).multiplyScalar( this.scale );
            }
        }
        const path = new CustomSinCurve( 10 );
        const geometry = new THREE.TubeGeometry( path, 20, 2, 8, false );
        const material = new THREE.MeshBasicMaterial( { color: 0x049EF4 } );
        const mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );
        return mesh;
    }

    /**
     * 網格幾何體（WireframeGeometry）
     * 這個類可以被用作一個輔助物體，來對一個geometry以線框的形式進行檢視。
     * WireframeGeometry( geometry : BufferGeometry )
     * geometry — 任意幾何體物件。
     * @return Object
     */
    addWireframeGeometry(scene) {
        const geometry = new THREE.SphereGeometry( 20, 100, 100 );

        const wireframe = new THREE.WireframeGeometry( geometry );

        const line = new THREE.LineSegments( wireframe );
        line.material.depthTest = false;
        line.material.opacity = 0.25;
        line.material.transparent = true;

        scene.add( line );
        return line;
    }
}