Documentation
Tutorials
Using 3Dmol within your code Embedding a 3Dmol Viewer Active Learning with 3Dmol.js Viewing Molecules with the 3Dmol Server
Github

Class

GLShape

GLShape(sid, stylespec)

A GLShape is a collection of user specified shapes.

Constructor

# new GLShape(sid, stylespec)

Custom renderable shape

Parameters:
Name Type Description
sid number

Unique identifier
stylespec ShapeSpec

shape style specification

View Source GLShape.ts, line 22

Extends

Classes

GLShape
GLShape

Members

Func

# callback Optional

function to call on click

Overrides:

View Source GLShape.ts, line 1595

boolean

# clickable Optional

if true, user can click on object to trigger callback

Overrides:

View Source GLShape.ts, line 1590

ColorSpec | Array

# color Optional

Either a single color for the whole object or an array specifying the color at each vertex (CustomShapeSpec).

Overrides:

View Source GLShape.ts, line 1565

number

# frame Optional

if set, only display in this frame of an animation

Overrides:

View Source GLShape.ts, line 1615

boolean

# hidden Optional

if true, do not display object

Overrides:

View Source GLShape.ts, line 1580

Func

# hover_callback Optional

hover callback

Overrides:

View Source GLShape.ts, line 1605

boolean

# hoverable Optional

if true, user can hover on object to trigger callback

Overrides:

View Source GLShape.ts, line 1600

IntersectionShapes

# intersectionShape

View Source GLShape.ts, line 580

number

# linewidth Optional

width of line for wireframe rendering No longer supported by most browsers

Overrides:

View Source GLShape.ts, line 1585

number

# opacity Optional

transparency, between 0 (invisible) and 1 (opaque)

Overrides:

View Source GLShape.ts, line 1570

Func

# unhover_callback Optional

unhover callback

Overrides:

View Source GLShape.ts, line 1610

boolean

# wireframe Optional

draw as wireframe, not surface

Overrides:

View Source GLShape.ts, line 1575

Methods

# addArrow(arrowSpec)

Creates an arrow shape

Parameters:
Name Type Description
arrowSpec ArrowSpec

View Source GLShape.ts, line 1518

Example
$3Dmol.download("pdb:4DM7",viewer,{},function(){
              viewer.setBackgroundColor(0xffffffff);
              viewer.addArrow({
                  start: {x:-10.0, y:0.0, z:0.0},
                  end: {x:0.0, y:-10.0, z:0.0},
                  radius: 1.0,
                  radiusRadio:1.0,
                  mid:1.0,
                  clickable:true,
                  callback:function(){
                      this.color.setHex(0xFF0000FF);
                      viewer.render( );
                  }
              });
              viewer.render();
            });

# addBox(boxSpec)

Creates a box

Parameters:
Name Type Description
boxSpec BoxSpec

View Source GLShape.ts, line 1435

Example
var shape = viewer.addShape({color:'red'});
     shape.addBox({corner: {x:1,y:2,z:0}, dimensions: {w: 4, h: 2, d: 6}});
     shape.addBox({corner: {x:-5,y:-3,z:0},
                   dimensions: { w: {x:1,y:1,z:0},
                                 h: {x:-1,y:1,z:0},
                                 d: {x:0,y:0,z:1} }});
     viewer.zoomTo();
     viewer.rotate(30);
     viewer.render();

# addCurve(curveSpec)

Creates a curved shape

Parameters:
Name Type Description
curveSpec CurveSpec

View Source GLShape.ts, line 1482

# addCustom(customSpec)

Creates a custom shape from supplied vertex and face arrays

Parameters:
Name Type Description
customSpec CustomShapeSpec

View Source GLShape.ts, line 1407

# addCylinder(cylinderSpec)

Creates a cylinder shape

Parameters:
Name Type Description
cylinderSpec CylinderSpec

View Source GLShape.ts, line 1468

Example
viewer.addCylinder({start:{x:0.0,y:0.0,z:0.0},
                              end:{x:10.0,y:0.0,z:0.0},
                              radius:1.0,
                              fromCap:1,
                              toCap:2,
                              color:'red',
                              hoverable:true,
                              clickable:true,
                              callback:function(){ this.color.setHex(0x00FFFF00);viewer.render( );},
                              hover_callback: function(){ viewer.render( );},
                              unhover_callback: function(){ this.color.setHex(0xFF000000);viewer.render( );}
                             });
          viewer.addCylinder({start:{x:0.0,y:2.0,z:0.0},
                              end:{x:0.0,y:10.0,z:0.0},
                              radius:0.5,
                              fromCap:false,
                              toCap:true,
                              color:'teal'});
          viewer.addCylinder({start:{x:15.0,y:0.0,z:0.0},
                              end:{x:20.0,y:0.0,z:0.0},
                              radius:1.0,
                              color:'black',
                              fromCap:false,
                              toCap:false});
          viewer.render();

# addDashedCylinder(cylinderSpec)

Creates a dashed cylinder shape

Parameters:
Name Type Description
cylinderSpec CylinderSpec

View Source GLShape.ts, line 1475

# addIsosurface(data, isoSpec)

Create isosurface from voluemetric data.

Parameters:
Name Type Description
data VolumeData

volumetric input data
isoSpec IsoSurfaceSpec

volumetric data shape specification

View Source GLShape.ts, line 1547

Example
//the user can specify a selected region for the isosurface 
     $.get('../test_structs/benzene-homo.cube', function(data){
              var voldata = new $3Dmol.VolumeData(data, "cube");
              viewer.addIsosurface(voldata, {isoval: 0.01,
                                             color: "blue",
                                             alpha: 0.5,
                                             smoothness: 10});
              viewer.addIsosurface(voldata, {isoval: -0.01,
                                             color: "red",
                                             smoothness: 5,
                                             opacity:0.5,
                                             wireframe:true,
                                             clickable:true,
                                             callback:
                                             function() {
                                                 this.opacity = 0.0;
                                                 viewer.render( );
                                             }});
              viewer.setStyle({}, {stick:{}});
              viewer.zoomTo();
              viewer.render();
            });

# addLine(lineSpec)

Creates a line shape

Parameters:
Name Type Description
lineSpec LineSpec

View Source GLShape.ts, line 1494

Example
$3Dmol.download("pdb:2ABJ",viewer,{},function(){
              viewer.addLine({dashed:true,start:{x:0,y:0,z:0},end:{x:100,y:100,z:100}});
              viewer.render(callback);
          });

# addSphere(sphereSpec)

Creates a sphere shape

Parameters:
Name Type Description
sphereSpec SphereSpec

View Source GLShape.ts, line 1418

Example
viewer.addSphere({center:{x:0,y:0,z:0},radius:10.0,color:'red'});
     
     viewer.render();

# addVolumetricData(data, fmt, isoSpec)

Parameters:
Name Type Description
data string

Volumetric input data
fmt string

Input data format (e.g. 'cube' for cube file format)
isoSpec IsoSurfaceSpec

Volumetric data shape specification
Deprecated:
  • Use addIsosurface instead Creates custom shape from volumetric data

View Source GLShape.ts, line 1557

# updateStyle(newspec)

Update shape with new style specification

Parameters:
Name Type Description
newspec ShapeSpec

View Source GLShape.ts, line 1400

Example
let sphere = viewer.addSphere({center:{x:0,y:0,z:0},radius:10.0,color:'red'});
        sphere.updateStyle({color:'yellow',opacity:0.5});
        viewer.render();