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

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

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

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,
                                                linewidth:0.1,
                                                clickable:true,
                                                callback:
                                                function() {
                                                    this.opacity = 0.0;
                                                    viewer.render(callback);
                                                }});
                 viewer.setStyle({}, {stick:{}});
                 viewer.zoomTo();
                 viewer.render(callback);
               });
        //this specific example selects every atom in the

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

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

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,
                                                linewidth:0.1,
                                                clickable:true,
                                                callback:
                                                function() {
                                                    this.opacity = 0.0;
                                                    viewer.render(callback);
                                                }});
                 viewer.setStyle({}, {stick:{}});
                 viewer.zoomTo();
                 viewer.render(callback);
               });
        //this specific example selects every atom in the

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