three.js 4 几何体

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;
    }
}