Cylinder

Overview

The Cylinder class creates 3D cylindrical shapes. Cylinders are created on the XZ plane and extruded along the Y-axis. They support partial angles for creating cylindrical sections and customizable segment counts for geometry resolution.

Constructor

const cylinder = new Cylinder(options?: ICylinderOptions);

ICylinderOptions

string

Unique identifier for the cylinder. Auto-generated if not provided.

Vector3

required

Center point of the cylinder in 3D space.

center: new Vector3(0, 0, 0)

number

required

Radius of the cylinder base.

radius: 5  // Units in scene space

number

required

Height of the cylinder along the Y-axis.

height: 10

number

required

Number of segments around the cylinder circumference. Higher values create smoother cylinders.

segments: 32  // Default value

number

required

Sweep angle in radians. Use 2 * Math.PI for a complete cylinder.

angle: 2 * Math.PI      // Full cylinder
angle: Math.PI          // Half cylinder
angle: Math.PI / 2      // Quarter cylinder

number

required

Hexadecimal color value for the cylinder.

color: 0x00ff00  // Green

Methods

setConfig()

Updates the cylinder configuration and regenerates geometry.

cylinder.setConfig(options: ICylinderOptions): void

Example:

cylinder.setConfig({
  center: new Vector3(0, 5, 0),
  radius: 3,
  height: 12,
  segments: 48,
  angle: 2 * Math.PI,
  color: 0x3498db
});

getBrep()

Returns the B-Rep (Boundary Representation) data as a parsed JSON object.

cylinder.getBrep(): object | null

Example:

const brepData = cylinder.getBrep();
if (brepData) {
  console.log('Vertices:', brepData.vertices.length);
  console.log('Faces:', brepData.faces.length);
}

generateGeometry()

Regenerates the THREE.js geometry from the current configuration. Called automatically after setConfig().

cylinder.generateGeometry(): void

discardGeometry()

Disposes of the current geometry to free memory.

cylinder.discardGeometry(): void

Properties

string

Unique identifier for the cylinder instance.

ICylinderOptions

Current cylinder configuration.

const currentRadius = cylinder.options.radius;
const currentHeight = cylinder.options.height;

number

Get or set the cylinder radius. Setting triggers geometry regeneration.

cylinder.radius = 8;  // Update radius and regenerate

number

Get or set the cylinder color.

cylinder.color = 0xff0000;  // Change to red

boolean

Enable or disable outline rendering.

cylinder.outline = true;   // Show edges
cylinder.outline = false;  // Hide edges

Usage Examples

Basic Cylinder

import { Cylinder, Vector3 } from 'opengeometry';

const cylinder = new Cylinder({
  center: new Vector3(0, 0, 0),
  radius: 5,
  height: 10,
  segments: 32,
  angle: 2 * Math.PI,
  color: 0x2ecc71
});

// Add to scene
scene.add(cylinder);

Half Cylinder (Partial Angle)

import { Cylinder, Vector3 } from 'opengeometry';

const halfCylinder = new Cylinder({
  center: new Vector3(0, 0, 0),
  radius: 4,
  height: 8,
  segments: 32,
  angle: Math.PI,  // 180 degrees
  color: 0xe74c3c
});

halfCylinder.outline = true;

High-Resolution Cylinder

import { Cylinder, Vector3 } from 'opengeometry';

// Smooth cylinder with many segments
const smoothCylinder = new Cylinder({
  center: new Vector3(0, 0, 0),
  radius: 6,
  height: 12,
  segments: 64,  // High segment count for smoothness
  angle: 2 * Math.PI,
  color: 0x3498db
});

Updating Cylinder Dynamically

import { Cylinder, Vector3 } from 'opengeometry';

const cylinder = new Cylinder({
  center: new Vector3(0, 0, 0),
  radius: 5,
  height: 10,
  segments: 32,
  angle: 2 * Math.PI,
  color: 0x9b59b6
});

// Animate radius change
function animate() {
  const time = Date.now() * 0.001;
  cylinder.radius = 5 + Math.sin(time) * 2;
  requestAnimationFrame(animate);
}
animate();

Implementation Details

Geometry Generation

Cylinders are generated by creating a circular base on the XZ plane and extruding it along the Y-axis. The base circle is centered at center.y - height/2, and the top is at center.y + height/2. Rust Implementation: /workspace/source/main/opengeometry/src/primitives/cylinder.rs:90-134

let half_height = self.height / 2.0;
let mut start_angle: f64 = 0.0;
let angle_step = self.angle / self.segments as f64;

for _ in 0..segment_count {
    let x = self.center.x + self.radius * start_angle.cos();
    let y = self.center.y - half_height;
    let z = self.center.z + self.radius * start_angle.sin();
    // ...
}

Material Configuration

Cylinders use MeshStandardMaterial with transparency for better visual integration: Source: /workspace/source/main/opengeometry/src/shapes/cylinder.ts:98-102

const material = new THREE.MeshStandardMaterial({
  color: this.options.color,
  transparent: true,
  opacity: 0.6,
});

Partial Cylinders

When angle < 2π, an additional center vertex is added to the base circle to properly close the cylindrical section. Source: /workspace/source/main/opengeometry/src/primitives/cylinder.rs:108-115

Best Practices

Segment Count: Use 32 segments for general purposes. Increase to 64+ for close-up views or precision modeling. Reduce to 16-24 for distant objects to improve performance.

Angle Range: The angle parameter should be between 0 and 2 * Math.PI. Values outside this range may produce unexpected results.

Outline Performance: Enabling outlines adds line geometry. For scenes with many cylinders, consider toggling outlines based on selection or zoom level.

Live Demo

Cylinder Demo

Try the Cylinder shape in the browser

Sweep

Custom profile extrusions

Sphere

Spherical shapes

Cuboid

Rectangular boxes

2D Primitives

3D Shapes

Operations

Export (Experimental)

Overview

Constructor

ICylinderOptions

Methods

setConfig()

getBrep()

generateGeometry()

discardGeometry()

Properties

Usage Examples

Basic Cylinder

Half Cylinder (Partial Angle)

High-Resolution Cylinder

Updating Cylinder Dynamically

Implementation Details

Geometry Generation

Material Configuration

Partial Cylinders

Best Practices

Live Demo

Cylinder Demo

See Also

Sweep

Sphere

Cuboid

​Overview

​Constructor

​ICylinderOptions

​Methods

​setConfig()

​getBrep()

​generateGeometry()

​discardGeometry()

​Properties

​Usage Examples

​Basic Cylinder

​Half Cylinder (Partial Angle)

​High-Resolution Cylinder

​Updating Cylinder Dynamically

​Implementation Details

​Geometry Generation

​Material Configuration

​Partial Cylinders

​Best Practices

​Live Demo

Cylinder Demo

​See Also

Sweep

Sphere

Cuboid

Overview

Constructor

ICylinderOptions

Methods

setConfig()

getBrep()

generateGeometry()

discardGeometry()

Properties

Usage Examples

Basic Cylinder

Half Cylinder (Partial Angle)

High-Resolution Cylinder

Updating Cylinder Dynamically

Implementation Details

Geometry Generation

Material Configuration

Partial Cylinders

Best Practices

Live Demo

See Also