图形化开发（五）012-Three.js之Geometry几何体——圆柱、球、平面、圆环

图形化开发（五）012-Three.js之Geometry几何体——圆柱、球、平面、圆环

圆柱

创建

var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );

构造函数

CylinderGeometry(radiusTop : 浮点类型, radiusBottom : 浮点类型, height : 浮点类型, radialSegments : 整数类型, heightSegments : 整数类型, openEnded : 布尔类型, thetaStart : 浮点类型, thetaLength : 浮点类型)

radiusTop — 顶部圆柱体的半径。默认值为1.
radiusBottom — 底部圆柱体的半径。默认值为1.
height — 圆柱体的高度。默认值为1.
radialSegments — 圆柱周围的分段面数。默认值为8
heightSegments — 沿圆柱体高度的面的行数。默认值为1.
openEnded — 圆柱体的两端是否显示，默认值是false，显示。
thetaStart — 第一段的起始角度，默认值是0（Three.js的0度位置）。
thetaLength — 圆形扇形的中心角，通常称为theta。默认值是2 * Pi，画出一个整圆

在线示意

https://threejs.org/docs/scenes/geometry-browser.html#CylinderGeometry

球

创建

var geometry = new THREE.SphereGeometry( 5, 32, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

构造函数

SphereGeometry(radius : 浮点类型, widthSegments : 整数类型, heightSegments : 整数类型, phiStart : 浮点类型, phiLength : 浮点类型, thetaStart : 浮点类型, thetaLength : 浮点类型)

radius — 球体半径。默认值是1
widthSegments — 水平线段的数量。最小值是3，默认值是8
heightSegments — 垂直段的数量。最小值是2，默认值是6
phiStart — 指定水平渲染起始角度。默认值为0
phiLength — 指定水平渲染角度大小。默认值是Math.PI * 2
thetaStart — 指定垂直渲染起始角度。默认值为0
thetaLength — 指定垂直渲染角度大小。默认是Math.PI

在线示意

https://threejs.org/docs/scenes/geometry-browser.html#SphereGeometry

平面

创建

var geometry = new THREE.PlaneGeometry( 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry, material );
scene.add( plane );

构造函数

PlaneGeometry(width : 浮点类型, height : 浮点类型, widthSegments : 整数类型, heightSegments : 整数类型)

width — 沿X轴的宽度。默认值为1
height — 沿着Y轴的高度。默认值为1
widthSegments — 宽度的分段数，可选。默认值为1
heightSegments — 高度的分段数，可选。默认值为1

在线示意

https://threejs.org/docs/scenes/geometry-browser.html#PlaneGeometry

圆环

创建

var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var torus = new THREE.Mesh( geometry, material );
scene.add( torus );

构造函数

TorusGeometry(radius : 浮点类型, tube : 浮点类型, radialSegments : 整数类型, tubularSegments : 整数类型, arc : 浮点类型)

radius - 圆环的半径，从圆环的中心到管的中心。默认值为1
tube — 管的半径。默认值是0.4
radialSegments — 横向分段数，默认值是8
tubularSegments — 纵向分段数，默认值是6
arc — 绘制的弧度。默认值是Math.PI * 2，绘制整个圆环

在线示意

https://threejs.org/docs/scenes/geometry-browser.html#TorusGeometry

官网演示： https://threejs.org/docs/#api/en/geometries/TubeGeometry

以上是Three.js内置的一些基础的几何体，Three.js还内置了一些其他的几何体模型（如字体几何体、拉伸几何体、车床几何体等）。