【Three.js】六（2）、three.js中的几何体——三维几何体

最新推荐文章于 2021-06-17 13:27:42 发布

MAXLZ

最新推荐文章于 2021-06-17 13:27:42 发布

阅读量905

点赞数 1

分类专栏：【WebGL】Three.js 文章标签： three.js 三维几何体 3D Geometry

本文链接：https://blog.csdn.net/qq_33635385/article/details/100834621

版权

【WebGL】Three.js 专栏收录该内容

15 篇文章 13 订阅

订阅专栏

【Three.js】六（2）、three.js中的几何体——三维几何体

一、BoxGeometry
- 1.1 构造器参数说明
二、ConeGeometry
- 2.1 构造器参数说明
三、CylinderGeometry
- 3.1 构造器参数说明
四、TetrahedronGeometry
- 4.1 构造器参数说明
五、OctahedronGeometry
- 5.1 构造器属性说明
六、DodecahedronGeometry
- 6.1 构造器属性说明
七、IcosahedronGeometry
- 7.1 构造器属性说明
八、PolyhedronGeometry
- 8.1 构造器属性说明
九、ExtrudeGeometry
- 9.1 构造器属性说明
十、LatheGeometry
- 10.1 构造器属性说明
十一、ParametricGeometry
- 11.1 构造器属性说明
十二、SphereGeometry
- 12.1 构造器属性说明
十三、TextGeometry
- 13.1 构造参数说明
十四、TorusGeometry
- 14.1 构造参数说明
十五、TorusKnotGeometry
- 15.1 构造参数说明
十六、TubeGeometry
- 16.1 构造器参数说明

一、BoxGeometry

立方体。

1.1 构造器参数说明

	constructor(
		width?: number,
		height?: number,
		depth?: number,
		widthSegments?: number,
		heightSegments?: number,
		depthSegments?: number
	);

构造器参数	说明
width	X轴上面的宽度，默认值为1。
height	Y轴上面的高度，默认值为1。
depth	Z轴上面的深度，默认值为1。
widthSegments	宽度的分段数，默认值是1。
heightSegments	宽度的分段数，默认值是1。
depthSegments	宽度的分段数，默认值是1。

二、ConeGeometry

圆锥几何体

2.1 构造器参数说明

export class ConeGeometry extends CylinderGeometry {

	constructor(
		radius?: number,
		height?: number,
		radialSegment?: number,
		heightSegment?: number,
		openEnded?: boolean,
		thetaStart?: number,
		thetaLength?: number
	);

}

构造器参数	说明
radius	圆锥底部的半径，默认值为1。
height	圆锥的高度，默认值为1。
radialSegments	圆锥侧面周围的分段数，默认为8。
heightSegments	圆锥侧面沿着其高度的分段数，默认值为1。
openEnded	该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。
thetaStart	第一个分段的起始角度，默认为0。
thetaLength	圆锥底面圆扇区的中心角。默认值是2*Pi，这使其成为一个完整的圆锥。

三、CylinderGeometry

圆柱几何体。

3.1 构造器参数说明

	constructor(
		radiusTop?: number,
		radiusBottom?: number,
		height?: number,
		radiusSegments?: number,
		heightSegments?: number,
		openEnded?: boolean,
		thetaStart?: number,
		thetaLength?: number
	);

构造器参数	说明
radiusTop	圆柱的顶部半径，默认值是1。
radiusBottom	圆柱的底部半径，默认值是1。
height	圆柱的高度，默认值是1。
radialSegments	圆柱侧面周围的分段数，默认为8。
heightSegments	圆柱侧面沿着其高度的分段数，默认值为1。
openEnded	该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。
thetaStart	第一个分段的起始角度，默认为0
thetaLength	圆柱底面圆扇区的中心角。默认值是2*Pi，这使其成为一个完整的圆柱。

四、TetrahedronGeometry

四面几何体。

4.1 构造器参数说明

export class TetrahedronGeometry extends PolyhedronGeometry {

	constructor( radius?: number, detail?: number );

}

构造器参数	说明
radius	四面体的半径，默认值为1。
detail	默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个四面体。

五、OctahedronGeometry

八面体。

5.1 构造器属性说明

export class OctahedronGeometry extends PolyhedronGeometry {

	constructor( radius?: number, detail?: number );

}

构造器参数	说明
radius	八面体的半径，默认值为1。
detail	默认值为0，将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个八面体。

六、DodecahedronGeometry

十二面几何体

6.1 构造器属性说明

export class DodecahedronGeometry extends Geometry {

	constructor( radius?: number, detail?: number );

	parameters: {
		radius: number;
		detail: number;
	};

}

构造器参数	说明
radius	十二面体的半径，默认值为1。
detail	默认值为0，将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个十二面体。

七、IcosahedronGeometry

二十面几何体。

7.1 构造器属性说明

export class IcosahedronGeometry extends PolyhedronGeometry {

	constructor( radius?: number, detail?: number );

}

构造器参数	说明
radius	二十面体的半径，默认值为1。
detail	默认值为0，将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个二十面体。

八、PolyhedronGeometry

多面几何体。

8.1 构造器属性说明

	constructor(
		vertices: number[],
		indices: number[],
		radius?: number,
		detail?: number
	);

构造器参数	说明
vertices	一个顶点Array（数组）：[1,1,1, -1,-1,-1, … ]。
indices	一个构成面的索引Array（数组）， [0,1,2, 2,3,0, … ]。
radius	最终形状的半径。
detail	将对这个几何体细分多少个级别。细节越多，形状就越平滑

