solvespace/res/threejs/SolveSpaceControls.js

window.devicePixelRatio = window.devicePixelRatio || 1;

SolvespaceCamera = function(renderWidth, renderHeight, scale, up, right, offset) {
    THREE.Camera.call(this);

    this.type = 'SolvespaceCamera';

    this.renderWidth = renderWidth;
    this.renderHeight = renderHeight;
    this.zoomScale = scale; /* Avoid namespace collision w/ THREE.Object.scale */
    this.up = up;
    this.right = right;
    this.offset = offset;
    this.depthBias = 0;

    this.updateProjectionMatrix();
};

SolvespaceCamera.prototype = Object.create(THREE.Camera.prototype);
SolvespaceCamera.prototype.constructor = SolvespaceCamera;
SolvespaceCamera.prototype.updateProjectionMatrix = function() {
    var temp = new THREE.Matrix4();
    var offset = new THREE.Matrix4().makeTranslation(this.offset.x, this.offset.y, this.offset.z);
    // Convert to right handed- do up cross right instead.
    var n = new THREE.Vector3().crossVectors(this.up, this.right);
    var rotate = new THREE.Matrix4().makeBasis(this.right, this.up, n);
    rotate.transpose();
    /* Transpose of rotation matrix == inverse. Rotating the camera by a
       basis is equivalent to rotating an object by the inverse of the
       basis. To mimic Solvespace's behavior, we pan relative to the camera.
       So we need to be rotated to where the camera is pointing before panning.
       See: https://en.wikipedia.org/wiki/Change_of_basis#Two_dimensions */

    /* TODO: If we want perspective, we need an additional matrix
       here which will modify w for perspective divide. */
    var scale = new THREE.Matrix4().makeScale(2 * this.zoomScale / this.renderWidth,
        2 * this.zoomScale / this.renderHeight, this.zoomScale / 30000.0);

    temp.multiply(scale);
    temp.multiply(rotate);
    temp.multiply(offset);

    this.projectionMatrix.copy(temp);
};

SolvespaceCamera.prototype.NormalizeProjectionVectors = function() {
    /* After rotating, up and right may no longer be orthogonal.
    However, their cross product will produce the correct
    rotated plane, and we can recover an orthogonal basis. */
    var n = new THREE.Vector3().crossVectors(this.right, this.up);
    this.up = new THREE.Vector3().crossVectors(n, this.right);
    this.right.normalize();
    this.up.normalize();
};

SolvespaceCamera.prototype.rotate = function(right, up) {
    var oldRight = new THREE.Vector3().copy(this.right).normalize();
    var oldUp = new THREE.Vector3().copy(this.up).normalize();
    this.up.applyAxisAngle(oldRight, up);
    this.right.applyAxisAngle(oldUp, right);
    this.NormalizeProjectionVectors();
};

SolvespaceCamera.prototype.offsetProj = function(right, up) {
    var shift = new THREE.Vector3(right * this.right.x + up * this.up.x,
        right * this.right.y + up * this.up.y,
        right * this.right.z + up * this.up.z);
    this.offset.add(shift);
};

/* Calculate the offset in terms of up and right projection vectors
that will preserve the world coordinates of the current mouse position after
the zoom. */
SolvespaceCamera.prototype.zoomTo = function(x, y, delta) {
    // Get offset components in world coordinates, in terms of up/right.
    var projOffsetX = this.offset.dot(this.right);
    var projOffsetY = this.offset.dot(this.up);

    /* Remove offset before scaling so, that mouse position changes
    proportionally to the model and independent of current offset. */
    var centerRightI = x/this.zoomScale - projOffsetX;
    var centerUpI = y/this.zoomScale - projOffsetY;
    var zoomFactor;

    /* Zoom 20% every 100 delta. */
    if(delta < 0) {
        zoomFactor = (-delta * 0.002 + 1);
    }
    else if(delta > 0) {
        zoomFactor = (delta * (-1.0/600.0) + 1);
    }
    else {
        return;
    }

    this.zoomScale = this.zoomScale * zoomFactor;
    var centerRightF = x/this.zoomScale - projOffsetX;
    var centerUpF = y/this.zoomScale - projOffsetY;

    this.offset.addScaledVector(this.right, centerRightF - centerRightI);
    this.offset.addScaledVector(this.up, centerUpF - centerUpI);
};

