@ccp-nc/crystvis-js 0.4.13

package/lib/primitives/ellipsoid.js

@@ -0,0 +1,183 @@
+'use strict';
+
+import _ from 'lodash';
+import * as mjs from 'mathjs';
+import * as THREE from 'three';
+import {
+    unitSphere,
+} from './geometries.js';
+import {
+    DitherMaterial
+} from './dither.js';
+import {
+    addStaticVar
+} from '../utils.js';
+
+// Basic materials
+const _phong = new THREE.MeshPhongMaterial({});
+
+class EllipsoidMesh extends THREE.Mesh {
+
+    constructor(parameters = {}) {
+
+        const defaults = {
+            center: [0, 0, 0],
+            eigenvalues: [1, 1, 1],
+            eigenvectors: [
+                [1, 0, 0],
+                [0, 1, 0],
+                [0, 0, 1]
+            ],
+            color: 0xff0000,
+            opacity: 0.5,
+            opacityMode: EllipsoidMesh.DITHER,
+            showCircles: true,
+            showAxes: true,
+            scalingFactor: 1.0
+        };
+
+        parameters = _.merge(defaults, parameters);
+
+        var geometry = unitSphere;
+        var material;
+
+        var c = new THREE.Color(parameters.color);
+
+        switch (parameters.opacityMode) {
+            case EllipsoidMesh.DITHER:
+                material = new DitherMaterial({
+                    color: c,
+                    opacity: parameters.opacity,
+                    shiftSeed: parameters.ditherSeed
+                });
+                break;
+            case EllipsoidMesh.PHONG:
+                material = new THREE.MeshPhongMaterial({
+                    transparent: true,
+                    color: c,
+                    opacity: parameters.opacity
+                });
+                break;
+            default:
+                throw new Error('Invalid opacityMode argument passed to EllipsoidMesh');
+        }
+
+        super(geometry, material);
+
+        if (parameters.showCircles) {
+
+            let matline = new THREE.LineBasicMaterial({
+                color: new THREE.Color(c),
+            });
+            let geoline = new THREE.CircleBufferGeometry(1.0, 32);
+            geoline = new THREE.EdgesGeometry(geoline);
+
+            let cseg = new THREE.LineSegments(geoline, matline);
+            this.add(cseg);
+            cseg = new THREE.LineSegments(geoline, matline);
+            cseg.rotateX(Math.PI / 2.0);
+            this.add(cseg);
+            cseg = new THREE.LineSegments(geoline, matline);
+            cseg.rotateY(Math.PI / 2.0);
+            this.add(cseg);
+
+        }
+
+        if (parameters.showAxes) {
+
+            let matline = new THREE.LineBasicMaterial({
+                color: new THREE.Color(c),
+            });
+
+            let geoline = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(-1, 0, 0),
+                new THREE.Vector3(1, 0, 0)
+            ]);
+
+            let cseg = new THREE.Line(geoline, matline);
+            this.add(cseg);
+            cseg = new THREE.Line(geoline, matline);
+            cseg.rotateZ(Math.PI / 2.0);
+            this.add(cseg);
+            cseg = new THREE.Line(geoline, matline);
+            cseg.rotateY(Math.PI / 2.0);
+            this.add(cseg);
+        }
+
+        let c0 = parameters.center;
+
+        if (!(c0 instanceof THREE.Vector3)) {
+            c0 = new THREE.Vector3(c0[0], c0[1], c0[2]);
+        }
+        this.position.copy(c0);            
+
+        this._scalefactor = parameters.scalingFactor;
+
+        this.eigenvalues = parameters.eigenvalues;
+        this.eigenvectors = parameters.eigenvectors;
+
+        this.renderOrder = 0.5;
+    }
+
+    get eigenvalues() {
+        return Array.from(this._eigenvalues);
+    }
+
+    set eigenvalues(v) {
+        this._eigenvalues = v;
+        this.scalingFactor = this._scalefactor;
+    }
+
+    get eigenvectors() {
+        return JSON.parse(JSON.stringify(this._eigenvectors));
+    }
+
+    set eigenvectors(v) {
+        this._eigenvectors = v;
+
+        var basis = _.map(_.range(3), (i) => {
+            return new THREE.Vector3(v[0][i],
+                v[1][i],
+                v[2][i]).normalize();
+        });
+        var rotm = new THREE.Matrix4();
+        rotm.makeBasis(basis[0], basis[1], basis[2]);
+        this.setRotationFromMatrix(rotm);
+    }
+
+    get color() {
+        return this.material.color;
+    }
+
+    set color(c) {
+        // Change all colors
+        c = new THREE.Color(c);
+        this.material.color = c;
+        for (let i = 0; i < this.children.length; ++i) {
+            this.children[i].material.color = c;
+        }
+    }
+
+    get opacity() {
+        return this.material.opacity;
+    }
+
+    set opacity(o) {
+        this.material.opacity = o;
+    }
+
+    get scalingFactor() {
+        return this._scalefactor;
+    }
+
+    set scalingFactor(s) {
+        this._scalefactor = s;
+        this.scale.fromArray(mjs.multiply(this._eigenvalues, s));
+    }
+}
+
+addStaticVar(EllipsoidMesh, 'DITHER', 0);
+addStaticVar(EllipsoidMesh, 'PHONG', 1);
+
+export {
+    EllipsoidMesh
+}

