3dmol / 3dmol.js Goto Github PK
View Code? Open in Web Editor NEWWebGL accelerated JavaScript molecular graphics library
Home Page: https://3dmol.org/
License: Other
WebGL accelerated JavaScript molecular graphics library
Home Page: https://3dmol.org/
License: Other
VMD has support for "PaperChain" and "Twister" cartoons for carbohydrates:
http://www.ncbi.nlm.nih.gov/pmc/articles/PMC3158682/#!po=53.7037
http://3dmol.csb.pitt.edu/viewer.html?pdb=1ycr&style=cartoon:thickness~0.1
I assume the back of the face of one side is poking through to the other side due to the differences in curvature.
addStyle seems to add style to the invert of the selection, not the selection itself
http://baoilleach.blogspot.co.uk/2015/02/cheminformaticsjs-open-babel.html
Noel is a crazy guy.
http://www.jsdelivr.com is a free versioned CDN for GitHub hosted (and other) JS libraries, CSS, etc. To add resources, you create a pull request at GitHub and ideally add an update.json file, e.g.
{
"packageManager": "github",
"name": "morris.js",
"repo": "morrisjs/morris.js",
"files": {
"include": ["morris.css", "morris.js", "morris.min.js"]
}
}
At that point, when 3Dmol.js releases are tagged on GitHub, JSDelivr will auto-update.
It seems natural to offer releases of 3Dmol.js through the service for distributed world-wide use.
Hi - I'm sure you know this, but just in case...
doc/$3Dmol.GLViewer.html (eg. on http://3dmol.csb.pitt.edu/doc/$3Dmol.GLViewer.html ) has links like: <a href="SphereSpec.html">SphereSpec</a> and similarly for ArrowSpec and ShapeSpec - but there is no SphereSpec.html file.
since webgl is limited to 2^16.. I have the code to breakup big meshes, just have to port it over..
pse is just a pickled format, but in binary. Here's a library for text pickle:
https://github.com/lalanotlistening/pickle-js
Couldn't find a binary unpickler.
this should be trivial.. basically just documentation and not dumping unnecessary stuff
The alpha value doesn't change the background color with setBackgroundColor
. I am trying to make the viewer completely transparent but it doesn't seem to change regardless of the alpha value. The color does change but not the transparency.
viewer.setBackgroundColor(0x0d0ddd, 0);
viewer.render();
Is there an option to set the alpha value through a data attribute?
Does the viewer fire events when rotating, translating and zooming the model?
I don't see events in the docs.
http://3dmol.csb.pitt.edu/doc/$3Dmol.GLViewer.html
Hi,
I was recently forwarded a link to this project - it looks great! I work with crystals, and I was wondering if there are any plans to support unit cell drawing or CIF unpacking.
If this isn't on the priority list, I could try implementing it myself and sending over a PR (likely on an upcoming slow Sunday). Let me know either way!
eg. 1MO7 and 1MO8 from pdb
expand value needs to be wrapped in parseInt.
The box expansion does not seem to have the selection in the middle.
Use JSmol as a subcomponent to translate different file types.
This will expand any selection to include all atoms on the same residue within a chain/model.
Most mol2 files include atomic partial charges. It would be awesome to use the potentials defined by the file rather than residue-based charges, e.g.:
1 O -3.9862 -0.0915 -0.4753 O.2 1 UNL11111 -0.4322
2 C -3.1086 -0.7606 0.0104 C.2 1 UNL11111 0.3255
3 C -1.9542 -0.0724 0.7328 C.3 1 UNL11111 -0.0217
4 H -2.0091 -0.2416 1.8344 H 1 UNL11111 0.1622
5 O -2.0231 1.3296 0.5822 O.3 1 UNL11111 -0.5655
The last column is always the partial charge. Open Babel's parser looks like this:
sscanf(buffer," %*s %1024s %lf %lf %lf %1024s %d %1024s %lf",
atmid, &x,&y,&z, temp_type, &resnum, resname, &pcharge);
This would imply that there's always(?) a token[8] entry with the floating-point partial charge.
edged (current), oval (jmol/pymol), flat, basic (cylinders for helices)
also thickness and height
nucliec sticks
I'd like to draw a line between two atoms.
I'm currently using viewer.addCylinder
, with a radius of 0.05.
I'd like to have a command like addLine (perhaps even allowing dotted lines...?).
It seems that jquery is used only in few places to load pdf from a server and read data attributes.
Will you consider removing the jquery dependency and use plain javascript?
I also think that 3Dmol is easier to remember than $3Dmol for the API.
Probably with pako
I've read in some old issues that mmCIF support is implemented already into 3dmol.js. Is that right?
I wanted to try a very simple case with a file downloaded straight from the PDB (PDB id 1smt). This is what I do:
<html>
<head>
<script src="http://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script>
</head>
<div style="height: 800px; width: 800px; position: relative;" class='viewer_3Dmoljs' data-href='1smt.cif'>
</div>
</html>
I only get an empty page and this in the js console:
Uncaught TypeError: Cannot read property 'id' of undefined (3Dmol-min.js:529)
I've also tried removing all headers from the mmCIF file and keeping only the _atom_site lines, but the error is the same. Also if I specify the file format as data-type='cif'
the error is the same.
Any ideas what am I doing wrong?
Thanks by the way for such a great piece of software :)
There is no tag to add to the embedded js viewer to use a MOL2 file to display the molecule. This functionality exists in the online, URL controlled version.
Similar to ray_trace_mode=1 in pymol. Some people who are not me like this...
As long as we don't mind applying exactly the same style to each subunit, this can be done very efficiently by just applying a transformation matrix. Probably would be nice to have an API that let the user turn the implicit assembly into an explicit model too.
test4
viewer.addIsosurface(voldata, {isoval: -0.01, color: "red", alpha: 0.95, smoothness: 5,
opacity:1.0, wireframe:true,linewidth:0.1,clickable:true, callback:
function() {
this.opacity = 1.;
viewer.render();
}});
viewer.addIsosurface(voldata, {isoval: -0.01, color: "red", alpha: 0.95, smoothness: 5,
opacity:1.0, wireframe:true,linewidth:0.1,clickable:true, callback:
function() {
this.opacity = 1.;
viewer.render();
}});
Can you please add build instructions and dependencies to the README and docs?
Java, node, npm, grunt...
https://github.com/dkoes/3Dmol.js/blob/master/README.md
http://3dmol.csb.pitt.edu/doc/index.html
Thanks
As far as I can tell, no browsers properly support gl_fragdepth at the moment, although some lie about it. But once they do..
Basically, pymol for the web. viewer.html will stay a dumb viewer though.
Takanori has some really cool looking volume rendering. Adding simple meshes shouldn't be too hard.
I get the following error message trying to download pdb id '1TUP':
No 'Access-Control-Allow-Origin' header is present on the requested resource.
If I understand it, the current spectrum coloring will color things based on residue or atom indices. For instance I can see that applying spectrum on a chain, I get an n-terminal to c-terminal spectrum.
It would be really cool to have the pymol-like feature, where spectrum can use the b-factors for the coloring. In fact the spectrum command in pymol can do quite a lot of things, all of those could be really useful.
Another very nice feature would be that spectrum worked also in surface representation (it looks like that's already in issue #79 ). Spectrum on b-factors (temperature factors or whatever property is actually written in the b-factors column) is especially useful in surface representation.
gzipped even
Format specification:
http://www.gaussian.com/g_tech/g_ur/f_formchk.htm
Will most certainly have read jmol code to understand how to interpret this quantum data.
1J5E for example
test12
viewer.setStyle({chain:'A'},{cartoon:{color:'spectrum'}});
viewer.setStyle({chain:'C'},{cartoon:{color:'red'}});
//all the chains are of color spectrum
Make zoomTo smarter - create a PCA aligned bounding box around the selection and fit the bounding box to the window (first two components match the longest and second longest dimensions). Choose the orientation where the orientation is most visible.
Most browsers seem to support this. Should be useful for accelerating spheres and possibly cylinders, but requires a revamp of the rendering code..
When we use 3DMol for the same file in either Mol2 or SDF format, we see two very different geometries. Also, with Mol2 files, hydrogens aren't shown, but they are with SDF.
https://gist.github.com/ghutchis/4243c0242423770d58a3
From some commits to now, it seems that hexadecimal color codes are not working anymore when using them in selections:
<html>
<head>
<script src="http://3Dmol.csb.pitt.edu/build/3Dmol.js"></script>
</head>
<div style="height: 800px; width: 800px; position: relative;" class='viewer_3Dmoljs'
data-href='1smt.pdb'
data-backgroundcolor='0xffffff'
data-select1='chain:A' data-style1='cartoon:color=0x00ff00'
data-select2='chain:B' data-style2='cartoon:color=0x00ffff'
>
</div>
</html>
What I get now is both chains colored in black, whilst that kind of thing used to work a few commits ago. If I specify color strings like 'red' or 'cyan' everything works fine.
test 19
viewer.addSurface($3Dmol.SurfaceType.VDW, {opacity:0.85, colorscheme:'greenCarbon'},{chain:'D'});
These can be used to efficiently expand a provided solution to all atoms within a specified distance. Expand is basic expansion. Within takes a selection object and distance and then the result can be combined with the rest of a selection object. Will work nicely with byres.
Matt is working on this.
probably implement this by interpreting spectrum is a property map of the resi with a gradient from the smallest to largest resi in the selection
add support for opacity property of cartoons
Note that transparent objects are not transparent to each other.
currently implement with a fixed font size for maximum readability
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.