## 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

- ShapeSpec

### Classes

GLShape
GLShape

# Members

Type: `Func`

#### # callback Optional

function to call on click

Overrides:
  - ShapeSpec#callback

View Source GLShape.ts, line 1595

Type: `boolean`

#### # clickable Optional

if true, user can click on object to trigger callback

Overrides:
  - ShapeSpec#clickable

View Source GLShape.ts, line 1590

Type: `ColorSpec` | `Array`

#### # color Optional

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

Overrides:
  - ShapeSpec#color

View Source GLShape.ts, line 1565

Type: `number`

#### # frame Optional

if set, only display in this frame of an animation

Overrides:
  - ShapeSpec#frame

View Source GLShape.ts, line 1615

Type: `boolean`

#### # hidden Optional

if true, do not display object

Overrides:
  - ShapeSpec#hidden

View Source GLShape.ts, line 1580

Type: `Func`

#### # hover_callback Optional

hover callback

Overrides:
  - ShapeSpec#hover_callback

View Source GLShape.ts, line 1605

Type: `boolean`

#### # hoverable Optional

if true, user can hover on object to trigger callback

Overrides:
  - ShapeSpec#hoverable

View Source GLShape.ts, line 1600

Type: `IntersectionShapes`

#### # intersectionShape

View Source GLShape.ts, line 580

Type: `number`

#### # linewidth Optional

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

Overrides:
  - ShapeSpec#linewidth

View Source GLShape.ts, line 1585

Type: `number`

#### # opacity Optional

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

Overrides:
  - ShapeSpec#opacity

View Source GLShape.ts, line 1570

Type: `Func`

#### # unhover_callback Optional

unhover callback

Overrides:
  - ShapeSpec#unhover_callback

View Source GLShape.ts, line 1610

Type: `boolean`

#### # wireframe Optional

draw as wireframe, not surface

Overrides:
  - ShapeSpec#wireframe

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