树兜的一方小天地

# Geometry

# BufferGeometry

是面片、线或点几何体的有效表达。包括顶点位置，面片索引、法向量、颜色值、UV坐标和自定义缓存属性值。使用BufferGeometry可以有效减少向GPU传输上述数据所需的开销。

构造器

BufferGeometry() 创建一个新的BufferGeometry 同时将预置属性设置为默认值

# BufferAttribute

这个类用于存储与BufferGeomotry相关联的attribute(例如顶点位置向量，面片索引、法向量、颜色值、UV坐标和自定义attribute)

构造器

BufferAttribute(array:TypedArray,itemSize:Integer,normalized:Boolean)

参数：

  • array：必须是typedArray类型，用于实例化缓存，该队列应该包含：itemSize * numVertices个元素
  • itemSize：队列中与顶点相关的数据值的大小。例如attribute存储的是三元组（如顶点空间坐标、法向量或颜色值）则itemSize的值应该是3。
  • normalized：(可选)指明缓存中的数据如何与GLSL代码中的数据对应。

示例：

const geometry = new Three.BufferGeometry()
const count = 50
const positionsArray = new Float32Array(count * 3 * 3)
for(let i = 0;i < count * 3 * 3;i++){
  positionsArray[i] = Math.random()
}
const positionsAttribute = new Three.BufferAttribute(pointsArray,3)
geometry.setAttribute('position',positionsAttribute)
const material = new Three.MeshBasicMaterial({
  color:0xff0000,
  wireframe: true
})
const mesh = new Three.Mesh(geometry,material)
screen.add(mesh)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# BoxGeometry

BoxGeometry是四边形的原始几何类，它通常使用构造函数所提供的

构造器

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

示例

const geometry = new THREE.BoxGeometry(1,1,1)
const material = new THREE.MeshBasicMaterial({color:0x00ff00})
const cube = new THREE.Mesh(geometry,material)
scene.add(cube)
1
2
3
4

# CircleGeometry

CircleGeometry是欧式几何的一个简单形状，它由围绕着一个中心点的三角分段的数量所构造，由给定的半径来延展

构造器

CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float)

参数：

  • radius：圆形的半径，默认值为1
  • segments：分段(三角面)的数量，最小值为3，默认值为8
  • thetaStart：第一个分段的起始角度，默认为0
  • thetaLength：圆形扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆

示例

const geometry = new THREE.CircleGeometry( 5, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const circle = new THREE.Mesh( geometry, material );
scene.add( circle );
1
2
3
4

# 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
  • thetaLength — 圆锥底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆锥。

示例

const geometry = new THREE.ConeGeometry( 5, 20, 32 );
const material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
const cone = new THREE.Mesh( geometry, material );
scene.add( cone );
1
2
3
4

# 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）
  • hetaLength — 圆柱底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆柱。

示例

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

# PlanGeometry

构造器

PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)

参数：

  • width — 平面沿着X轴的宽度。默认值是1。
  • height — 平面沿着Y轴的高度。默认值是1。
  • widthSegments — （可选）平面的宽度分段数，默认值是1。
  • heightSegments — （可选）平面的高度分段数，默认值是1。

示例

const geometry = new THREE.PlaneGeometry( 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry, material );
scene.add( plane );
1
2
3
4

# 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

示例

const geometry = new THREE.SphereGeometry( 15, 32, 16 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
1
2
3
4

# 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。

示例

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

← TypeScript基础 →