package/lib/primitives/geometries.js

@@ -0,0 +1,20 @@
+'use strict';
+
+/**
+ * @fileoverview Geometries used multiple times, generated once for economy
+ */
+
+import * as THREE from 'three';
+
+const resolution = 16;
+
+const unitSphere = new THREE.SphereBufferGeometry(1.0, resolution, resolution);
+const unitCylinder = new THREE.CylinderBufferGeometry(1, 1, 1, resolution);
+unitCylinder.rotateX(Math.PI / 2.0);
+const unitCircle = new THREE.CircleBufferGeometry(1.0, resolution*2);
+
+export {
+    unitSphere,
+    unitCylinder,
+    unitCircle
+};

package/lib/primitives/index.js

@@ -0,0 +1,48 @@
+'use strict';
+
+/** 
+ * @fileoverview Basic objects rendered by Renderer, derived from THREE.js
+ * classes
+ * @module
+ */
+
+import {
+    AtomMesh,
+    BondMesh,
+    AuraMesh
+} from './atoms.js'
+
+import {
+    BoxMesh,
+    AxesMesh
+} from './cell.js'
+
+import {
+    ImageSprite,
+    TextSprite
+} from './sprites.js'
+
+import {
+    EllipsoidMesh
+} from './ellipsoid.js'
+
+import {
+    LineMesh
+} from './shapes.js'
+
+import {
+    IsosurfaceMesh
+} from './isosurface.js'
+
+export {
+    AtomMesh,
+    BondMesh,
+    AuraMesh,
+    BoxMesh,
+    AxesMesh,
+    EllipsoidMesh,
+    LineMesh,
+    IsosurfaceMesh,
+    ImageSprite,
+    TextSprite
+}

package/lib/primitives/isosurface.js

