# 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