lineTo3D/assets/js/d3_threeD.js

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

var transformSVGPathExposed;

function d3threeD(exports) {

    const DEGS_TO_RADS = Math.PI / 180,
        UNIT_SIZE = 1;

    const DIGIT_0 = 48, DIGIT_9 = 57, COMMA = 44, SPACE = 32, PERIOD = 46,
        MINUS = 45;



    function transformSVGPath(pathStr) {

        var paths = [];
        var path = new THREE.Shape();

        var idx = 1, len = pathStr.length, activeCmd,
            x = 0, y = 0, nx = 0, ny = 0, firstX = null, firstY = null,
            x1 = 0, x2 = 0, y1 = 0, y2 = 0,
            rx = 0, ry = 0, xar = 0, laf = 0, sf = 0, cx, cy;

        function eatNum() {
            var sidx, c, isFloat = false, s;
            // eat delims
            while (idx < len) {
                c = pathStr.charCodeAt(idx);
                if (c !== COMMA && c !== SPACE)
                    break;
                idx++;
            }
            if (c === MINUS)
                sidx = idx++;
            else
                sidx = idx;
            // eat number
            while (idx < len) {
                c = pathStr.charCodeAt(idx);
                if (DIGIT_0 <= c && c <= DIGIT_9) {
                    idx++;
                    continue;
                }
                else if (c === PERIOD) {
                    idx++;
                    isFloat = true;
                    continue;
                }

                s = pathStr.substring(sidx, idx);
                return isFloat ? parseFloat(s) : parseInt(s);
            }

            s = pathStr.substring(sidx);
            return isFloat ? parseFloat(s) : parseInt(s);
        }

        function nextIsNum() {
            var c;
            // do permanently eat any delims...
            while (idx < len) {
                c = pathStr.charCodeAt(idx);
                if (c !== COMMA && c !== SPACE)
                    break;
                idx++;
            }
            c = pathStr.charCodeAt(idx);
            return (c === MINUS || (DIGIT_0 <= c && c <= DIGIT_9));
        }

        var canRepeat;
        var enteredSub = false;
        var zSeen = false;
        activeCmd = pathStr[0];

        while (idx <= len) {
            canRepeat = true;
            switch (activeCmd) {
                // moveto commands, become lineto's if repeated
                case 'M':
                    enteredSub = false;
                    x = eatNum();
                    y = eatNum();
                    path.moveTo(x, y);
                    activeCmd = 'L';
                    break;
                case 'm':
                    x += eatNum();
                    y += eatNum();
                    path.moveTo(x, y);
                    activeCmd = 'l';
                    break;
                case 'Z':
                case 'z':
                    // z is a special case. This ends a segment and starts
                    // a new path. Since the three.js path is continuous
                    // we should start a new path here. This also draws a
                    // line from the current location to the start location.
                    canRepeat = false;
                    if (x !== firstX || y !== firstY)
                        path.lineTo(firstX, firstY);

                    paths.push(path);

                    // reset the elements
                    firstX = null;
                    firstY = null;

                    // avoid x,y being set incorrectly
                    enteredSub = true;

                    path = new THREE.Shape();

                    zSeen = true;

                    break;
                // - lines!
                case 'L':
                case 'H':
                case 'V':
                    nx = (activeCmd === 'V') ? x : eatNum();
                    ny = (activeCmd === 'H') ? y : eatNum();
                    path.lineTo(nx, ny);
                    x = nx;
                    y = ny;
                    break;
                case 'l':
                case 'h':
                case 'v':
                    nx = (activeCmd === 'v') ? x : (x + eatNum());
                    ny = (activeCmd === 'h') ? y : (y + eatNum());
                    path.lineTo(nx, ny);
                    x = nx;
                    y = ny;
                    break;
                // - cubic bezier
                case 'C':
                    x1 = eatNum(); y1 = eatNum();
                case 'S':
                    if (activeCmd === 'S') {
                        x1 = 2 * x - x2; y1 = 2 * y - y2;
                    }
                    x2 = eatNum();
                    y2 = eatNum();
                    nx = eatNum();
                    ny = eatNum();
                    path.bezierCurveTo(x1, y1, x2, y2, nx, ny);
                    x = nx; y = ny;
                    break;
                case 'c':
                    x1 = x + eatNum();
                    y1 = y + eatNum();
                case 's':
                    if (activeCmd === 's') {
                        x1 = 2 * x - x2;
                        y1 = 2 * y - y2;
                    }
                    x2 = x + eatNum();
                    y2 = y + eatNum();
                    nx = x + eatNum();
                    ny = y + eatNum();
                    path.bezierCurveTo(x1, y1, x2, y2, nx, ny);
                    x = nx; y = ny;
                    break;
                // - quadratic bezier
                case 'Q':
                    x1 = eatNum(); y1 = eatNum();
                case 'T':
                    if (activeCmd === 'T') {
                        x1 = 2 * x - x1;
                        y1 = 2 * y - y1;
                    }
                    nx = eatNum();
                    ny = eatNum();
                    path.quadraticCurveTo(x1, y1, nx, ny);
                    x = nx;
                    y = ny;
                    break;
                case 'q':
                    x1 = x + eatNum();
                    y1 = y + eatNum();
                case 't':
                    if (activeCmd === 't') {
                        x1 = 2 * x - x1;
                        y1 = 2 * y - y1;
                    }
                    nx = x + eatNum();
                    ny = y + eatNum();
                    path.quadraticCurveTo(x1, y1, nx, ny);
                    x = nx; y = ny;
                    break;
                // - elliptical arc
                case 'A':
                    rx = eatNum();
                    ry = eatNum();
                    xar = eatNum() * DEGS_TO_RADS;
                    laf = eatNum();
                    sf = eatNum();
                    nx = eatNum();
                    ny = eatNum();
                    if (rx !== ry) {
                        console.warn("Forcing elliptical arc to be a circular one :(",
                            rx, ry);
                    }
                    // SVG implementation notes does all the math for us! woo!
                    // http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
                    // step1, using x1 as x1'
                    x1 = Math.cos(xar) * (x - nx) / 2 + Math.sin(xar) * (y - ny) / 2;
                    y1 = -Math.sin(xar) * (x - nx) / 2 + Math.cos(xar) * (y - ny) / 2;
                    // step 2, using x2 as cx'
                    var norm = Math.sqrt(
                        (rx*rx * ry*ry - rx*rx * y1*y1 - ry*ry * x1*x1) /
                            (rx*rx * y1*y1 + ry*ry * x1*x1));
                    if (laf === sf)
                        norm = -norm;
                    x2 = norm * rx * y1 / ry;
                    y2 = norm * -ry * x1 / rx;
                    // step 3
                    cx = Math.cos(xar) * x2 - Math.sin(xar) * y2 + (x + nx) / 2;
                    cy = Math.sin(xar) * x2 + Math.cos(xar) * y2 + (y + ny) / 2;

                    var u = new THREE.Vector2(1, 0),
                        v = new THREE.Vector2((x1 - x2) / rx,
                            (y1 - y2) / ry);
                    var startAng = Math.acos(u.dot(v) / u.length() / v.length());
                    if (u.x * v.y - u.y * v.x < 0)
                        startAng = -startAng;

                    // we can reuse 'v' from start angle as our 'u' for delta angle
                    u.x = (-x1 - x2) / rx;
                    u.y = (-y1 - y2) / ry;

                    var deltaAng = Math.acos(v.dot(u) / v.length() / u.length());
                    // This normalization ends up making our curves fail to triangulate...
                    if (v.x * u.y - v.y * u.x < 0)
                        deltaAng = -deltaAng;
                    if (!sf && deltaAng > 0)
                        deltaAng -= Math.PI * 2;
                    if (sf && deltaAng < 0)
                        deltaAng += Math.PI * 2;

                    path.absarc(cx, cy, rx, startAng, startAng + deltaAng, sf);
                    x = nx;
                    y = ny;
                    break;

                case ' ':
                    // if it's an empty space, just skip it, and see if we can find a real command
                    break;

                default:
                    throw new Error("weird path command: " + activeCmd);
            }
            if (firstX === null && !enteredSub) {
                firstX = x;
                firstY = y;
            }

            // just reissue the command
            if (canRepeat && nextIsNum())
                continue;
            activeCmd = pathStr[idx++];
        }

        if (zSeen) {
            return paths;
        } else {
            paths.push(path);
            return paths;
        }
    }

    transformSVGPathExposed = transformSVGPath;

    function applySVGTransform(obj, tstr) {


        var idx = tstr.indexOf('('), len = tstr.length,
            cmd = tstr.substring(0, idx++);
        function eatNum() {
            var sidx, c, isFloat = false, s;
            // eat delims
            while (idx < len) {
                c = tstr.charCodeAt(idx);
                if (c !== COMMA && c !== SPACE)
                    break;
                idx++;
            }
            if (c === MINUS)
                sidx = idx++;
            else
                sidx = idx;
            // eat number
            while (idx < len) {
                c = tstr.charCodeAt(idx);
                if (DIGIT_0 <= c && c <= DIGIT_9) {
                    idx++;
                    continue;
                }
                else if (c === PERIOD) {
                    idx++;
                    isFloat = true;
                    continue;
                }

                s = tstr.substring(sidx, idx);
                return isFloat ? parseFloat(s) : parseInt(s);
            }

            s = tstr.substring(sidx);
            return isFloat ? parseFloat(s) : parseInt(s);
        }
        switch (cmd) {
            case 'translate':
                obj.position.x = Math.floor(eatNum() * UNIT_SIZE);
                obj.position.y = Math.floor(eatNum() * UNIT_SIZE);
                break;
            case 'scale':
                obj.scale.x = Math.floor(eatNum() * UNIT_SIZE);
                obj.scale.y = Math.floor(eatNum() * UNIT_SIZE);
                break;
            default:
                console.warn("don't understand transform", tstr);
                break;
        }
    }

    applySVGTransformExposed = applySVGTransform;

    function wrap_setAttribute(name, value) {
    }
    function wrap_setAttributeNS(namespace, name, value) {
    }





    var extrudeDefaults = {
        amount: 20,
        bevelEnabled: true,
        material: 0,
        extrudeMaterial: 0,
    };





    function commonSetAttribute(name, value) {
        switch (name) {
            case 'x':
                this.position.x = Math.floor(value * UNIT_SIZE);
                break;

            case 'y':
                this.position.y = Math.floor(value * UNIT_SIZE);
                break;

            case 'class':
                this.clazz = value;
                break;

            case 'stroke':
            case 'fill':
                if (typeof(value) !== 'string')
                    value = value.toString();
                this.material.color.setHex(parseInt(value.substring(1), 16));
                break;

            case 'transform':
                applySVGTransform(this, value);
                break;

            case 'd':
                var shape = transformSVGPath(value),
                    geom = shape.extrude(extrudeDefaults);
                this.geometry = geom;
                this.geometry.boundingSphere = {radius: 3 * UNIT_SIZE};
                this.scale.set(UNIT_SIZE, UNIT_SIZE, UNIT_SIZE);

                break;

            default:
                throw new Error("no setter for: " + name);
        }
    }
    function commonSetAttributeNS(namespace, name, value) {
        this.setAttribute(name, value);
    }

    function Group(parentThing) {
        THREE.Object3D.call(this);

        this.d3class = '';

        parentThing.add(this);
    };
    Group.prototype = new THREE.Object3D();
    Group.prototype.constructor = Group;
    Group.prototype.d3tag = 'g';
    Group.prototype.setAttribute = commonSetAttribute;
    Group.prototype.setAttributeNS = commonSetAttributeNS;

    function fabGroup() {
        return new Group(this);
    }

    function Mesh(parentThing, tag, geometry, material) {
        THREE.Mesh.call(this, geometry, material);

        this.d3tag = tag;
        this.d3class = '';

        parentThing.add(this);
    }
    Mesh.prototype = new THREE.Mesh();
    Mesh.prototype.constructor = Mesh;
    Mesh.prototype.setAttribute = commonSetAttribute;
    Mesh.prototype.setAttributeNS = commonSetAttributeNS;


    const SPHERE_SEGS = 16, SPHERE_RINGS = 16,
        DEFAULT_COLOR = 0xcc0000;

    var sharedSphereGeom = null,
        sharedCubeGeom = null;

    function fabSphere() {
        if (!sharedSphereGeom)
            sharedSphereGeom = new THREE.SphereGeometry(
                UNIT_SIZE / 2, SPHERE_SEGS, SPHERE_RINGS);
        var material = new THREE.MeshLambertMaterial({
            color: DEFAULT_COLOR,
        });
        return new Mesh(this, 'sphere', sharedSphereGeom, material);
    }

    function fabCube() {
        if (!sharedCubeGeom)
            sharedCubeGeom = new THREE.CubeGeometry(UNIT_SIZE, UNIT_SIZE, UNIT_SIZE);
        var material = new THREE.MeshLambertMaterial({
            color: DEFAULT_COLOR,
        });
        return new Mesh(this, 'cube', sharedCubeGeom, material);
    }

    function fabPath() {
        // start with a cube that we will replace with the path once it gets created
        if (!sharedCubeGeom)
            sharedCubeGeom = new THREE.CubeGeometry(UNIT_SIZE, UNIT_SIZE, UNIT_SIZE);
        var material = new THREE.MeshLambertMaterial({
            color: DEFAULT_COLOR,
        });
        return new Mesh(this, 'path', sharedCubeGeom, material);
    }

    function Scene() {
        THREE.Scene.call(this);
        this.renderer = null;
        this.camera = null;
        this.controls = null;
        this._d3_width = null;
        this._d3_height = null;
    }
    Scene.prototype = new THREE.Scene();
    Scene.prototype.constructor = Scene;
    Scene.prototype._setBounds = function() {
        this.renderer.setSize(this._d3_width, this._d3_height);
        var aspect = this.camera.aspect;
        this.camera.position.set(
            this._d3_width * UNIT_SIZE / 2,
            this._d3_height * UNIT_SIZE / 2,
            Math.max(this._d3_width * UNIT_SIZE / Math.sqrt(2),
                this._d3_height * UNIT_SIZE / Math.sqrt(2)));
        this.controls.target.set(this.camera.position.x, this.camera.position.y, 0);
        console.log("camera:", this.camera.position.x, this.camera.position.y,
            this.camera.position.z);



        //this.camera.position.z = 1000;
    };
    Scene.prototype.setAttribute = function(name, value) {
        switch (name) {
            case 'width':
                this._d3_width = value;
                if (this._d3_height)
                    this._setBounds();
                break;
            case 'height':
                this._d3_height = value;
                if (this._d3_width)
                    this._setBounds();
                break;
        }
    };



    function fabVis() {
        var camera, scene, controls, renderer;

        // - scene
        scene = new Scene();
        threeJsScene = scene;

        // - camera
        camera = scene.camera = new THREE.PerspectiveCamera(
            75,
            window.innerWidth / window.innerHeight,
            1, 100000);
        /*
         camera = scene.camera = new THREE.OrthographicCamera(
         window.innerWidth / -2, window.innerWidth / 2,
         window.innerHeight / 2, window.innerHeight / -2,
         1, 50000);
         */
        scene.add(camera);

        // - controls
        // from misc_camera_trackball.html example
        controls = scene.controls = new THREE.TrackballControls(camera);
        controls.rotateSpeed = 1.0;
        controls.zoomSpeed = 1.2;
        controls.panSpeed = 0.8;

        controls.noZoom = false;
        controls.noPan = false;

        controls.staticMoving = true;
        controls.dynamicDampingFactor = 0.3;

        controls.keys = [65, 83, 68];

        controls.addEventListener('change', render);

        // - light
        /*
         var pointLight = new THREE.PointLight(0xFFFFFF);
         pointLight.position.set(10, 50, 130);
         scene.add(pointLight);
         */

        var spotlight = new THREE.SpotLight(0xffffff);
        spotlight.position.set(-50000, 50000, 100000);
        scene.add(spotlight);

        var backlight = new THREE.SpotLight(0x888888);
        backlight.position.set(50000, -50000, -100000);
        scene.add(backlight);

        /*
         var ambientLight = new THREE.AmbientLight(0x888888);
         scene.add(ambientLight);
         */

        function helperPlanes(maxBound) {
            var geom = new THREE.PlaneGeometry(maxBound, maxBound, 4, 4);
            for (var i = 0; i < 4; i++) {
                var color, cx, cy;
                switch (i) {
                    case 0:
                        color = 0xff0000;
                        cx = maxBound / 2;
                        cy = maxBound / 2;
                        break;
                    case 1:
                        color = 0x00ff00;
                        cx = maxBound / 2;
                        cy = -maxBound / 2;
                        break;
                    case 2:
                        color = 0x0000ff;
                        cx = -maxBound / 2;
                        cy = -maxBound / 2;
                        break;
                    case 3:
                        color = 0xffff00;
                        cx = -maxBound / 2;
                        cy = maxBound / 2;
                        break;
                }
                var material = new THREE.MeshLambertMaterial({ color: color });
                var mesh = new THREE.Mesh(geom, material);
                mesh.position.set(cx, cy, -1);

                scene.add(mesh);
            }
        }
        //helperPlanes(UNIT_SIZE * 225);

        // - renderer
        renderer = scene.renderer = new THREE.WebGLRenderer({
            // too slow...
            //antialias: true,
        });
        this.appendChild( renderer.domElement );

        // - stats
        var stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.top = '0px';
        stats.domElement.style.zIndex = 100;
        this.appendChild( stats.domElement );

        function animate() {
            requestAnimationFrame(animate, renderer.domElement);
            controls.update();
        }

        function render() {
            renderer.render(scene, camera);
            stats.update();
        }

        animate();

        return scene;
    };
}

var $d3g = {};
d3threeD($d3g);