SolvespaceControls = function(object, domElement) {
    var _this = this;
    this.object = object;
    this.domElement = ( domElement !== undefined ) ? domElement : document;

    var threePan = new Hammer.Pan({event : 'threepan', pointers : 3, enable : false});
    var panAfterTap = new Hammer.Pan({event : 'panaftertap', enable : false});

    this.touchControls = new Hammer.Manager(domElement, {
        recognizers: [
            [Hammer.Pinch, { enable: true }],
            [Hammer.Pan],
            [Hammer.Tap],
        ]
    });

    this.touchControls.add(threePan);
    this.touchControls.add(panAfterTap);

    var changeEvent = {
        type: 'change'
    };
    var startEvent = {
        type: 'start'
    };
    var endEvent = {
        type: 'end'
    };

    var _changed = false;
    var _offsetPrev = new THREE.Vector2(0, 0);
    var _offsetCur = new THREE.Vector2(0, 0);
    var _rotatePrev = new THREE.Vector2(0, 0);
    var _rotateCur = new THREE.Vector2(0, 0);

    // Used during touch events.
    var _rotateOrig = new THREE.Vector2(0, 0);
    var _offsetOrig = new THREE.Vector2(0, 0);
    var _prevScale = 1.0;

    this.handleEvent = function(event) {
        if (typeof this[event.type] == 'function') {
            this[event.type](event);
        }
    }

    function mousedown(event) {
        event.preventDefault();
        event.stopPropagation();

        switch (event.button) {
            case 0:
                _rotateCur.set(event.screenX,
                               event.screenY);
                _rotatePrev.copy(_rotateCur);
                document.addEventListener('mousemove', mousemove_rotate, false);
                document.addEventListener('mouseup', mouseup, false);
                break;
            case 2:
                _offsetCur.set(event.screenX / window.devicePixelRatio,
                               event.screenY / window.devicePixelRatio);
                _offsetPrev.copy(_offsetCur);
                document.addEventListener('mousemove', mousemove_pan, false);
                document.addEventListener('mouseup', mouseup, false);
                break;
            default:
                break;
        }
    }

    function wheel( event ) {
        event.preventDefault();
        /* FIXME: Width and height might not be supported universally, but
        can be calculated? */
        var box = _this.domElement.getBoundingClientRect();
        object.zoomTo(event.clientX - box.width/2 - box.left,
             -(event.clientY - box.height/2 - box.top), event.deltaY);
        _changed = true;
    }

    function mousemove_rotate(event) {
        _rotateCur.set(event.screenX,
                       event.screenY);
        var diff = new THREE.Vector2().subVectors(_rotateCur, _rotatePrev)
            .multiplyScalar(1 / object.zoomScale);
        object.rotate(-0.3 * Math.PI / 180 * diff.x * object.zoomScale,
             -0.3 * Math.PI / 180 * diff.y * object.zoomScale);
        _changed = true;
        _rotatePrev.copy(_rotateCur);
    }

    function mousemove_pan(event) {
        _offsetCur.set(event.screenX / window.devicePixelRatio,
                       event.screenY / window.devicePixelRatio);
        var diff = new THREE.Vector2().subVectors(_offsetCur, _offsetPrev)
            .multiplyScalar(window.devicePixelRatio / object.zoomScale);
        object.offsetProj(diff.x, -diff.y);
        _changed = true;
        _offsetPrev.copy(_offsetCur);
    }

    function mouseup(event) {
        /* TODO: Opera mouse gestures will intercept this event, making it
        possible to have multiple mousedown events consecutively without
        a corresponding mouseup (so multiple viewports can be rotated/panned
        simultaneously). Disable mouse gestures for now. */
        event.preventDefault();
        event.stopPropagation();

        switch (event.button) {
            case 0:
                document.removeEventListener('mousemove', mousemove_rotate);
                document.removeEventListener('mouseup', mouseup);
                break;
            case 2:
                document.removeEventListener('mousemove', mousemove_pan);
                document.removeEventListener('mouseup', mouseup);
                break;
        }

        _this.dispatchEvent(endEvent);
    }

    function pan(event) {
        /* neWcur - prev does not necessarily equal (cur + diff) - prev.
        Floating point is not associative. */
        var touchDiff = new THREE.Vector2(event.deltaX, event.deltaY);
        _rotateCur.addVectors(_rotateOrig, touchDiff);
        var incDiff = new THREE.Vector2().subVectors(_rotateCur, _rotatePrev)
            .multiplyScalar(1 / object.zoomScale);
        object.rotate(-0.3 * Math.PI / 180 * incDiff.x * object.zoomScale,
             -0.3 * Math.PI / 180 * incDiff.y * object.zoomScale);
        _changed = true;
        _rotatePrev.copy(_rotateCur);
    }

    function panstart(event) {
        /* TODO: Dynamically enable pan function? */
        _rotateOrig.copy(_rotateCur);
    }

    function pinchstart(event) {
        _prevScale = event.scale;
    }

    function pinch(event) {
        /* FIXME: Width and height might not be supported universally, but
        can be calculated? */
        var box = _this.domElement.getBoundingClientRect();

        /* 16.6... pixels chosen heuristically... matches my touchpad. */
        if (event.scale < _prevScale) {
            object.zoomTo(event.center.x - box.width/2 - box.left,
                 -(event.center.y - box.height/2 - box.top), 100/6.0);
            _changed = true;
        } else if (event.scale > _prevScale) {
            object.zoomTo(event.center.x - box.width/2 - box.left,
                 -(event.center.y - box.height/2 - box.top), -100/6.0);
            _changed = true;
        }

        _prevScale = event.scale;
    }

    /* A tap will enable panning/disable rotate. */
    function tap(event) {
        panAfterTap.set({enable : true});
        _this.touchControls.get('pan').set({enable : false});
    }

    function panaftertap(event) {
        var touchDiff = new THREE.Vector2(event.deltaX, event.deltaY);
        _offsetCur.addVectors(_offsetOrig, touchDiff);
        var incDiff = new THREE.Vector2().subVectors(_offsetCur, _offsetPrev)
            .multiplyScalar(1 / object.zoomScale);
        object.offsetProj(incDiff.x, -incDiff.y);
        _changed = true;
        _offsetPrev.copy(_offsetCur);
    }

    function panaftertapstart(event) {
        _offsetOrig.copy(_offsetCur);
    }

    function panaftertapend(event) {
        panAfterTap.set({enable : false});
        _this.touchControls.get('pan').set({enable : true});
    }

    function contextmenu(event) {
        event.preventDefault();
    }

    this.update = function() {
        if (_changed) {
            _this.dispatchEvent(changeEvent);
            _changed = false;
        }
    };

    this.domElement.addEventListener('mousedown', mousedown, false);
    this.domElement.addEventListener('wheel', wheel, false);
    this.domElement.addEventListener('contextmenu', contextmenu, false);

    /* Hammer.on wraps addEventListener */
    // Rotate
    this.touchControls.on('pan', pan);
    this.touchControls.on('panstart', panstart);

    // Zoom
    this.touchControls.on('pinch', pinch);
    this.touchControls.on('pinchstart', pinchstart);

    //Pan
    this.touchControls.on('tap', tap);
    this.touchControls.on('panaftertapstart', panaftertapstart);
    this.touchControls.on('panaftertap', panaftertap);
    this.touchControls.on('panaftertapend', panaftertapend);
};