九、ExtrudeGeometry

挤压几何体

9.1 构造器属性说明

constructor( shapes: Shape | Shape[], options?: ExtrudeGeometryOptions );

构造器参数	说明
shapes	形状或者一个包含形状的数组。
options	一个包含有下列参数的对象：curveSegments — int，曲线上点的数量，默认值是12。 steps — int，用于沿着挤出样条的深度细分的点的数量，默认值为1。 depth — float，挤出的形状的深度，默认值为100。 bevelEnabled — bool，对挤出的形状应用是否斜角，默认值为true。 bevelThickness — float，设置原始形状上斜角的厚度。默认值为6。 bevelSize — float。斜角与原始形状轮廓之间的延伸距离，默认值为bevelThickness-2。 bevelOffset — float. Distance from the shape outline that the bevel starts. Default is 0. bevelSegments — int。斜角的分段层数，默认值为3。 extrudePath — THREE.Curve对象。一条沿着被挤出形状的三维样条线。 UVGenerator — Object。提供了UV生成器函数的对象

构造器参数

说明

shapes

形状或者一个包含形状的数组。

options

一个包含有下列参数的对象：curveSegments — int，曲线上点的数量，默认值是12。
steps — int，用于沿着挤出样条的深度细分的点的数量，默认值为1。
depth — float，挤出的形状的深度，默认值为100。
bevelEnabled — bool，对挤出的形状应用是否斜角，默认值为true。
bevelThickness — float，设置原始形状上斜角的厚度。默认值为6。
bevelSize — float。斜角与原始形状轮廓之间的延伸距离，默认值为bevelThickness-2。
bevelOffset — float. Distance from the shape outline that the bevel starts. Default is 0.
bevelSegments — int。斜角的分段层数，默认值为3。
extrudePath — THREE.Curve对象。一条沿着被挤出形状的三维样条线。
UVGenerator — Object。提供了UV生成器函数的对象

十、LatheGeometry

车削几何体。

10.1 构造器属性说明

	constructor(
		points: Vector2[],
		segments?: number,
		phiStart?: number,
		phiLength?: number
	);

构造器参数	说明
points	一个Vector2对象数组。每个点的X坐标必须大于0。
segments	要生成的车削几何体圆周分段的数量，默认值是12。
phiStart	以弧度表示的起始角度，默认值为0。
phiLength	车削部分的弧度（0-2PI）范围，2PI将是一个完全闭合的、完整的车削几何体，小于2PI是部分车削。默认值是2PI

十一、ParametricGeometry

参数化几何体

11.1 构造器属性说明

	constructor(
		func: ( u: number, v: number, dest: Vector3 ) => void,
		slices: number,
		stacks: number
	);

构造器参数	说明
func	一个函数，它在0和1之间接受一个u和v值，并修改第三个Vector3参数
slices	分段数
stacks	分段数

十二、SphereGeometry

球体。

12.1 构造器属性说明

	constructor(
		radius?: number,
		widthSegments?: number,
		heightSegments?: number,
		phiStart?: number,
		phiLength?: number,
		thetaStart?: number,
		thetaLength?: number
	);

构造器参数	说明
radius	球体半径，默认为1。
widthSegments	水平分段数（沿着经线分段），最小值为3，默认值为8。
heightSegments	垂直分段数（沿着纬线分段），最小值为2，默认值为6。
phiStart	指定水平（经线）起始角度，默认值为0。。
phiLength	指定水平（经线）扫描角度的大小，默认值为 Math.PI * 2。
thetaStart	指定垂直（纬线）起始角度，默认值为0。
thetaLength	指定垂直（纬线）扫描角度大小，默认值为 Math.PI

十三、TextGeometry

文本几何体。使用TextGeometry需要借助FontLoader加载相关字体json文件，这里提供一个将ttf文件转为json文件的在线地址：http://gero3.github.io/facetype.js/

13.1 构造参数说明

export interface TextGeometryParameters {
	font?: Font;
	size?: number;
	height?: number;
	curveSegments?: number;
	bevelEnabled?: boolean;
	bevelThickness?: number;
	bevelSize?: number;
	bevelOffset?: number;
	bevelSegments?: number;
}
...
	constructor( text: string, parameters?: TextGeometryParameters );

构造器参数	说明
text	将要显示的文本
parameters	包含有下列参数的对象： font — THREE.Font的实例。 size — Float。字体大小，默认值为100。 height — Float。挤出文本的厚度。默认值为50。 curveSegments — Integer。（表示文本的）曲线上点的数量。默认值为12。 bevelEnabled — Boolean。是否开启斜角，默认为false。 bevelThickness — Float。文本上斜角的深度，默认值为20。 bevelSize — Float。斜角与原始文本轮廓之间的延伸距离。默认值为8。 bevelSegments — Integer。斜角的分段数。默认值为3。

构造器参数

说明

text

将要显示的文本

parameters

包含有下列参数的对象：
font — THREE.Font的实例。
size — Float。字体大小，默认值为100。
height — Float。挤出文本的厚度。默认值为50。
curveSegments — Integer。（表示文本的）曲线上点的数量。默认值为12。
bevelEnabled — Boolean。是否开启斜角，默认为false。
bevelThickness — Float。文本上斜角的深度，默认值为20。
bevelSize — Float。斜角与原始文本轮廓之间的延伸距离。默认值为8。
bevelSegments — Integer。斜角的分段数。默认值为3。

