Class: GLShape

$3Dmol. GLShape

new GLShape(stylespec) → {$3Dmol.GLShape}

Custom renderable shape

Parameters:

Name	Type	Description
`stylespec`	Object

Returns:

Type: $3Dmol.GLShape

Methods

addArrow(arrowSpec) → {$3Dmol.GLShape}

Creates an arrow shape

Parameters:

Name	Type	Description
`arrowSpec`	ArrowSpec

Returns:

Type: $3Dmol.GLShape

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) → {$3Dmol.GLShape}

Creates a box

Parameters:

Name	Type	Description
`boxSpec`	BoxSpec

Returns:

Type: $3Dmol.GLShape

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) → {$3Dmol.GLShape}

Creates a curved shape

Parameters:

Name	Type	Description
`curveSpec`	CurveSpec

Returns:

Type: $3Dmol.GLShape

addCustom(customSpec) → {$3Dmol.GLShape}

Creates a custom shape from supplied vertex and face arrays

Parameters:

Name	Type	Description
`customSpec`	CustomShapeSpec

Returns:

Type: $3Dmol.GLShape

addCylinder(cylinderSpec) → {$3Dmol.GLShape}

Creates a cylinder shape

Parameters:

Name	Type	Description
`cylinderSpec`	CylinderSpec

Returns:

Type: $3Dmol.GLShape

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) → {$3Dmol.GLShape}

Creates a dashed cylinder shape

Parameters:

Name	Type	Description
`cylinderSpec`	CylinderSpec

Returns:

Type: $3Dmol.GLShape

addIsosurface(data, isoSpec)

Create isosurface from voluemetric data.

Parameters:

Name	Type	Description
`data`	$3Dmol.VolumeData	volumetric input data
`isoSpec`	IsoSurfaceSpec	volumetric data shape specification

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) → {$3Dmol.GLShape}

Creates a line shape

Parameters:

Name	Type	Description
`lineSpec`	LineSpec

Returns:

Type: $3Dmol.GLShape

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) → {$3Dmol.GLShape}

Creates a sphere shape

Parameters:

Name	Type	Description
`sphereSpec`	SphereSpec

Returns:

Type: $3Dmol.GLShape

Example

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

updateStyle(newspec) → {$3Dmol.GLShape}

Update shape with new style specification

Parameters:

Name	Type	Description
`newspec`	ShapeSpec

Returns:

Type: $3Dmol.GLShape

Class: GLShape

$3Dmol. GLShape

new GLShape(sid, stylespec)

A GLShape is a collection of user specified shapes.

Parameters:

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

Extends

ShapeSpec

Methods

addArrow(arrowSpec) → {$3Dmol.GLShape}

Creates an arrow shape

Parameters:

Name	Type	Description
`arrowSpec`	ArrowSpec

Returns:

Type: $3Dmol.GLShape

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) → {$3Dmol.GLShape}

Creates a box

Parameters:

Name	Type	Description
`boxSpec`	BoxSpec

Returns:

Type: $3Dmol.GLShape

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) → {$3Dmol.GLShape}

Creates a curved shape

Parameters:

Name	Type	Description
`curveSpec`	CurveSpec

Returns:

Type: $3Dmol.GLShape

addCustom(customSpec) → {$3Dmol.GLShape}

Creates a custom shape from supplied vertex and face arrays

Parameters:

Name	Type	Description
`customSpec`	CustomShapeSpec

Returns:

Type: $3Dmol.GLShape

addCylinder(cylinderSpec) → {$3Dmol.GLShape}

Creates a cylinder shape

Parameters:

Name	Type	Description
`cylinderSpec`	CylinderSpec

Returns:

Type: $3Dmol.GLShape

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) → {$3Dmol.GLShape}

Creates a dashed cylinder shape

Parameters:

Name	Type	Description
`cylinderSpec`	CylinderSpec

Returns:

Type: $3Dmol.GLShape

addIsosurface(data, isoSpec)

Create isosurface from voluemetric data.

Parameters:

Name	Type	Description
`data`	$3Dmol.VolumeData	volumetric input data
`isoSpec`	IsoSurfaceSpec	volumetric data shape specification

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) → {$3Dmol.GLShape}

Creates a line shape

Parameters:

Name	Type	Description
`lineSpec`	LineSpec

Returns:

Type: $3Dmol.GLShape

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) → {$3Dmol.GLShape}

Creates a sphere shape

Parameters:

Name	Type	Description
`sphereSpec`	SphereSpec

Returns:

Type: $3Dmol.GLShape

Example

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

updateStyle(newspec) → {$3Dmol.GLShape}

Update shape with new style specification

Parameters:

Name	Type	Description
`newspec`	ShapeSpec

Returns:

Type: $3Dmol.GLShape