Constructor
new GLShape(sid, stylespec)
Custom renderable shape
| Name | Type | Description |
|---|---|---|
sid | number | Unique identifier |
stylespec | ShapeSpec | shape style specification |
- Source
Extends
Classes
Members
callback :Func
function to call on click
- Func
- Overrides
- Source
clickable :boolean
if true, user can click on object to trigger callback
- boolean
- Overrides
- Source
color :ColorSpec|Array
Either a single color for the whole object or an array specifying the color at each vertex (CustomShapeSpec).
- ColorSpec |
Array
- Overrides
- Source
contextMenuEnabled :boolean
if true, user can right-click or long press to trigger callback
- boolean
- Overrides
- Source
frame :number
if set, only display in this frame of an animation
- number
- Overrides
- Source
hidden :boolean
if true, do not display object
- boolean
- Overrides
- Source
hover_callback :Func
hover callback
- Func
- Overrides
- Source
hoverable :boolean
if true, user can hover on object to trigger callback
- boolean
- Overrides
- Source
intersectionShape :IntersectionShapes
- IntersectionShapes
- Source
linewidth :number
width of line for wireframe rendering No longer supported by most browsers
- number
- Overrides
- Source
opacity :number
transparency, between 0 (invisible) and 1 (opaque)
- number
- Overrides
- Source
unhover_callback :Func
unhover callback
- Func
- Overrides
- Source
wireframe :boolean
draw as wireframe, not surface
- boolean
- Overrides
- Source
Methods
addArrow(arrowSpec)
Creates an arrow shape
| Name | Type | Description |
|---|---|---|
arrowSpec | ArrowSpec |
- Source
$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
| Name | Type | Description |
|---|---|---|
boxSpec | BoxSpec |
- Source
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
| Name | Type | Description |
|---|---|---|
curveSpec | CurveSpec |
- Source
addCustom(customSpec)
Creates a custom shape from supplied vertex and face arrays
| Name | Type | Description |
|---|---|---|
customSpec | CustomShapeSpec |
- Source
addCylinder(cylinderSpec)
Creates a cylinder shape
| Name | Type | Description |
|---|---|---|
cylinderSpec | CylinderSpec |
- Source
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
| Name | Type | Description |
|---|---|---|
cylinderSpec | CylinderSpec |
- Source
addIsosurface(data, isoSpec)
Create isosurface from volumetric data.
| Name | Type | Description |
|---|---|---|
data | VolumeData | volumetric input data |
isoSpec | IsoSurfaceSpec | volumetric data shape specification |
- Source
//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
| Name | Type | Description |
|---|---|---|
lineSpec | LineSpec |
- Source
$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
| Name | Type | Description |
|---|---|---|
sphereSpec | SphereSpec |
- Source
viewer.addSphere({center:{x:0,y:0,z:0},radius:10.0,color:'red'});
viewer.render();addVolumetricData(data, fmt, isoSpec)
| 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
updateStyle(newspec)
Update shape with new style specification
| Name | Type | Description |
|---|---|---|
newspec | ShapeSpec |
- Source
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();