十四、TorusGeometry

圆环几何体。

14.1 构造参数说明

export class TorusGeometry extends Geometry {

	constructor(
		radius?: number,
		tube?: number,
		radialSegments?: number,
		tubularSegments?: number,
		arc?: number
	);

	parameters: {
		radius: number;
		tube: number;
		radialSegments: number;
		tubularSegments: number;
		arc: number;
	};

}

构造器参数	说明
radius	圆环的半径，从圆环的中心到管道（横截面）的中心。默认值是1。
tube	管道的半径，默认值为0.4。
radialSegments	圆环的分段数，默认值为8。
tubularSegments	管道的分段数，默认值为6。
arc	圆环的中心角（单位是弧度），默认值为Math.PI * 2。

十五、TorusKnotGeometry

圆环扭结几何体.

15.1 构造参数说明

	constructor(
		radius?: number,
		tube?: number,
		tubularSegments?: number,
		radialSegments?: number,
		p?: number,
		q?: number
	);

构造器参数	说明
radius	圆环的半径，默认值为1。
tube	管道的半径，默认值为0.4。
tubularSegments	管道的分段数量，默认值为64。
radialSegments	横截面分段数量，默认值为8。
p	这个值决定了几何体将绕着其旋转对称轴旋转多少次，默认值是2。
q	这个值决定了几何体将绕着其内部圆环旋转多少次，默认值是3。

十六、TubeGeometry

管道几何体。

16.1 构造器参数说明

	constructor(
		path: Curve<Vector3>,
		tubularSegments?: number,
		radius?: number,
		radiusSegments?: number,
		closed?: boolean
	);

构造器参数	说明
path	Curve - 一个由基类Curve继承而来的路径。
tubularSegments	Integer - 组成这一管道的分段数，默认值为64。
radius	Float - 管道的半径，默认值为1。
radialSegments	Integer - 管道横截面的分段数目，默认值为8。
closed	Boolean 管道的两端是否闭合，默认值为false。

完整示例：

import '../../stylus/index.styl'

