ThreeJS Geometries-1

BoxGeometry

BoxGeometry is a geometry class for a rectangular cuboid with a given 'width', 'height', and 'depth'. On creation, the cuboid is centered on the origin, with each edge parallel to one of the axes.

Code Example

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

Constructor

BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

width — Width; that is, the length of the edges parallel to the X axis. Optional; defaults to 1.

height — Height; that is, the length of the edges parallel to the Y axis. Optional; defaults to 1.

depth — Depth; that is, the length of the edges parallel to the Z axis. Optional; defaults to 1.

widthSegments — Number of segmented rectangular faces along the width of the sides. Optional; defaults to 1.

heightSegments — Number of segmented rectangular faces along the height of the sides. Optional; defaults to 1.

depthSegments — Number of segmented rectangular faces along the depth of the sides. Optional; defaults to 1.

Properties

See the base BufferGeometry class for common properties.

.parameters : Object

An object with a property for each of the constructor parameters. Any modification after instantiation does not change the geometry.

Using the above example:

geometry.parameters; // {width: 1, height: 1, depth: 1, widthSegments: undefined, heightSegments: undefined, depthSegments: undefined}
cube.geometry.parameters; // as above
cube.geometry.parameters.width; // === 1
cube.geometry.parameters.widthSegments; // === undefined.

CircleGeometry

CircleGeometry is a simple Euclidean geometry shape. It is made up of a series of triangular segments that are oriented around a central point and extend out to a specified radius. It is constructed counter-clockwise from a given start angle and central angle. It can also be used to make regular polygons, with the number of sides determined by the number of segments.

Code Example

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

Constructor

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

radius — Radius of the circle, default = 1.

segments — Number of segments (triangles), minimum = 3, default = 8.