@@ -0,0 +1,171 @@
+'use strict';
+
+import _ from 'lodash';
+import * as THREE from 'three';
+import IsoSurf from 'isosurface';
+import {
+    DitherMaterial
+} from './dither.js';
+import { cellMatrix3, addStaticVar } from '../utils.js';
+
+// Basic materials
+const _phong = new THREE.MeshPhongMaterial({});
+
+class IsosurfaceMesh extends THREE.Mesh {
+
+    constructor(field, threshold, lattice, parameters={}) {
+        /**
+         * Build an isosurface from the data found in field, using threshold
+         * as a cutoff. Field must be a triple nested array ordered in such a
+         * way that:
+         *  
+         * field[x][y][z]
+         *
+         * is the value at x, y, z. Dimensions must be consistent. Field will
+         * be considered as spanning the orthorombic cell. If no cell is 
+         * passed, field's own dimensions will be used.
+         *
+         * Three methods are available:
+         * 0 = surface nets
+         * 1 = marching cubes
+         * 2 = marching tetrahedra
+         * 
+         * @param {Array} field             Volumetric data
+         * @param {float} threshold         Isosurface threshold 
+         * @param {Array} lattice           Unit cell on which the data is defined
+         * @param {Object} parameters       Options:
+         *                                      color
+         *                                      opacity
+         *                                      opacityMode [IsosurfaceMesh.RENDER_DITHER,
+         *                                                   IsosurfaceMesh.RENDER_PHONG,
+         *                                                   IsosurfaceMesh.RENDER_WFRAME]
+         *                                      isoMethod   [IsosurfaceMesh.ISO_SURFACE_NETS,
+         *                                                   IsosurfaceMesh.ISO_MARCHING_CUBES
+         *                                                   IsosurfaceMesh.ISO_MARCHING_TETRAHEDRA]
+         */
+
+        const defaults = {
+            color: 0x00ff00,
+            opacity: 0.5,
+            opacityMode: IsosurfaceMesh.RENDER_DITHER,
+            isoMethod: IsosurfaceMesh.ISO_SURFACE_NETS
+        }
+
+        parameters = _.merge(defaults, parameters);
+
+        // First compute the isosurface vertices and faces
+        var dims = [0, 0, 0];
+
+        try {
+            dims[0] = field.length;
+            dims[1] = field[0].length;
+            dims[2] = field[0][0].length;
+        } catch (e) {
+            // If we're here, something is wrong with field
+            throw Error('Invalid field for isosurface rendering');
+        }
+
+        if (lattice instanceof Array) {
+            lattice = cellMatrix3(lattice);    
+        }
+
+        var isofunc = IsoSurf[parameters.isoMethod];
+
+        if (isofunc == null) {
+            throw Error('Invalid method for isosurface rendering');
+        }
+
+        var mesh = isofunc(dims, function(x, y, z) {
+            return field[x][y][z] - threshold;
+        });
+
+        // Convert positions to absolute coordinates
+        var abspos = mesh.positions.map(function(xyz) {
+            return (new THREE.Vector3(xyz[0] / dims[0],
+                xyz[1] / dims[1],
+                xyz[2] / dims[2])).applyMatrix3(lattice);
+        });
+
+        // Now generate a mesh geometry
+        var geometry = new THREE.BufferGeometry();
+
+        var verts = [];
+        for (let i = 0; i < mesh.cells.length; ++i) {
+            var face = mesh.cells[i];
+            for (var j = 0; j < 3; ++j) {
+                var v = abspos[face[j]];
+                verts.push(v.x);
+                verts.push(v.y);
+                verts.push(v.z);
+            }
+        }
+
+        verts = new Float32Array(verts);
+        geometry.setAttribute('position', new THREE.BufferAttribute(verts, 3));
+        geometry.computeVertexNormals();
+        geometry.computeFaceNormals();
+
+        var c = new THREE.Color(parameters.color);
+        var material;
+
+        switch (parameters.opacityMode) {
+            case IsosurfaceMesh.RENDER_DITHER:
+                material = new DitherMaterial({
+                    color: c,
+                    opacity: parameters.opacity
+                });
+                break;
+            case IsosurfaceMesh.RENDER_PHONG:
+                material = new THREE.MeshPhongMaterial({
+                    transparent: true,
+                    color: c,
+                    opacity: parameters.opacity
+                });
+                break;
+            case IsosurfaceMesh.RENDER_WFRAME:
+                // Same as PHONG, but with wireframe set on
+                material = new THREE.MeshPhongMaterial({
+                    color: c,
+                    wireframe: true
+                });
+                break;
+            default:
+                throw new Error('Invalid opacityMode argument passed to IsosurfaceMesh');
+        }
+
+        super(geometry, material);
+
+        this.opacityMode = parameters.opacityMode;
+        this.renderOrder = 0.5;
+    }
+
+    get color() {
+        return this.material.color;
+    }
+
+    set color(c) {
+        c = new THREE.Color(c);
+        this.material.color = c;
+    }
+
+    get opacity() {
+        return this.material.opacity;
+    }
+
+    set opacity(o) {
+        if (this.opacityMode !== IsosurfaceMesh.RENDER_WFRAME) {
+            this.material.opacity = o;
+        }
+    }
+
+}
+
+addStaticVar(IsosurfaceMesh, 'RENDER_DITHER', 0);
+addStaticVar(IsosurfaceMesh, 'RENDER_PHONG', 1);
+addStaticVar(IsosurfaceMesh, 'RENDER_WFRAME', 2);
+
+addStaticVar(IsosurfaceMesh, 'ISO_SURFACE_NETS', 'surfaceNets');
+addStaticVar(IsosurfaceMesh, 'ISO_MARCHING_CUBES', 'marchingCubes');
+addStaticVar(IsosurfaceMesh, 'ISO_MARCHING_TETRAHEDRA', 'marchingTetrahedra');
+
+export { IsosurfaceMesh };

