Class: GLShape

Constructor

new GLShape(sid, stylespec)

Custom renderable shape

Parameters:

Name	Type	Description
`sid`	number	Unique identifier
`stylespec`	ShapeSpec	shape style specification

Source: GLShape.ts

Extends

ShapeSpec

Classes

GLShape
GLShape

Members

callback :Func

function to call on click

Type:

Func

Overrides: ShapeSpec#callback
Source: GLShape.ts

clickable :boolean

if true, user can click on object to trigger callback

Type:

boolean

Overrides: ShapeSpec#clickable
Source: GLShape.ts

color :ColorSpec|Array

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

Type:

ColorSpec | Array

Overrides: ShapeSpec#color
Source: GLShape.ts

frame :number

if set, only display in this frame of an animation

Type:

number

Overrides: ShapeSpec#frame
Source: GLShape.ts

hidden :boolean

if true, do not display object

Type:

boolean

Overrides: ShapeSpec#hidden
Source: GLShape.ts

hover_callback :Func

hover callback

Type:

Func

Overrides: ShapeSpec#hover_callback
Source: GLShape.ts

hoverable :boolean

if true, user can hover on object to trigger callback

Type:

boolean

Overrides: ShapeSpec#hoverable
Source: GLShape.ts

intersectionShape :IntersectionShapes

Type:

IntersectionShapes

Source: GLShape.ts

linewidth :number

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

Type:

number

Overrides: ShapeSpec#linewidth
Source: GLShape.ts

opacity :number

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

Type:

number

Overrides: ShapeSpec#opacity
Source: GLShape.ts

unhover_callback :Func

unhover callback

Type:

Func

Overrides: ShapeSpec#unhover_callback
Source: GLShape.ts

wireframe :boolean

draw as wireframe, not surface

Type:

boolean

Overrides: ShapeSpec#wireframe
Source: GLShape.ts

Methods

addArrow(arrowSpec)

Creates an arrow shape

Parameters:

Name	Type	Description
`arrowSpec`	ArrowSpec

Source: GLShape.ts

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

Source: GLShape.ts

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

Source: GLShape.ts

addCustom(customSpec)

Creates a custom shape from supplied vertex and face arrays

Parameters:

Name	Type	Description
`customSpec`	CustomShapeSpec

Source: GLShape.ts

addCylinder(cylinderSpec)

Creates a cylinder shape

Parameters:

Name	Type	Description
`cylinderSpec`	CylinderSpec

Source: GLShape.ts

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

Source: GLShape.ts

addIsosurface(data, isoSpec)

Create isosurface from voluemetric data.

Parameters:

Name	Type	Description
`data`	VolumeData	volumetric input data
`isoSpec`	IsoSurfaceSpec	volumetric data shape specification

Source: GLShape.ts

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

Source: GLShape.ts

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

Source: GLShape.ts

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
Source: GLShape.ts

updateStyle(newspec)

Update shape with new style specification

Parameters:

Name	Type	Description
`newspec`	ShapeSpec

Source: GLShape.ts

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();