Overview
CylinderShape is a 3D cylinder shape class that extends the base Cylinder class from the OpenGeometry kernel. It provides methods for creating, configuring, and managing cylindrical shapes in your 3D scene.
Constructor
Configuration options for the cylinder shape
Example
import { OpenPlans, ICylinderOptions } from '@opengeometry/openplans';
const openplans = new OpenPlans(container);
// Create a cylinder with default options
const cylinder1 = openplans.cylinder();
// Create a cylinder with custom options
const cylinder2 = openplans.cylinder({
radius: 5,
height: 10,
color: 0xff6b6b
});
ICylinderOptions Interface
Configuration options for creating a cylinder shape.
Unique identifier for the shape. Auto-generated if not provided.
Radius of the cylinder. Default: 1
Radius of the cylinder at the top. Allows creating cone shapes. Default: same as radius
Radius of the cylinder at the bottom. Default: same as radius
Height of the cylinder along the Y-axis. Default: 1
Number of segmented faces around the circumference. Default: 32
Hexadecimal color value for the cylinder. Default: 0xffffff
position
{ x: number, y: number, z: number }
Position of the cylinder in 3D space
rotation
{ x: number, y: number, z: number }
Rotation of the cylinder in radians
Properties
ogType
readonly ogType: string = 'CylinderShape'
subNodes
subNodes: Map<string, THREE.Object3D>
selected
Indicates whether the cylinder is currently selected.
edit
Indicates whether the cylinder is in edit mode.
propertySet
propertySet: ICylinderOptions
Methods
setOPConfig
Update the cylinder’s configuration.
New configuration options to apply
cylinder.setOPConfig({
radius: 8,
height: 15,
color: 0x00ff00
});
Calling setOPConfig will discard the current geometry and rebuild it with the new configuration.
getOPConfig
Retrieve the current configuration of the cylinder.
Returns: ICylinderOptions
const config = cylinder.getOPConfig();
console.log(config.radius, config.height);
setOPGeometry
Update the geometry of the cylinder. This method is called internally when configuration changes.
cylinder.setOPGeometry();
setOPMaterial
Update the material properties of the cylinder.
cylinder.setOPMaterial();
Complete Example
import { OpenPlans } from '@opengeometry/openplans';
// Initialize OpenPlans
const container = document.getElementById('canvas');
const openplans = new OpenPlans(container);
await openplans.setupOpenGeometry();
// Create a standard cylinder
const cylinder = openplans.cylinder({
radius: 5,
height: 12,
radialSegments: 64,
color: 0xe74c3c
});
// Position the cylinder
cylinder.position.set(10, 6, 0);
// Create a cone by using different radii
const cone = openplans.cylinder({
radiusTop: 0,
radiusBottom: 5,
height: 10,
color: 0xf39c12
});
cone.position.set(-10, 5, 0);
// Update cylinder configuration
cylinder.setOPConfig({
radius: 6,
height: 15,
color: 0x9b59b6
});
// Get current properties
const properties = cylinder.getOPConfig();
console.log('Cylinder properties:', properties);
// Mark as selected
cylinder.selected = true;
Creating Cone Shapes
You can create cone shapes by setting different radii for the top and bottom:
// Standard cone (point at top)
const cone = openplans.cylinder({
radiusTop: 0,
radiusBottom: 5,
height: 10
});
// Inverted cone (point at bottom)
const invertedCone = openplans.cylinder({
radiusTop: 5,
radiusBottom: 0,
height: 10
});
// Truncated cone
const truncatedCone = openplans.cylinder({
radiusTop: 3,
radiusBottom: 6,
height: 8
});