package/lib/primitives/shapes.js

@@ -0,0 +1,100 @@
+'use strict';
+
+/** 
+ * @fileoverview Basic primitives for geometric shapes
+ * @module 
+ */
+
+import _ from 'lodash';
+import * as THREE from 'three';
+import {
+    AtomImage
+} from '../model.js';
+
+class LineMesh extends THREE.Line {
+
+    /**
+     * Create a line to draw on the model
+     * 
+     * @param  {Array | AtomImage}  p1         Line starting point
+     * @param  {Array | AtomImage}  p2         Line end point
+     * @param  {Object} parameters             Options:
+     *                                             - color
+     *                                             - dashed
+     *                                             - linewidth
+     *                                             
+     */
+    constructor(p1, p2, parameters = {}) {
+
+        var defaults = {
+            color: 0xffffff,
+            dashed: false,
+            linewidth: 1,
+            onOverlay: false
+        };
+
+        parameters = _.merge(defaults, parameters);
+
+        // Interpret the points
+        if (p1 instanceof AtomImage) {
+            p1 = p1.xyz;
+        }
+
+        if (p2 instanceof AtomImage) {
+            p2 = p2.xyz;
+        }
+
+        // We position this in the middle point
+        var center = new THREE.Vector3(p1[0]+p2[0], p1[1]+p2[1], p1[2]+p2[2]).divideScalar(2.0);
+        var diff = new THREE.Vector3(p1[0]-p2[0], p1[1]-p2[1], p1[2]-p2[2]).divideScalar(2.0);
+
+        var geo = new THREE.BufferGeometry().setFromPoints([diff, diff.clone().negate()]);
+
+        var mat;
+
+        if (parameters.dashed) {
+            mat = new THREE.LineDashedMaterial({
+                color: new THREE.Color(parameters.color),
+                linewidth: parameters.linewidth,
+                dashSize: 0.15,
+                gapSize: 0.05,
+                depthTest: !parameters.onOverlay
+            });
+        } else {
+            mat = new THREE.LineBasicMaterial({
+                color: new THREE.Color(parameters.color),
+                linewidth: parameters.linewidth,
+                depthTest: !parameters.onOverlay
+            });
+        }
+
+        super(geo, mat);
+        this.position.copy(center);
+
+        if (parameters.onOverlay)
+            this.renderOrder = 9999;
+        this.computeLineDistances();
+
+    }
+
+    get color() {
+        return this.material.color.getHex();
+    }
+
+    set color(c) {
+        this.material.color = new THREE.Color(c);
+    }
+
+    get linewidth() {
+        return this.material.linewidth;
+    }
+
+    set linewidth(lw) {
+        this.material.linewidth = lw;
+    }
+
+}
+
+export {
+    LineMesh
+}

package/lib/primitives/sprites.js