import * as THREE from 'three'
import * as dat from 'dat.gui'
import {initTrackballControls,initStats, initThree} from "../../util/util";
import {ParametricGeometries} from '../../libs/ParametricGeometries'
function init() {
    let stats = initStats();
    let gui = new dat.GUI();
    let {camera, scene, renderer} = initThree({
        sceneOption: {
            color: 0x444444
        }
    });
    camera.position.set(-50, 60, 80);

    let spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(0, 60, 60);
    spotLight.castShadow = true;
    spotLight.shadow.mapSize.set(4096, 4096);
    scene.add(spotLight);

    let planeGeometry = new THREE.PlaneGeometry(110, 90,1,1);
    let planeMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff
    });
    let plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.receiveShadow = true;
    plane.rotation.x = - 0.5 * Math.PI;
    plane.position.set(0,0,10);
    scene.add(plane);

    // 立方体
    let boxGeometry = new THREE.BoxGeometry(10,10,10,10,10,10);
    let boxMaterial = new THREE.MeshStandardMaterial({
        color: 0x00FF80
    });
    let box = new THREE.Mesh(boxGeometry, boxMaterial);
    box.position.set(40, 6, -10);
    box.castShadow = true;
    scene.add(box);

    // 圆锥
    let coneGeometry = new THREE.ConeGeometry(5,10,40,10,false,0, Math.PI * 2);
    let coneMaterial = new THREE.MeshStandardMaterial({
        color: 0xC7FFEC,
        side: THREE.DoubleSide
    });
    let cone = new THREE.Mesh(coneGeometry, coneMaterial);
    cone.position.set(25, 6, -10);
    cone.castShadow = true;
    scene.add(cone);

    // 圆柱体
    let cylinderGeometry = new THREE.CylinderGeometry(5,5,10,40,10,false,0, Math.PI * 2);
    let cylinderMaterial = new THREE.MeshStandardMaterial({
        color: 0xDEA681,
        side: THREE.DoubleSide
    });
    let cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
    cylinder.position.set(10, 6, -10);
    cylinder.castShadow = true;
    scene.add(cylinder);

    // 十二面体
    let dodecahedronGeometry = new THREE.DodecahedronGeometry(5,0);
    let dodecahedronMaterial = new THREE.MeshStandardMaterial({
        color: 0xFD5B78
    });
    let dodecahedron = new THREE.Mesh(dodecahedronGeometry, dodecahedronMaterial);
    dodecahedron.position.set(-5, 6, -10);
    dodecahedron.castShadow = true;
    scene.add(dodecahedron);

    // 挤压几何体
    let extrudeShape = new THREE.Shape();
    let x = 0, y = 0;
    extrudeShape.moveTo( x + 5, y + 5 );
    extrudeShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y );
    extrudeShape.bezierCurveTo( x - 6, y, x - 6, y + 7,x - 6, y + 7 );
    extrudeShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 );
    extrudeShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 );
    extrudeShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y );
    extrudeShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 );
    let extrudeGeometry = new THREE.ExtrudeGeometry(extrudeShape, {
        curveSegments: 12,
        steps: 3,
        depth: 5,
        bevelEnabled: true,
        bevelThickness: 2,
        bevelSize: 1,
        bevelOffset: 0,
        bevelSegments: 1
    });
    let extrudeMaterial = new THREE.MeshStandardMaterial({
        color: 0x7CFC00
    });
    let extrude = new THREE.Mesh(extrudeGeometry, extrudeMaterial);
    extrude.position.set(-15, 11, -10);
    extrude.scale.set(0.5,0.5,0.5);
    extrude.rotation.z = Math.PI;
    extrude.castShadow = true;
    scene.add(extrude);

    // 二十面几何体
    let icosahedronGeometry = new THREE.IcosahedronGeometry(5,0);
    let icosahedronMaterial = new THREE.MeshStandardMaterial({
        color: 0xEEE8AA
    });
    let icosahedron = new THREE.Mesh(icosahedronGeometry, icosahedronMaterial);
    icosahedron.position.set(-30, 6, -10);
    icosahedron.castShadow = true;
    scene.add(icosahedron);

    // 车削几何体
    let points = [];
    for ( let i = 0; i < 5; i ++ ) {
        points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 5 + 4, ( i - 2 ) * 2 ) );
    }
    let latheGeometry = new THREE.LatheGeometry(points,12, 0, Math.PI * 2);
    let latheMaterial = new THREE.MeshStandardMaterial({
        color: 0xFFA07B,
        side: THREE.DoubleSide
    });
    let lathe = new THREE.Mesh(latheGeometry, latheMaterial);
    lathe.position.set(40, 6, 20);
    lathe.castShadow = true;
    scene.add(lathe);

    // 八面几何体
    let octahedronGeometry = new THREE.OctahedronGeometry(5,0);
    let octahedronMaterial = new THREE.MeshStandardMaterial({
        color: 0xff3399
    });
    let octahedron = new THREE.Mesh(octahedronGeometry, octahedronMaterial);
    octahedron.position.set(25, 6, 20);
    octahedron.castShadow = true;
    scene.add(octahedron);

    // 参数化几何体
    let parametricGeometry = new THREE.ParametricGeometry(ParametricGeometries.klein, 25, 25);
    let parametricMaterial = new THREE.MeshStandardMaterial({
        color:0xfdb933,
        side: THREE.DoubleSide
    });
    let parametric = new THREE.Mesh(parametricGeometry, parametricMaterial);
    parametric.position.set(10, 6, 20);
    parametric.castShadow = true;
    scene.add(parametric);

    // 多面几何体
    let 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,
    ];
    let 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
    ];
    let polyhedronGeometry = new THREE.PolyhedronGeometry(verticesOfCube, indicesOfFaces,5, 2);
    let polyhedronMaterial = new THREE.MeshStandardMaterial({
        color:0x7bbfea
    });
    let polyhedron = new THREE.Mesh(polyhedronGeometry, polyhedronMaterial);
    polyhedron.position.set(-5, 6, 20);
    polyhedron.castShadow = true;
    scene.add(polyhedron);

    // 球
    let sphereGeometry = new THREE.SphereGeometry(5,25,25,0,2*Math.PI,0, 2*Math.PI);
    let sphereMaterial = new THREE.MeshStandardMaterial({
        color: 0xFF0090
    });
    let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphere.position.set(-20, 6, 20);
    sphere.castShadow = true;
    scene.add(sphere);

    // 四面几何体
    let tetrahedronGeometry = new THREE.TetrahedronGeometry(5,0);
    let tetrahedronMaterial = new THREE.MeshStandardMaterial({
        color: 0xBF0A10
    });
    let tetrahedron = new THREE.Mesh(tetrahedronGeometry, tetrahedronMaterial);
    tetrahedron.position.set(-35, 6, 20);
    tetrahedron.castShadow = true;
    scene.add(tetrahedron);

    // 文本几何体
    let fontLoader = new THREE.FontLoader();
    fontLoader.load('../../assets/fonts/FZJPKai-Z03S_Regular.json', (result) => {
        let textGeometry = new THREE.TextGeometry('你好！',{
            font: result,
            size: 5,
            height: 1,
            curveSegments: 10,
            bevelEnabled: false,
            bevelThickness: 2,
            bevelSize: 0,
            bevelSegments: 4
        });
        let textMaterial = new THREE.MeshStandardMaterial({
            color: 0x9999FF
        });
        let text = new THREE.Mesh(textGeometry, textMaterial);
        text.position.set(30, 4, 40);
        text.castShadow = true;
        scene.add(text);
        let textGUI = gui.addFolder('TextGeometry');
        let textControls = {
            text: textGeometry.parameters.text,
            size: textGeometry.parameters.parameters.size,
            height: textGeometry.parameters.parameters.height,
            curveSegments: textGeometry.parameters.parameters.curveSegments,
            bevelEnabled: textGeometry.parameters.parameters.bevelEnabled,
            bevelThickness: textGeometry.parameters.parameters.bevelThickness,
            bevelSize: textGeometry.parameters.parameters.bevelSize,
            bevelSegments: textGeometry.parameters.parameters.bevelSegments,
            wireframe: textMaterial.wireframe
        };
        let updateText = function () {
            text.geometry = new THREE.TextGeometry(textControls.text, {
                font: result,
                size: textControls.size,
                height: textControls.height,
                curveSegments: textControls.curveSegments,
                bevelEnabled: textControls.bevelEnabled,
                bevelThickness: textControls.bevelThickness,
                bevelSize: textControls.bevelSize,
                bevelSegments: textControls.bevelSegments
            });
        };
        textGUI.add(textControls, 'text').onChange(value => updateText());
        textGUI.add(textControls, 'size', 0, 10).onChange(value => updateText());
        textGUI.add(textControls, 'height', 0, 10).onChange(value => updateText());
        textGUI.add(textControls, 'curveSegments', 0, 30).onChange(value => updateText());
        textGUI.add(textControls, 'bevelEnabled').onChange(value => updateText());
        textGUI.add(textControls, 'bevelThickness', 0, 20).onChange(value => updateText());
        textGUI.add(textControls, 'bevelSize', 0, 20).onChange(value => updateText());
        textGUI.add(textControls, 'bevelSegments', 0, 5).onChange(value => updateText());
        textGUI.add(textControls, 'wireframe').onChange(value => textMaterial.wireframe = value);
    });


    // 圆环
    let torusGeometry = new THREE.TorusGeometry( 5, 1.5, 16, 100, Math.PI * 2 );
    let torusMaterial = new THREE.MeshStandardMaterial( { color: 0xffff00 } );
    let torus = new THREE.Mesh( torusGeometry, torusMaterial );
    torus.position.set(20, 8, 40);
    torus.castShadow = true;
    scene.add( torus );

    // 圆环扭结几何体
    let torusKnotGeometry = new THREE.TorusKnotGeometry( 5, 1.5, 100, 16 ,2,3);
    let torusKnotMaterial = new THREE.MeshStandardMaterial( { color: 0xAFE0E0 } );
    let torusKnot = new THREE.Mesh( torusKnotGeometry, torusKnotMaterial );
    torusKnot.position.set(0, 8, 40);
    torusKnot.castShadow = true;
    scene.add( torusKnot );

    // 管道几何体
    function CustomSinCurve( scale ) {
        THREE.Curve.call( this );
        this.scale = ( scale === undefined ) ? 1 : scale;
    }
    CustomSinCurve.prototype = Object.create( THREE.Curve.prototype );
    CustomSinCurve.prototype.constructor = CustomSinCurve;
    CustomSinCurve.prototype.getPoint = function ( t ) {
        let tx = t * 3 - 1.5;
        let ty = Math.sin( 2 * Math.PI * t );
        let tz = 0;
        return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
    };
    let tubePath = new CustomSinCurve( 5 );
    let tubeGeometry = new THREE.TubeGeometry( tubePath, 20, 2, 8, false );
    let tubeMaterial = new THREE.MeshStandardMaterial( { color: 0xFFEF61 ,side: THREE.DoubleSide} );
    let tube = new THREE.Mesh( tubeGeometry, tubeMaterial );
    tube.position.set(-25, 8, 40);
    tube.castShadow = true;
    scene.add( tube );

    let boxGUI = gui.addFolder('BoxGeometry');
    let boxControls = {
        width: boxGeometry.parameters.width,
        height: boxGeometry.parameters.height,
        depth: boxGeometry.parameters.depth,
        widthSegments: boxGeometry.parameters.widthSegments,
        heightSegments: boxGeometry.parameters.heightSegments,
        depthSegments: boxGeometry.parameters.depthSegments,
        wireframe: boxMaterial.wireframe
    };
    let updateBox = function(){
        box.geometry = new THREE.BoxGeometry(boxControls.width, boxControls.height, boxControls.depth,
            boxControls.widthSegments, boxControls.heightSegments, boxControls.depthSegments);
    }
    boxGUI.add(boxControls, 'width', 0, 10).onChange(value => updateBox());
    boxGUI.add(boxControls, 'height', 0, 10).onChange(value => updateBox());
    boxGUI.add(boxControls, 'depth', 0, 10).onChange(value => updateBox());
    boxGUI.add(boxControls, 'widthSegments', 0, 40).onChange(value => updateBox());
    boxGUI.add(boxControls, 'heightSegments', 0, 40).onChange(value => updateBox());
    boxGUI.add(boxControls, 'depthSegments', 0, 40).onChange(value => updateBox());
    boxGUI.add(boxControls, 'wireframe').onChange(value => boxMaterial.wireframe = value);
    let coneGUI = gui.addFolder('ConeGeometry');
    let coneControls = {
        radius: coneGeometry.parameters.radius,
        height: coneGeometry.parameters.height,
        radialSegments: coneGeometry.parameters.radialSegments,
        heightSegments: coneGeometry.parameters.heightSegments,
        openEnded: coneGeometry.parameters.openEnded,
        thetaStart: coneGeometry.parameters.thetaStart,
        thetaLength: coneGeometry.parameters.thetaLength,
        wireframe: coneMaterial.wireframe
    };
    let updateCone = function(){
        cone.geometry = new THREE.ConeGeometry(coneControls.radius, coneControls.height, coneControls.radialSegments,
            coneControls.heightSegments, coneControls.openEnded, coneControls.thetaStart, coneControls.thetaLength);
    };
    coneGUI.add(coneControls, 'radius', 0, 5).onChange(value => updateCone());
    coneGUI.add(coneControls, 'height', 0, 10).onChange(value => updateCone());
    coneGUI.add(coneControls, 'radialSegments', 0, 20).onChange(value => updateCone());
    coneGUI.add(coneControls, 'heightSegments', 0, 20).onChange(value => updateCone());
    coneGUI.add(coneControls, 'openEnded').onChange(value => updateCone());
    coneGUI.add(coneControls, 'thetaStart', 0, Math.PI * 2).onChange(value => updateCone());
    coneGUI.add(coneControls, 'thetaLength', 0, Math.PI * 2).onChange(value => updateCone());
    coneGUI.add(coneControls, 'wireframe').onChange(value => coneMaterial.wireframe = value);
    let cylinderGUI = gui.addFolder('CylinderGeometry');
    let cylinderControls = {
        radiusTop: cylinderGeometry.parameters.radiusTop,
        radiusBottom: cylinderGeometry.parameters.radiusBottom,
        height: cylinderGeometry.parameters.height,
        radialSegments: cylinderGeometry.parameters.radialSegments,
        heightSegments: cylinderGeometry.parameters.heightSegments,
        openEnded: cylinderGeometry.parameters.openEnded,
        thetaStart: cylinderGeometry.parameters.thetaStart,
        thetaLength: cylinderGeometry.parameters.thetaLength,
        wireframe: cylinderMaterial.wireframe
    };
    let updateCylinder = function(){
        cylinder.geometry = new THREE.CylinderGeometry(cylinderControls.radiusTop, cylinderControls.radiusBottom,
            cylinderControls.height, cylinderControls.radialSegments, cylinderControls.heightSegments,
            cylinderControls.openEnded, cylinderControls.thetaStart, cylinderControls.thetaLength);
    };
    cylinderGUI.add(cylinderControls, 'radiusTop', 0, 5).onChange(value => updateCylinder());
    cylinderGUI.add(cylinderControls, 'radiusBottom', 0, 5).onChange(value => updateCylinder());
    cylinderGUI.add(cylinderControls, 'height', 0, 10).onChange(value => updateCylinder());
    cylinderGUI.add(cylinderControls, 'radialSegments', 0, 20).onChange(value => updateCylinder());
    cylinderGUI.add(cylinderControls, 'heightSegments', 0, 20).onChange(value => updateCylinder());
    cylinderGUI.add(cylinderControls, 'openEnded').onChange(value => updateCylinder());
    cylinderGUI.add(cylinderControls, 'thetaStart', 0, 2 * Math.PI).onChange(value => updateCylinder());
    cylinderGUI.add(cylinderControls, 'thetaLength', 0, 2 * Math.PI).onChange(value => updateCylinder());
    cylinderGUI.add(cylinderControls, 'wireframe').onChange(value => cylinderMaterial.wireframe = value);
    let tetrahedronGUI = gui.addFolder('TetrahedronGeometry');
    let tetrahedronControls = {
        radius: tetrahedronGeometry.parameters.radius,
        detail: tetrahedronGeometry.parameters.detail,
        wireframe: tetrahedronMaterial.wireframe
    };
    let updateTetrahedron = function(){
        tetrahedron.geometry = new THREE.TetrahedronGeometry(tetrahedronControls.radius, Math.round(tetrahedronControls.detail));
    };
    tetrahedronGUI.add(tetrahedronControls, 'radius', 0, 6).onChange(value => updateTetrahedron());
    tetrahedronGUI.add(tetrahedronControls, 'detail', 0, 5).onChange(value => updateTetrahedron());
    tetrahedronGUI.add(tetrahedronControls, 'wireframe').onChange(value => tetrahedronMaterial.wireframe = value);
    let octahedronGUI = gui.addFolder('OctahedronGeometry');
    let octahedronControls = {
        radius: octahedronGeometry.parameters.radius,
        detail: octahedronGeometry.parameters.detail,
        wireframe: octahedronMaterial.wireframe
    };
    let updateOctahedron = function () {
        octahedron.geometry = new THREE.OctahedronGeometry(octahedronControls.radius, Math.round(octahedronControls.detail));
    };
    octahedronGUI.add(octahedronControls, 'radius',0, 6).onChange(value => updateOctahedron());
    octahedronGUI.add(octahedronControls, 'detail',0, 5).onChange(value => updateOctahedron());
    octahedronGUI.add(octahedronControls, 'wireframe').onChange(value => octahedronMaterial.wireframe = value);
    let dodecahedronGUI = gui.addFolder('DodecahedronGeometry');
    let dodecahedronControls = {
        radius: dodecahedronGeometry.parameters.radius,
        detail: dodecahedronGeometry.parameters.detail,
        wireframe: dodecahedronMaterial.wireframe
    };
    let updateDodecahedron = function () {
        dodecahedron.geometry = new THREE.DodecahedronGeometry(dodecahedronControls.radius,
            Math.round(dodecahedronControls.detail));
    };
    dodecahedronGUI.add(dodecahedronControls, 'radius', 0, 6).onChange(value => updateDodecahedron());
    dodecahedronGUI.add(dodecahedronControls, 'detail',0,5).onChange(value => updateDodecahedron());
    dodecahedronGUI.add(dodecahedronControls, 'wireframe').onChange(value => dodecahedronMaterial.wireframe = value);
    let icosahedronGUI = gui.addFolder('IcosahedronGeometry');
    let icosahedronControls = {
        radius: icosahedronGeometry.parameters.radius,
        detail: icosahedronGeometry.parameters.detail,
        wireframe: icosahedronMaterial.wireframe
    };
    let updateIcosahedron = function () {
        icosahedron.geometry = new THREE.IcosahedronGeometry(icosahedronControls.radius,
            Math.round(icosahedronControls.detail));
    };
    icosahedronGUI.add(icosahedronControls, 'radius', 0, 6).onChange(value => updateIcosahedron());
    icosahedronGUI.add(icosahedronControls, 'detail', 0, 5).onChange(value => updateIcosahedron());
    icosahedronGUI.add(icosahedronControls, 'wireframe').onChange(value => icosahedronMaterial.wireframe = value);
    let extrudeGUI = gui.addFolder('ExtrudeGeometry');
    let extrudeControls = {
        curveSegments: extrudeGeometry.parameters.options.curveSegments,
        steps: extrudeGeometry.parameters.options.steps,
        depth: extrudeGeometry.parameters.options.depth,
        bevelEnabled: extrudeGeometry.parameters.options.bevelEnabled,
        bevelThickness: extrudeGeometry.parameters.options.bevelThickness,
        bevelSize: extrudeGeometry.parameters.options.bevelSize,
        bevelOffset: extrudeGeometry.parameters.options.bevelOffset,
        bevelSegments: extrudeGeometry.parameters.options.bevelSegments,
        wireframe: extrudeMaterial.wireframe
    };
    let updateExtrude = function () {
        extrude.geometry = new THREE.ExtrudeGeometry(extrudeShape, {
            curveSegments: extrudeControls.curveSegments,
            steps: Math.round(extrudeControls.steps),
            depth: extrudeControls.depth,
            bevelEnabled: extrudeControls.bevelEnabled,
            bevelThickness: extrudeControls.bevelThickness,
            bevelSize: extrudeControls.bevelSize,
            bevelOffset: extrudeControls.bevelOffset,
            bevelSegments: Math.round(extrudeControls.bevelSegments)
        });
    };
    extrudeGUI.add(extrudeControls, 'curveSegments', 0, 20).onChange(value => updateExtrude());
    extrudeGUI.add(extrudeControls, 'steps',0,10).onChange(value => updateExtrude());
    extrudeGUI.add(extrudeControls, 'depth',0,200).onChange(value => updateExtrude());
    extrudeGUI.add(extrudeControls, 'bevelEnabled').onChange(value => updateExtrude());
    extrudeGUI.add(extrudeControls, 'bevelThickness',0,12).onChange(value => updateExtrude());
    extrudeGUI.add(extrudeControls, 'bevelSize',0,10).onChange(value => updateExtrude());
    extrudeGUI.add(extrudeControls, 'bevelOffset',0,10).onChange(value => updateExtrude());
    extrudeGUI.add(extrudeControls, 'bevelSegments',0,20).onChange(value => updateExtrude());
    extrudeGUI.add(extrudeControls, 'wireframe').onChange(value => extrudeMaterial.wireframe = value);
    let latheGUI = gui.addFolder('LatheGeometry');
    let latheControls = {
        segments: latheGeometry.parameters.segments,
        phiStart: latheGeometry.parameters.phiStart,
        phiLength: latheGeometry.parameters.phiLength,
        wireframe: latheMaterial.wireframe
    };
    let updateLathe = function () {
        lathe.geometry = new THREE.LatheGeometry(points, latheControls.segments,
            latheControls.phiStart, latheControls.phiLength);
    };
    latheGUI.add(latheControls, 'segments', 0, 40).onChange(value => updateLathe());
    latheGUI.add(latheControls, 'phiStart', 0, 2 * Math.PI).onChange(value => updateLathe());
    latheGUI.add(latheControls, 'phiLength', 0, 2 * Math.PI).onChange(value => updateLathe());
    latheGUI.add(latheControls, 'wireframe').onChange(value => latheMaterial.wireframe = value);
    let parametricGUI = gui.addFolder('ParametricGeometry');
    let parametricControls = {
        func: 'klein',
        slices: parametricGeometry.parameters.slices,
        stacks: parametricGeometry.parameters.stacks,
        wireframe: parametricMaterial.wireframe
    };
    let updateParametric = function () {
        parametric.geometry = new THREE.ParametricGeometry(ParametricGeometries[parametricControls.func],
            Math.round(parametricControls.slices), Math.round(parametricControls.stacks));
    };
    parametricGUI.add(parametricControls, 'func',{
        klein: 'klein',
        mobius3d: 'mobius3d'
    }).onChange(value => updateParametric());
    parametricGUI.add(parametricControls, 'slices',0 ,50).onChange(value => updateParametric());
    parametricGUI.add(parametricControls, 'stacks',0 ,50).onChange(value => updateParametric());
    parametricGUI.add(parametricControls, 'wireframe').onChange(value => parametricMaterial.wireframe = value);
    let polyhedronGUI = gui.addFolder('PolyhedronGeometry');
    let polyhedronContorls = {
        radius: polyhedronGeometry.parameters.radius,
        detail: polyhedronGeometry.parameters.detail,
        wireframe: polyhedronMaterial.wireframe
    };
    let updatePolyhedron = function () {
        polyhedron.geometry = new THREE.PolyhedronGeometry(verticesOfCube, indicesOfFaces,
            polyhedronContorls.radius, Math.round(polyhedronContorls.detail));
    };
    polyhedronGUI.add(polyhedronContorls, 'radius', 0, 6).onChange(value => updatePolyhedron());
    polyhedronGUI.add(polyhedronContorls, 'detail', 0, 5).onChange(value => updatePolyhedron());
    polyhedronGUI.add(polyhedronContorls, 'wireframe').onChange(value => polyhedronMaterial.wireframe = value);
    let sphereGUI = gui.addFolder('SphereGeometry');
    let sphereControls = {
        radius: sphereGeometry.parameters.radius,
        widthSegments: sphereGeometry.parameters.widthSegments,
        heightSegments: sphereGeometry.parameters.heightSegments,
        phiStart: sphereGeometry.parameters.phiStart,
        phiLength: sphereGeometry.parameters.phiLength,
        thetaStart: sphereGeometry.parameters.thetaStart,
        thetaLength: sphereGeometry.parameters.thetaLength,
        wireframe: sphereMaterial.wireframe
    };
    let updateSphere = function () {
        sphere.geometry = new THREE.SphereGeometry(sphereControls.radius, sphereControls.widthSegments,
            sphereControls.heightSegments, sphereControls.phiStart, sphereControls.phiLength,
            sphereControls.thetaStart, sphereControls.thetaLength);
    };
    sphereGUI.add(sphereControls, 'radius', 0, 6).onChange(value => updateSphere());
    sphereGUI.add(sphereControls, 'widthSegments', 0, 40).onChange(value => updateSphere());
    sphereGUI.add(sphereControls, 'heightSegments', 0, 40).onChange(value => updateSphere());
    sphereGUI.add(sphereControls, 'phiStart', 0, 2 * Math.PI).onChange(value => updateSphere());
    sphereGUI.add(sphereControls, 'phiLength', 0, 2 * Math.PI).onChange(value => updateSphere());
    sphereGUI.add(sphereControls, 'thetaStart', 0, 2 * Math.PI).onChange(value => updateSphere());
    sphereGUI.add(sphereControls, 'thetaLength', 0, 2 * Math.PI).onChange(value => updateSphere());
    sphereGUI.add(sphereControls, 'wireframe').onChange(value => sphereMaterial.wireframe = value);
    let torusGUI = gui.addFolder('TorusGeometry');
    let torusControls = {
        radius: torusGeometry.parameters.radius,
        tube: torusGeometry.parameters.tube,
        radialSegments: torusGeometry.parameters.radialSegments,
        tubularSegments: torusGeometry.parameters.tubularSegments,
        arc: torusGeometry.parameters.arc,
        wireframe: torusMaterial.wireframe
    };
    let updateTrous = function () {
        torus.geometry = new THREE.TorusGeometry(torusControls.radius, torusControls.tube, torusControls.radialSegments,
            torusControls.tubularSegments, torusControls.arc);
    };
    torusGUI.add(torusControls, 'radius', 0, 6).onChange(value => updateTrous());
    torusGUI.add(torusControls, 'tube', 0, 2).onChange(value => updateTrous());
    torusGUI.add(torusControls, 'radialSegments', 0, 20).onChange(value => updateTrous());
    torusGUI.add(torusControls, 'tubularSegments', 0, 20).onChange(value => updateTrous());
    torusGUI.add(torusControls, 'arc',0, Math.PI * 2).onChange(value => updateTrous());
    torusGUI.add(torusControls, 'wireframe').onChange(value => torusMaterial.wireframe = value);
    let torusKnotGUI = gui.addFolder('TorusKnotGeometry');
    let torusKnotControls = {
        radius: torusKnotGeometry.parameters.radius,
        tube: torusKnotGeometry.parameters.tube,
        tubularSegments: torusKnotGeometry.parameters.tubularSegments,
        radialSegments: torusKnotGeometry.parameters.radialSegments,
        p: torusKnotGeometry.parameters.p,
        q: torusKnotGeometry.parameters.q,
        wireframe: torusKnotMaterial.wireframe
    };
    let updateTorusKnot = function () {
        torusKnot.geometry = new THREE.TorusKnotGeometry(torusKnotControls.radius, torusKnotControls.tube,
            torusKnotControls. tubularSegments, torusKnotControls.radialSegments, torusKnotControls.p,
            torusKnotControls.q);
    };
    torusKnotGUI.add(torusKnotControls, 'radius', 0, 6).onChange(value => updateTorusKnot());
    torusKnotGUI.add(torusKnotControls, 'tube', 0, 2).onChange(value => updateTorusKnot());
    torusKnotGUI.add(torusKnotControls, 'tubularSegments', 0, 100).onChange(value => updateTorusKnot());
    torusKnotGUI.add(torusKnotControls, 'radialSegments', 0, 20).onChange(value => updateTorusKnot());
    torusKnotGUI.add(torusKnotControls, 'p', 0, 10).onChange(value => updateTorusKnot());
    torusKnotGUI.add(torusKnotControls, 'q', 0, 10).onChange(value => updateTorusKnot());
    torusKnotGUI.add(torusKnotControls, 'wireframe').onChange(value => torusKnotMaterial.wireframe = value);
    let tubeGUI = gui.addFolder('TubeGeometry');
    let tubeControls = {
        tubularSegments: tubeGeometry.parameters.tubularSegments,
        radius: tubeGeometry.parameters.radius,
        radialSegments: tubeGeometry.parameters.radialSegments,
        closed: tubeGeometry.parameters.closed,
        wireframe: tubeMaterial.wireframe,
    };
    let updateTube = function () {
        tube.geometry = new THREE.TubeGeometry(tubePath, Math.round(tubeControls.tubularSegments),
            tubeControls.radius, Math.round(tubeControls.radialSegments), tubeControls.closed);
    };
    tubeGUI.add(tubeControls, 'tubularSegments',0,100).onChange(value => updateTube());
    tubeGUI.add(tubeControls, 'radius', 0, 4).onChange(value => updateTube());
    tubeGUI.add(tubeControls, 'radialSegments', 0, 20).onChange(value => updateTube());
    tubeGUI.add(tubeControls, 'closed').onChange(value => updateTube());
    tubeGUI.add(tubeControls, 'wireframe').onChange(value => tubeMaterial.wireframe = value);

    let trackballControls = initTrackballControls(camera, renderer);
    render();
    function render(){
        stats.update();
        trackballControls.update();
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
}
init();