DeMol

The main viewer component that handles WebGL rendering and user interactions.

Constructor

new GLViewer(container: string | HTMLElement, options?: ViewerConfig)

Configuration Options

interface ViewerConfig {
  backgroundColor?: string;      // Background color (hex or rgb)
  width?: number;               // Viewer width
  height?: number;              // Viewer height
  antialias?: boolean;          // Enable antialiasing
  pixelRatio?: number;          // Device pixel ratio
  fog?: boolean;                // Enable fog effect
  fogNear?: number;             // Fog near distance
  fogFar?: number;              // Fog far distance
  fogColor?: string;            // Fog color
  camera?: {                    // Camera settings
    position?: [number, number, number];
    target?: [number, number, number];
    fov?: number;
    near?: number;
    far?: number;
  };
}

Methods

loadPDB

Loads a PDB file into the viewer

async loadPDB(url: string, options?: ModelConfig): Promise<GLModel>

setControls

Configures viewer controls

setControls(options: ControlsConfig): void

zoomTo

Centers and zooms the camera to fit the current model

zoomTo(): void

render

Renders the current scene

render(): void

Example

// Create viewer
const viewer = new GLViewer('viewer', {
  backgroundColor: '#000000',
  width: 800,
  height: 600,
  antialias: true
});

// Load structure
const model = await viewer.loadPDB('structure.pdb');

// Set up controls
viewer.setControls({
  rotate: true,
  zoom: true,
  pan: true
});

// Center and zoom to fit
viewer.zoomTo();

Related Components

Learn more about other core components:

GLModel

Model representation and manipulation

GLShape

Basic shape rendering