buoy-analysis/js/chart3.js

'use strict';

var BuoyAnalysisChart3 = {

    h: 258,

    w: 498,

    /**
     *
     */
    buildCamera: 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 pointLight = new THREE.PointLight('#fff');

        pointLight.position.x = 50;
        pointLight.position.y = 40;
        pointLight.position.z = 40;

        return [pointLight];
    },

    /**
     *
     */
    draw: function() {
        var renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize( BuoyAnalysisChart3.w, BuoyAnalysisChart3.h );
        renderer.setClearColor('#fff');

        document.getElementById('chart3').appendChild( renderer.domElement );

        var scene = new THREE.Scene();

        var mat = new THREE.LineBasicMaterial({ linewidth: 3, color: '#f0f' });

        var axisHelper = new THREE.AxisHelper(500);
        scene.add(axisHelper);

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


        var obj = new THREE.Object3D();

        BuoyAnalysisMap.reticle.stations.forEach(function(station, index) {
            if (index > 0) {
                return;
            }

            var h, geo, mat, mesh;


            // Ribbons.  Colorize stations.
            var width = 40;
            var height = 300;
            var width_segments = 1;
            var height_segments = BuoyAnalysisData.years.end - BuoyAnalysisData.years.start;

            var geo = new THREE.PlaneGeometry(width, height, width_segments, height_segments);

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

                // if (h === 0) {
                //     continue;
                // }

                // geo = new THREE.PlaneGeometry(30, 30, 1);
                // mat = new THREE.MeshLambertMaterial( {color: 'rgb(100, 100, 0)'} );
                // mesh = new THREE.Mesh( geo, mat );

                // geo.applyMatrix( new THREE.Matrix4().makeTranslation( 0, 0, 0 ) );
                // mesh.position.set((year - BuoyAnalysisData.years.start) * 32, index * 32, h);
                // obj.add(mesh);

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

            // for(var i = 0; i < plane.vertices.length / 2; i++) {
            //     plane.vertices[2 * i].z = Math.pow(2, i / 20);
            //     plane.vertices[2 * i + 1].z = Math.pow(2, i / 20);
            // }

            var mesh = new THREE.Mesh(geo, new THREE.MeshLambertMaterial({color: 0xccffcc}));
            mesh.material.side = THREE.DoubleSide;
            // mesh.doubleSided = true;

            // mesh.rotation.y = Math.PI/2-0.5;
            mesh.position.y = index * 100 + height / 2;
            obj.add(mesh);
        });

        obj.position.set(150, 0, 0);
        scene.add(obj);

        var camX = -20;
        var camY = -300;
        var camZ = 150;

        var tgtX = 425;
        var tgtY = 300;
        var tgtZ = -20;


        // var geoCam = new THREE.BoxGeometry(10, 10, 10);
        // var matCam = new THREE.MeshLambertMaterial( {color: '#f0f'} );
        // var boxCam = new THREE.Mesh( geoCam, matCam );

        // boxCam.position.set(camX, camY, camZ);
        // scene.add(boxCam);

        // var geoTgt = new THREE.BoxGeometry(10, 10, 10);
        // var matTgt = new THREE.MeshLambertMaterial( {color: '#0ff'} );
        // var boxTgt = new THREE.Mesh( geoTgt, matTgt );

        // boxTgt.position.set(tgtX, tgtY, tgtZ);
        // scene.add(boxTgt);

        var camera = BuoyAnalysisChart3.buildCamera();
        camera.up.set( 0, 0, 1 );
        camera.position.set(camX, camY, camZ);

        var controls = new THREE.OrbitControls( camera, renderer.domElement );
        controls.target = new THREE.Vector3(tgtX, tgtY, tgtZ);

        // // Range is 0 to Math.PI radians.
        // controls.minPolarAngle = 50 * Math.PI / 180; // radians
        // controls.maxPolarAngle = 90 * Math.PI / 180; // radians

        // // How far you can orbit horizontally, upper and lower limits.
        // // If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
        // controls.minAzimuthAngle = -90 * Math.PI / 180; // radians
        // controls.maxAzimuthAngle = 0 * Math.PI / 180; // radians
        controls.update();

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