SolvespaceControls.prototype = Object.create(THREE.EventDispatcher.prototype);
SolvespaceControls.prototype.constructor = SolvespaceControls;


solvespace = function(obj, params) {
    var scene, edgeScene, camera, edgeCamera, renderer;
    var geometry, controls, material, mesh, edges;
    var width, height, scale, offset, projRight, projUp;
    var directionalLightArray = [];

    if (typeof params === "undefined" || !("width" in params)) {
        width = window.innerWidth;
    } else {
        width = params.width;
    }

    if (typeof params === "undefined" || !("height" in params)) {
        height = window.innerHeight;
    } else {
        height = params.height;
    }

    if (typeof params === "undefined" || !("scale" in params)) {
        scale = 5;
    } else {
        scale = params.scale;
    }

    if (typeof params === "undefined" || !("offset" in params)) {
        offset = new THREE.Vector3(0, 0, 0);
    } else {
        offset = params.offset;
    }

    if (typeof params === "undefined" || !("projUp" in params)) {
        projUp = new THREE.Vector3(0, 1, -1);
    } else {
        projUp = params.projUp;
    }

    if (typeof params === "undefined" || !("projRight" in params)) {
        projRight = new THREE.Vector3(1, 0, -1);
    } else {
        projRight = params.projRight;
    }

    var domElement = init();
    lightUpdate();
    render();
    return domElement;

    function init() {
        scene = new THREE.Scene();
        edgeScene = new THREE.Scene();

        camera = new SolvespaceCamera(width, height, scale, projUp, projRight, offset);
        camera.NormalizeProjectionVectors();

        mesh = createMesh(obj);
        scene.add(mesh);
        edges = createEdges(obj);
        edgeScene.add(edges);

        for (var i = 0; i < obj.lights.d.length; i++) {
            var lightColor = new THREE.Color(obj.lights.d[i].intensity,
                obj.lights.d[i].intensity, obj.lights.d[i].intensity);
            var directionalLight = new THREE.DirectionalLight(lightColor, 1);
            directionalLight.position.set(obj.lights.d[i].direction[0],
                obj.lights.d[i].direction[1], obj.lights.d[i].direction[2]);
            directionalLightArray.push(directionalLight);
            scene.add(directionalLight);
        }

        var lightColor = new THREE.Color(obj.lights.a, obj.lights.a, obj.lights.a);
        var ambientLight = new THREE.AmbientLight(lightColor.getHex());
        scene.add(ambientLight);

        renderer = new THREE.WebGLRenderer({ antialias: true});
        renderer.setSize(width * window.devicePixelRatio, height * window.devicePixelRatio);
        renderer.autoClear = false;
        renderer.domElement.style =
            "width:  " + width  + "px;" +
            "height: " + height + "px;";

        controls = new SolvespaceControls(camera, renderer.domElement);
        controls.addEventListener("change", render);
        controls.addEventListener("change", lightUpdate);

        animate();
        return renderer.domElement;
    }

    function animate() {
        requestAnimationFrame(animate);
        controls.update();
    }

    function render() {
        var context = renderer.getContext();
        camera.updateProjectionMatrix();
        renderer.clear();

        context.depthRange(0.1, 1);
        renderer.render(scene, camera);

        context.depthRange(0.1-(2/60000.0), 1-(2/60000.0));
        renderer.render(edgeScene, camera);
    }

    function lightUpdate() {
        var changeBasis = new THREE.Matrix4();

        // The original light positions were in camera space.
        // Project them into standard space using camera's basis
        // vectors (up, target, and their cross product).
        var n = new THREE.Vector3().crossVectors(camera.up, camera.right);
        changeBasis.makeBasis(camera.right, camera.up, n);

        for (var i = 0; i < 2; i++) {
            var newLightPos = changeBasis.applyToVector3Array(
                [obj.lights.d[i].direction[0], obj.lights.d[i].direction[1],
                    obj.lights.d[i].direction[2]]);
            directionalLightArray[i].position.set(newLightPos[0],
                newLightPos[1], newLightPos[2]);
        }
    }

    function createMesh(meshObj) {
        var geometry = new THREE.Geometry();
        var materialIndex = 0;
        var materialList = [];
        var opacitiesSeen = {};

        for (var i = 0; i < meshObj.points.length; i++) {
            geometry.vertices.push(new THREE.Vector3(meshObj.points[i][0],
                meshObj.points[i][1], meshObj.points[i][2]));
        }

        for (var i = 0; i < meshObj.faces.length; i++) {
            var currOpacity = ((meshObj.colors[i] & 0xFF000000) >>> 24) / 255.0;
            if (opacitiesSeen[currOpacity] === undefined) {
                opacitiesSeen[currOpacity] = materialIndex;
                materialIndex++;
                materialList.push(new THREE.MeshLambertMaterial({
                    vertexColors: THREE.FaceColors,
                    opacity: currOpacity,
                    transparent: true,
                    side: THREE.DoubleSide
                }));
            }

            geometry.faces.push(new THREE.Face3(meshObj.faces[i][0],
                meshObj.faces[i][1], meshObj.faces[i][2],
                [new THREE.Vector3(meshObj.normals[i][0][0],
                    meshObj.normals[i][0][1], meshObj.normals[i][0][2]),
                 new THREE.Vector3(meshObj.normals[i][1][0],
                    meshObj.normals[i][1][1], meshObj.normals[i][1][2]),
                 new THREE.Vector3(meshObj.normals[i][2][0],
                    meshObj.normals[i][2][1], meshObj.normals[i][2][2])],
                new THREE.Color(meshObj.colors[i] & 0x00FFFFFF),
                opacitiesSeen[currOpacity]));
        }

        geometry.computeBoundingSphere();
        return new THREE.Mesh(geometry, new THREE.MultiMaterial(materialList));
    }

    function createEdges(meshObj) {
        var geometry = new THREE.Geometry();
        var material = new THREE.LineBasicMaterial();

        for (var i = 0; i < meshObj.edges.length; i++) {
            geometry.vertices.push(new THREE.Vector3(meshObj.edges[i][0][0],
                    meshObj.edges[i][0][1], meshObj.edges[i][0][2]),
                new THREE.Vector3(meshObj.edges[i][1][0],
                    meshObj.edges[i][1][1], meshObj.edges[i][1][2]));
        }

        geometry.computeBoundingSphere();
        return new THREE.LineSegments(geometry, material);
    }
};