In-browser ultra-fast and lightweight renderer of the crystallographic information files (CIF) and VASP POSCAR structures, written in a pure JavaScript.
In a compiled form it is only one file player.html
about 450 Kb (100 Kb gzipped). See it online. Only browser is required. After the code is loaded, no internet connection is needed.
The modular JavaScript approach based on require.js is employed. Development layout is inside src
folder. Dependencies are three.js and math.js, as manifested in deps
folder. They are downloaded with the aid of Unix shell script prepare.sh
, and the needed parts are saved in the development layout. Compilation is done using build.sh
script, invoking Google's Closure Compiler (which is shipped with three.js, requires JVM).
The file player.html
can be embedded into the iframe HTML element. In this case, the parent webpage is checked, if it contains CIF or POSCAR file in the global variable playerdata as a string. If found, it is loaded and rendered. Additionally, supported files from anywhere on the web can be displayed. A file URL must be then passed via document.location.hash property (browser's address bar, after # symbol). However, if the file is served from another domain, the proxy for remote requests should be used. There are examples of PHP and Python proxies (not for production use) in src
folder. Obviously, it is safer to serve supported files from the same domain.
See the blog post.