thetaStart — Start angle for first segment, default = 0 (three o'clock position).

thetaLength — The central angle, often called theta, of the circular sector. The default is 2*Pi, which makes for a complete circle.

Properties

See the base BufferGeometry class for common properties.

.parameters : Object

An object with a property for each of the constructor parameters. Any modification after instantiation does not change the geometry.

ConeGeometry

A class for generating cone geometries.

Code Example

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

Constructor

ConeGeometry(radius : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)

radius — Radius of the cone base. Default is 1.

height — Height of the cone. Default is 1.

radialSegments — Number of segmented faces around the circumference of the cone. Default is 8

heightSegments — Number of rows of faces along the height of the cone. Default is 1.

openEnded — A Boolean indicating whether the base of the cone is open or capped. Default is false, meaning capped.

thetaStart — Start angle for first segment, default = 0 (three o'clock position).

thetaLength — The central angle, often called theta, of the circular sector. The default is 2*Pi, which makes for a complete cone.

Properties

See the base CylinderGeometry class for common properties.

.parameters : Object

An object with a property for each of the constructor parameters. Any modification after instantiation does not change the geometry.

CylinderGeometry

A class for generating cylinder geometries.

Code Example

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

Constructor

CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)

radiusTop — Radius of the cylinder at the top. Default is 1.

radiusBottom — Radius of the cylinder at the bottom. Default is 1.

height — Height of the cylinder. Default is 1.

radialSegments — Number of segmented faces around the circumference of the cylinder. Default is 8

heightSegments — Number of rows of faces along the height of the cylinder. Default is 1.

openEnded — A Boolean indicating whether the ends of the cylinder are open or capped. Default is false, meaning capped.

thetaStart — Start angle for first segment, default = 0 (three o'clock position).

thetaLength — The central angle, often called theta, of the circular sector. The default is 2*Pi, which makes for a complete cylinder.

Properties

See the base BufferGeometry class for common properties.

.parameters : Object

An object with a property for each of the constructor parameters. Any modification after instantiation does not change the geometry.

DodecahedronGeometry

A class for generating dodecahedron geometries.

Constructor

DodecahedronGeometry(radius : Float, detail : Integer)

radius — Radius of the dodecahedron. Default is 1.

detail — Default is 0. Setting this to a value greater than 0 adds vertices making it no longer a dodecahedron.

Properties

See the base PolyhedronGeometry class for common properties.

.parameters : Object

An object with a property for each of the constructor parameters. Any modification after instantiation does not change the geometry.

EdgesGeometry

This can be used as a helper object to view the edges of a geometry.

Code Example

const geometry = new THREE.BoxGeometry( 100, 100, 100 );
const edges = new THREE.EdgesGeometry( geometry );
const line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
scene.add( line );

Constructor

EdgesGeometry( geometry : BufferGeometry, thresholdAngle : Integer )

geometry — Any geometry object.

thresholdAngle — An edge is only rendered if the angle (in degrees) between the face normals of the adjoining faces exceeds this value. default = 1 degree.

Properties

See the base BufferGeometry class for common properties.

.parameters : Object

An object with a property for each of the constructor parameters. Any modification after instantiation does not change the geometry.

ExtrudeGeometry

Creates extruded geometry from a path shape.

Code Example

const length = 12, width = 8;


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: 16,
	bevelEnabled: true,
	bevelThickness: 1,
	bevelSize: 1,
	bevelOffset: 0,
	bevelSegments: 1
};


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

Constructor

ExtrudeGeometry(shapes : Array, options : Object)

shapes — Shape or an array of shapes.

options — Object that can contain the following parameters.

• curveSegments — int. Number of points on the curves. Default is 12.
• steps — int. Number of points used for subdividing segments along the depth of the extruded spline. Default is 1.
• depth — float. Depth to extrude the shape. Default is 1.
• bevelEnabled — bool. Apply beveling to the shape. Default is true.
• bevelThickness — float. How deep into the original shape the bevel goes. Default is 0.2.
• bevelSize — float. Distance from the shape outline that the bevel extends. Default is bevelThickness - 0.1.
• bevelOffset — float. Distance from the shape outline that the bevel starts. Default is 0.
• bevelSegments — int. Number of bevel layers. Default is 3.
• extrudePath — THREE.Curve. A 3D spline path along which the shape should be extruded. Bevels not supported for path extrusion.
• UVGenerator — Object. object that provides UV generator functions

This object extrudes a 2D shape to a 3D geometry.

When creating a Mesh with this geometry, if you'd like to have a separate material used for its face and its extruded sides, you can use an array of materials. The first material will be applied to the face; the second material will be applied to the sides.

Properties

See the base BufferGeometry class for common properties.

.parameters : Object

An object with a property for each of the constructor parameters. Any modification after instantiation does not change the geometry.

IcosahedronGeometry

A class for generating an icosahedron geometry.

Constructor

IcosahedronGeometry(radius : Float, detail : Integer)

radius — Default is 1.

detail — Default is 0. Setting this to a value greater than 0 adds more vertices making it no longer an icosahedron. When detail is greater than 1, it's effectively a sphere.

Properties

See the base PolyhedronGeometry class for common properties.

.parameters : Object

An object with a property for each of the constructor parameters. Any modification after instantiation does not change the geometry.

LatheGeometry

Creates meshes with axial symmetry like vases. The lathe rotates around the Y axis.

Code Example

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: 0xffff00 } );
const lathe = new THREE.Mesh( geometry, material );
scene.add( lathe );

Constructor

LatheGeometry(points : Array, segments : Integer, phiStart : Float, phiLength : Float)

points — Array of Vector2s. The x-coordinate of each point must be greater than zero. Default is an array with (0,0.5), (0.5,0) and (0,-0.5) which creates a simple diamond shape.

segments — the number of circumference segments to generate. Default is 12.

phiStart — the starting angle in radians. Default is 0.

phiLength — the radian (0 to 2PI) range of the lathed section 2PI is a closed lathe, less than 2PI is a portion. Default is 2PI.

This creates a LatheGeometry based on the parameters.

Properties

See the base BufferGeometry class for common properties.

.parameters : Object

An object with a property for each of the constructor parameters. Any modification after instantiation does not change the geometry.

OctahedronGeometry

A class for generating an octahedron geometry.

Constructor

OctahedronGeometry(radius : Float, detail : Integer)

radius — Radius of the octahedron. Default is 1.

detail — Default is 0. Setting this to a value greater than zero add vertices making it no longer an octahedron.

Properties

See the base PolyhedronGeometry class for common properties.

.parameters : Object

An object with a property for each of the constructor parameters. Any modification after instantiation does not change the geometry.