Skip to content

Instantly share code, notes, and snippets.

@sbliven sbliven/ngltest.html
Created May 30, 2016

Embed
What would you like to do?
NGL test of spheres and labels
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script src="https://rawgit.com/arose/ngl/master/js/build/ngl.embedded.min.js"></script>
<script>
NGL.mainScriptFilePath = "https://rawgit.com/arose/ngl/master/js/build/ngl.embedded.min.js";
document.addEventListener( "DOMContentLoaded", function() {
var stage = new NGL.Stage( "viewport" );
stage.setParameters({backgroundColor:"white"} );
stage.loadFile( "rcsb://3pqr", format="pdb").then( function (o) {
//stage.loadFile( "http://localhost/~blivens/2hda.cif", { defaultRepresentation: true } ).then( function (o) {
o.addRepresentation("unitcell",{visible:true});
o.addRepresentation("cartoon",{assembly:"UNITCELL", color: 0xFF1111});
var pos = new Float32Array( [ 0, 0, 0, 20, 0, 0 ] );
var color = new Float32Array( [ 1, 0, 0, 1, 1, 0 ] )
var sphereBuffer = new NGL.SphereBuffer(
pos, // position (xyz)
color, // color (rgb)
new Float32Array( [ 5,5 ] ) // radius
);
o.addBufferRepresentation( sphereBuffer );
var cylinderBuffer = new NGL.CylinderBuffer(
new Float32Array( [ 0, 0, 0 ] ), // from position (xyz)
new Float32Array( [ 20, 0, 0 ] ), // to position (xyz)
new Float32Array( [ 1, 0, 0 ] ), // from color (rgb)
new Float32Array( [ 1, 1, 0 ] ), // to color (rgb)
new Float32Array( [ .5 ] ) // radius
);
o.addBufferRepresentation( cylinderBuffer );
var textBuffer = new NGL.TextBuffer(
pos,
[ 12,8 ],
[ 0,0,0, 0,0,0 ],
[ "A","B" ],
{zOffset: 6}
);
o.addBufferRepresentation( textBuffer );
});
} );
</script>
<div id="viewport" style="width:400px; height:300px;"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.