@@ -0,0 +1,172 @@
+'use strict';
+
+/**
+ * @fileoverview Primitive classes for Sprites and Billboards of various types
+ */
+
+import _ from 'lodash';
+import * as THREE from 'three';
+import {
+    RubikMedium
+} from '../assets/fonts/index.js';
+
+
+class ImageSprite extends THREE.Sprite {
+    /**
+     * Create an ImageSprite object
+     * 
+     * @param  {Array}          position    Position of the sprite
+     * @param  {Object}         parameters  Options:
+     *                                          position
+     *                                          size
+     *                                          color
+     * 
+     */
+    constructor(map, parameters = {}) {
+
+        var defaults = {
+            position: [0, 0, 0],
+            size: 1.0,
+            color: 0xffffff,
+            onOverlay: false
+        };
+
+        parameters = _.merge(defaults, parameters);
+
+        var p = parameters.position;
+
+        if (p instanceof Array) {
+            p = new THREE.Vector3(p[0], p[1], p[2]);
+        }
+
+
+        if (!(map instanceof THREE.Texture)) {
+            map = new THREE.TextureLoader().load(map);
+        }
+        var smat = new THREE.SpriteMaterial({
+            map: map,
+            color: parameters.color,
+            depthTest: !parameters.onOverlay
+        });
+
+        super(smat);
+
+        this.position.copy(p);
+        var s = parameters.size;
+        this.scale.copy(new THREE.Vector3(s, s, s));
+        this.renderOrder = 2;
+
+        if (parameters.onOverlay)
+            this.renderOrder = 9999;
+    }
+
+    get size() {
+        return this.scale.x;
+    }
+
+    set size(s) {
+        this.scale.set(s, s, s);
+    }
+
+    get color() {
+        return this.material.color.getHex();
+    }
+
+    set color(c) {
+        this.material.color = new THREE.Color(c);
+        this.needsUpdate = true;
+    }
+}
+
+class TextSprite extends THREE.Mesh {
+
+
+    constructor(text, parameters = {}) {
+
+        var defaults = {
+            position: [0, 0, 0],
+            font: RubikMedium,
+            color: 0xffffff,
+            opacity: 1.0,
+            height: 1.0,
+            faceCamera: false,
+            fixScale: false,
+            shift: [0,0,0],
+            geometryOptions: {},
+            onOverlay: false
+        };
+
+        parameters = _.merge(defaults, parameters);
+
+        var p = parameters.position;
+
+        if (p instanceof Array) {
+            p = new THREE.Vector3(p[0], p[1], p[2]);
+        }
+
+        // Create the geometry
+        var geo = parameters.font.getTextGeometry(text);
+
+        // Calculate the scale
+        var targScale = parameters.height / geo.layout.height;
+
+        // Create the material
+        var mat = parameters.font.getTextMaterial(parameters.color,
+            parameters.opacity,
+            parameters.faceCamera,
+            parameters.fixScale,
+            targScale, 
+            parameters.shift, 
+            !parameters.onOverlay);
+
+        super(geo, mat);
+        if (!parameters.faceCamera)
+            this.scale.set(targScale,-targScale,targScale);
+        this.position.copy(p);
+
+        if (parameters.onOverlay)
+            this.renderOrder = 9999;
+    }
+
+    get color() {
+        return this.material.uniforms.color.value.getHex();
+    }
+
+    set color(c) {
+        this.material.uniforms.color.value = new THREE.Color(c);
+        this.material.uniformsNeedUpdate = true;
+    }
+
+    get opacity() {
+        return this.material.uniforms.opacity.value;
+    }
+
+    set opacity(o) {
+        this.material.uniforms.opacity.value = o;
+        this.material.uniformsNeedUpdate = true;
+    }
+
+    get targScale() {
+        return this.material.uniforms.targScale.value;
+    }
+
+    set targScale(s) {
+        this.material.uniforms.opacity.value = s;
+        this.material.uniformsNeedUpdate = true;
+    }
+
+    get shift() {
+        return this.material.uniforms.shift.value.toArray();
+    }
+
+    set shift(s) {
+        this.material.uniforms.shift.value = s;
+        this.material.uniformsNeedUpdate = true;
+    }
+
+}
+
+export {
+    ImageSprite,
+    TextSprite
+}