GLShape

The shape component that provides basic geometric primitives for molecular visualization.

Constructor

new GLShape(viewer: GLViewer, options?: ShapeConfig)

Configuration Options

interface ShapeConfig {
  type?: 'sphere' | 'cylinder' | 'cone' | 'box';  // Shape type
  color?: string;                                 // Shape color
  opacity?: number;                               // Shape opacity
  size?: number;                                  // Shape size
  segments?: number;                              // Number of segments for curved shapes
  quality?: 'low' | 'medium' | 'high';           // Rendering quality
}

Methods

setPosition

Sets the shape position in 3D space

setPosition(x: number, y: number, z: number): void

setRotation

Sets the shape rotation

setRotation(x: number, y: number, z: number): void

setScale

Sets the shape scale

setScale(x: number, y: number, z: number): void

setColor

Sets the shape color

setColor(color: string): void

Shape Types

Sphere

Used for atom representation

Cylinder

Used for bond representation

Cone

Used for arrow and direction indicators

Box

Used for selection boxes and boundaries

Example

// Create sphere shape
const sphere = new GLShape(viewer, {
  type: 'sphere',
  color: '#ff0000',
  opacity: 0.8,
  size: 1.0,
  quality: 'high'
});

// Position the sphere
sphere.setPosition(0, 0, 0);

// Create cylinder shape
const cylinder = new GLShape(viewer, {
  type: 'cylinder',
  color: '#00ff00',
  opacity: 0.8,
  size: 1.0,
  quality: 'high'
});

// Position and rotate the cylinder
cylinder.setPosition(0, 1, 0);
cylinder.setRotation(0, 0, Math.PI / 2);

Related Components

Learn more about other core components:

GLViewer

Main viewer component

GLModel

Model representation and manipulation

GLModelGLDraw