buoy-analysis/js/chart3.js

'use strict';

var BuoyAnalysisChart3 = {

    h: 300,
    w: 480,

    components: {},
    scene: null,
    renderer: null,
    camera: null,

    /**
     *
     */
    getCamera: function() {
        var viewAngle = 45;
        var aspectRatio = BuoyAnalysisChart3.w / BuoyAnalysisChart3.h;
        var near = 1;
        var far = 10000;

        return new THREE.PerspectiveCamera(viewAngle, aspectRatio, near, far);
    },

    /**
     *
     */
    getLighting: function() {
        var light1 = new THREE.PointLight('#fff');
        light1.position.set(220, 150, -450);

        var light2 = new THREE.PointLight('#fff');
        light2.position.set(220, 150, 500);

        return [light1, light2];
    },

    /**
     * http://threejs.org/docs/#Reference/Extras.Geometries/TextGeometry
     */
    drawLabel: function(msg, size, color) {
        var options = {
            height: 1,
            font: 'roboto',
            size: size
        };

        var geo = new THREE.TextGeometry(msg, options);
        var mat = new THREE.MeshBasicMaterial({ color: color });

        return new THREE.Mesh(geo, mat);
    },

    /**
     *
     */
    drawAxes: function(len, rgbX, rgbY, rgbZ) {
        var vertices = new Float32Array([
            0, 0, 0, len, 0, 0,
            0, 0, 0, 0, len, 0,
            0, 0, 0, 0, 0, len
        ]);

        var colorBuffer = [].concat(rgbX, rgbX, rgbY, rgbY, rgbZ, rgbZ);
        var colors = new Float32Array(colorBuffer);

        var geo = new THREE.BufferGeometry();
        geo.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
        geo.addAttribute('color', new THREE.BufferAttribute(colors, 3));

        var mat = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });

        return new THREE.LineSegments(geo, mat);
    },

    /**
     *
     */
    init: function() {
        BuoyAnalysisChart3.renderer = new THREE.WebGLRenderer({ antialias: true });
        BuoyAnalysisChart3.renderer.setSize(BuoyAnalysisChart3.w, BuoyAnalysisChart3.h);
        BuoyAnalysisChart3.renderer.setClearColor('#fff');
        document.getElementById('chart3').appendChild(BuoyAnalysisChart3.renderer.domElement);

        BuoyAnalysisChart3.scene = new THREE.Scene();

        BuoyAnalysisChart3.components.axes =
            BuoyAnalysisChart3.drawAxes(300, [0.8, 0.8, 0.8], [0.8, 0.8, 0.8], [0.8, 0.8, 0.8]);
        BuoyAnalysisChart3.scene.add(BuoyAnalysisChart3.components.axes);

        BuoyAnalysisChart3.components.lighting = BuoyAnalysisChart3.getLighting();
        BuoyAnalysisChart3.components.lighting.forEach(function(light) {
            BuoyAnalysisChart3.scene.add(light);
        });

        BuoyAnalysisChart3.components.lbl2015 = BuoyAnalysisChart3.drawLabel('2015', 20, '#ccc');
        BuoyAnalysisChart3.components.lbl2015.position.set(-80, 300, 0);
        BuoyAnalysisChart3.scene.add(BuoyAnalysisChart3.components.lbl2015);

        BuoyAnalysisChart3.components.lbl2000 = BuoyAnalysisChart3.drawLabel('2000', 20, '#ccc');
        BuoyAnalysisChart3.components.lbl2000.position.set(-80, 150, 0);
        BuoyAnalysisChart3.scene.add(BuoyAnalysisChart3.components.lbl2000);

        BuoyAnalysisChart3.components.lbl1982 = BuoyAnalysisChart3.drawLabel('1982', 20, '#ccc');
        BuoyAnalysisChart3.components.lbl1982.position.set(-80, -30, 0);
        BuoyAnalysisChart3.scene.add(BuoyAnalysisChart3.components.lbl1982);

        BuoyAnalysisChart3.camera = BuoyAnalysisChart3.getCamera();
        BuoyAnalysisChart3.camera.up.set(0, 0, 1);
        BuoyAnalysisChart3.camera.position.set(-207, -267, 367);

        BuoyAnalysisChart3.controls = new THREE.OrbitControls( BuoyAnalysisChart3.camera, BuoyAnalysisChart3.renderer.domElement );
        BuoyAnalysisChart3.controls.target = new THREE.Vector3(200, 100, 0);

        // BuoyAnalysisChart3.controls.minPolarAngle = 50 * Math.PI / 180; // radians
        // BuoyAnalysisChart3.controls.maxPolarAngle = 90 * Math.PI / 180; // radians

        // BuoyAnalysisChart3.controls.minAzimuthAngle = -90 * Math.PI / 180; // radians
        // BuoyAnalysisChart3.controls.maxAzimuthAngle = 0 * Math.PI / 180; // radians

        BuoyAnalysisChart3.controls.enablePan = false;

        BuoyAnalysisChart3.controls.userPanSpeed = 6;
    },

    /**
     *
     */
    draw: function() {
        var maxZ = 0;
        var obj = new THREE.Object3D();

        BuoyAnalysisMap.reticle.stations.forEach(function(station, index) {
            var h;
            var geo = new THREE.PlaneGeometry(40, 300, 1, BuoyAnalysisData.years.end - BuoyAnalysisData.years.start);

            for (var year = BuoyAnalysisData.years.start, i = 0; year <= BuoyAnalysisData.years.end; year++, i++) {
                h = BuoyAnalysisData.stationJson[station]['a' + year][BuoyAnalysisData.property]['y'] * 10 || h;

                geo.vertices[2 * i].z = h;
                geo.vertices[2 * i + 1].z = h;

                if (maxZ < h) {
                    maxZ = h;
                }

                if (year === BuoyAnalysisData.years.end) {
                    continue;
                }

                if (BuoyAnalysisData.stationJson[station]['a' + year]['wt']['y'] === 0) {
                    geo.faces[2 * i].materialIndex = 1;
                    geo.faces[2 * i + 1].materialIndex = 1;
                }
            }

            var color = BuoyAnalysisMap.stationColorScale(Math.round(BuoyAnalysisData.stationJson[station].lat));
            var materials = [
                new THREE.MeshLambertMaterial({ color: color, side: THREE.DoubleSide }),
                new THREE.MeshLambertMaterial({ color: "#f00", transparent: true, opacity: 0, side: THREE.DoubleSide })
            ];

            var mesh = new THREE.Mesh(geo, new THREE.MeshFaceMaterial(materials));

            mesh.position.x = -1 * index * 100;
            mesh.position.y = -150;

            obj.add(mesh);
        });

        var txt = "Max " + Math.round((maxZ / 10) * 9/5 + 32) + " °F (" + (maxZ / 10) + " °C)";

        BuoyAnalysisChart3.scene.remove(BuoyAnalysisChart3.components.lblMaxZC);
        BuoyAnalysisChart3.components.lblMaxZC = BuoyAnalysisChart3.drawLabel(txt, 12, '#000');
        BuoyAnalysisChart3.components.lblMaxZC.position.set(0, -10, maxZ);
        BuoyAnalysisChart3.components.lblMaxZC.rotation.x = Math.PI / 2;
        BuoyAnalysisChart3.components.lblMaxZC.rotation.y = -Math.PI / 2;
        BuoyAnalysisChart3.scene.add(BuoyAnalysisChart3.components.lblMaxZC);

        obj.rotation.z = Math.PI;
        obj.position.x = 20;

        BuoyAnalysisChart3.scene.remove(BuoyAnalysisChart3.components.curves);
        BuoyAnalysisChart3.components.curves = obj;
        BuoyAnalysisChart3.scene.add(BuoyAnalysisChart3.components.curves);

        function animate() {
            requestAnimationFrame(animate);
            BuoyAnalysisChart3.renderer.render(BuoyAnalysisChart3.scene, BuoyAnalysisChart3.camera);
            BuoyAnalysisChart3.controls.update();
        };

        BuoyAnalysisChart3.controls.update();
        animate();
    }
};