Angular.js Three.js 地震记录立体展示

Earthquakes App 本例需要能访问数据服务： http://webservices.rm.ingv.it

Angular.js, Three.js

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4895
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

console.clear();

const app = angular.module('app', [])

.run(function($rootScope, params, loadFeed, QUERYBASE, log, points, locations, threeService, fix) {

var vm = $rootScope;
    vm.log = 'init';
    vm.points = points;
    vm.params = params;
    vm.query = '';
    vm.fix = {
        hypoSize: 1,
        magSize: 1
    }

vm.makeQuery = function() {
        var query = '';
        for (let i = 0; i < vm.params.length; i++) {
            query += vm.params[i].name + '=' + vm.params[i].val + '&';
        }
        vm.query = QUERYBASE + query;
    };

vm.loadFeed = function() {
        vm.makeQuery();
        threeService.clearScene();
        console.log(vm.query);
        loadFeed(vm.query);
    };

vm.addLocations = function() {
        for (let i = 0; i < locations.length; i++) {
            threeService.makeLoc(fix.lon(locations[i].lon), fix.depth(locations[i].depth), fix.lat(locations[i].lat), .05, locations[i].color);
            threeService.makeText(locations[i].name, fix.lon(locations[i].lon), fix.lat(locations[i].lat));
        }
    };

vm.addMagSphere = function() {
        for (let i = 0; i < vm.points.length; i++) {
            threeService.makeMagPoint(fix.lon(vm.points[i].lon), fix.depth(vm.points[i].depth), fix.lat(vm.points[i].lat), fix.mag(vm.points[i].mag), vm.points[i].color);
            $rootScope.log = 'Adding element ' + i + ' of ' + (vm.points.length - 1);
        }
    };

vm.addHypo = function() {
        for (let i = 0; i < vm.points.length; i++) {
            threeService.makeHypo(fix.lon(vm.points[i].lon), fix.depth(vm.points[i].depth), fix.lat(vm.points[i].lat), .04, vm.points[i].color);
            $rootScope.log = 'Adding element ' + i + ' of ' + (vm.points.length - 1);
        }
    };

vm.hypoSize = function() {
        threeService.hypoSize(vm.fix.hypoSize);
    };

vm.magSize = function() {
        threeService.magSize(vm.fix.magSize);
    };

vm.makeQuery();
    vm.loadFeed();
    threeService.init();
    vm.addLocations();

})

.controller('formController', function($rootScope, $scope, params) {
    var vm = $scope;
    vm.params = $rootScope.params;

console.log(params === $rootScope.params);

})

.constant('QUERYBASE', 'http://webservices.rm.ingv.it/fdsnws/event/1/query?')

.value('points', [])

.value('locations', [{
    "color": 65280,
    "depth": -855,
    "lat": 42.8599846,
    "lon": 13.2398447,
    "mag": 2.5,
    "name": "Accumoli"
}, {
    "color": 65280,
    "depth": 0,
    "lat": 42.6291248,
    "lon": 13.2882622,
    "mag": 2.5,
    "name": "Amatrice"
}, {
    "color": 65280,
    "depth": -16,
    "lat": 43.616667,
    "lon": 13.516667,
    "mag": 2.5,
    "name": "Ancona"
}, {
    "color": 65280,
    "depth": -1452,
    "lat": 42.828889,
    "lon": 13.205833,
    "mag": 2.5,
    "name": "Castelluccio"
}, {
    "color": 65280,
    "depth": -1452,
    "lat": 43.843531,
    "lon": 13.019756,
    "mag": 2.5,
    "name": "Fano"
}, {
    "color": 65280,
    "depth": -1452,
    "lat": 40.833333,
    "lon": 14.25,
    "mag": 2.5,
    "name": "Napoli"
}, {
    "color": 65280,
    "depth": -493,
    "lat": 43.1121,
    "lon": 12.3888,
    "mag": 2.5,
    "name": "Perugia"
}, {
    "color": 65280,
    "depth": -4,
    "lat": 42.464278,
    "lon": 14.214189,
    "mag": 2.5,
    "name": "Pescara"
}, {
    "color": 65280,
    "depth": -341,
    "lat": 43.267775,
    "lon": 13.348139,
    "mag": 2.5,
    "name": "Pollenza"
}, {
    "color": 16711935,
    "depth": 0,
    "lat": 41.893056,
    "lon": 12.482778,
    "mag": 2.5,
    "name": "Roma"
}, {
    "color": 16777215,
    "depth": 0,
    "lat": 45.464161,
    "lon": 9.190336,
    "mag": 2.5,
    "name": "Milano"
}, {
    "color": 16777215,
    "depth": 0,
    "lat": 43.8998441,
    "lon": 12.8769851,
    "mag": 2.5,
    "name": "Pesaro"
}, {
    "color": 16777215,
    "depth": 0,
    "lat": 43.30675,
    "lon": 13.7286,
    "mag": 2.5,
    "name": "Civitanova Marche"
}, {
    "color": 16777215,
    "depth": 0,
    "lat": 42.3493916,
    "lon": 13.3983832,
    "mag": 2.5,
    "name": "L'Aquila"
}])

.value('params', [{
        name: 'starttime',
        val: '2016-08-24T00:00:00',
        type: 'text',
        public: true
    }, {
        name: 'orderby',
        val: 'time-asc',
        type: 'text',
        public: false
    },
    /*
    {
      name: 'endtime',
      val: '2016-09-04T00:00:00',
      type: 'text',
      public: true
    }, 
    */
    {
        name: 'limit',
        val: 100,
        type: 'number',
        min: 1,
        max: 1000,
        step: 10,
        public: true
    }, {
        name: 'minmag',
        val: 2,
        type: 'number',
        min: 0.5,
        max: 9,
        step: 0.5,
        public: true
    }, {
        name: 'maxmag',
        val: 6,
        type: 'number',
        min: 1,
        max: 10,
        step: 0.5,
        public: true
    }, {
        name: 'minlat',
        val: 40,
        public: false
    }, {
        name: 'maxlat',
        val: 43,
        public: false
    }, {
        name: 'minlon',
        val: 9,
        public: false
    }, {
        name: 'maxlon',
        val: 14,
        public: false
    }
])

.service('log', function() {
    return function(msg) {
        return msg;
    };
})

.service('firebaseDB', function() {
    // return new Firebase("https://m1sc.firebaseio.com/quake");
})

/*-------------------------------------------
FEED LOADER
-------------------------------------------*/
.service('loadFeed', function(log, $http, points, firebaseDB, threeService, $rootScope) {
    return function(query) {

$rootScope.log = 'Loading data...';

$http({
            method: 'GET',
            // url: 'https://m1sc.firebaseio.com/quake.json',
            url: query
        }).then(function successCallback(response) {

$rootScope.points = [];

$(response.data).find('event').each(function(i, e) {
                var p = {
                    region: $('description text', e).text(),
                    date: $('creationInfo creationTime', e).text(),
                    lat: parseFloat($('origin latitude value', e).text()),
                    lon: parseFloat($('origin longitude value', e).text()),
                    depth: parseFloat($('origin depth value', e).text()),
                    mag: parseFloat($('magnitude mag value', e).text())
                };
                //console.log(p.date);
                $rootScope.points.push(p);
            });

// firebaseDB.child('data').set(points);
            $rootScope.log = 'Data loaded';
            $rootScope.addHypo();
            //$rootScope.addMagSphere();

}, function errorCallback(response) {

$rootScope.log = 'Error loading data';

// called asynchronously if an error occurs
            // or server returns response with an error status.
            console.log('Error loading data, loading Firebase fallback');

/*
            firebaseDB.on('value', function(snapshot) {
              // TODO separate point types
              Array.prototype.push.apply(points, snapshot.val().data);
            });
            */

}).finally(function() {
            // Always execute this on both error and success
            //vm.log = 'Starting Three JS scene';
            // threeService.init();
        });
    };
})

/*-------------------------------------------
THREE JS FUNCTIONS
-------------------------------------------*/
.service('threeService', function(fix, points) {
    return {
        scene: new THREE.Scene(),
        camera: undefined,
        texture: undefined,
        controls: undefined,
        renderer: new THREE.WebGLRenderer(),
        locGroup: new THREE.Group(),
        hypoGroup: new THREE.Group(),
        magGroup: new THREE.Group(),

makeGrid() {
            var grid1 = new THREE.GridHelper(150, 1, 0x103d92, 0x3675ea);
            grid1.position.y = 0;
            grid1.opacity = 0.6;
            this.scene.add(grid1);

var grid2 = new THREE.GridHelper(500, 1, 0x103d92, 0x3675ea);
            grid2.rotation.x = Math.PI / 2;
            grid2.opacity = 0.6;
            // this.scene.add(grid2);
        },

// TODO
        // load a texture, set wrap mode to repeat
        makeTexture() {

console.log('texture');

var texture = new THREE.TextureLoader()

texture.load(
                'http://lorempixel.com/output/sports-q-c-640-480-9.jpg',
                function(texture) {
                    // do something with the texture
                    var material = new THREE.MeshBasicMaterial({
                        map: texture
                    });

},
                // Function called when download progresses
                function(xhr) {
                    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
                },
                // Function called when download errors
                function(xhr) {
                    console.log('An error happened');
                }
            );
        },

makeSky() {
            var geometry = new THREE.SphereGeometry(900, 2, 12);
            var material = new THREE.MeshBasicMaterial({
                // map: this.texture,
                color: 0x5c94fc,
                side: THREE.DoubleSide
            });
            var sphere = new THREE.Mesh(geometry, material);
            this.scene.add(sphere);
        },

makeDirectionalLight() {
            var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
            directionalLight.position.set(20, 10, 0);
            directionalLight.rotation.y = 90;
            directionalLight.castShadow = true;

//var shadowCamera = new THREE.CameraHelper( directionalLight.shadow.camera );

this.scene.add(directionalLight);
            //scene.add( shadowCamera );
        },

makeLight() {
            var light = new THREE.AmbientLight(0x404040, 2); // soft white light
            // light.castShadow = true;
            this.scene.add(light);
        },

makePointLight() {
            var light = new THREE.PointLight(0x00ff00, 1, 100);
            light.position.set(50, 50, 50);
            // this.scene.add( light );
        },

makeCamera() {
            var t = this;
            t.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
            t.camera.position.z = 18;
            t.camera.position.y = 10;

// Camera contrls
            t.controls = new THREE.OrbitControls(t.camera, t.renderer.domElement);
            t.controls.enableDamping = true;
            t.controls.dampingFactor = 0.25;
            t.controls.enableZoom = true;

makeMagPoint($x, $y, $z, $size = 1, $color = 0xffff00) {
            var size = $size;
            var geometry = new THREE.SphereGeometry(size, 24, 24);
            var material = new THREE.MeshLambertMaterial({
                transparent: true,
                opacity: 0.3,
                // wireframe: true,
                color: parseInt($color, 16)
                    //map: texture
            });
            var cube = new THREE.Mesh(geometry, material);

// cube.geometry.computeVertexNormals();

cube.castShadow = true;
            //cube.receiveShadow = true;
            cube.position.set($x, $y, $z);

this.magGroup.add(cube);
            //this.renderFrame = 0;
        },

makeHypo($x, $y, $z, $size = 1, $color = 0x00ff00) {

var size = $size;
            var geometry = new THREE.SphereGeometry(size, 16, 16);
            var material = new THREE.MeshLambertMaterial({
                transparent: true,
                opacity: 1,
                color: parseInt($color, 16)
            });
            var mesh = new THREE.Mesh(geometry, material);

mesh.castShadow = true;
            //cube.receiveShadow = true;
            mesh.position.set($x, $y, $z);

this.hypoGroup.add(mesh);
            this.renderFrame = 0;
        },

makeLoc($x, $y, $z, $size = 1, $color = 0x00ff00) {

var size = $size
            var geometry = new THREE.BoxGeometry(size, size, size);
            var material = new THREE.MeshLambertMaterial({
                color: parseInt($color, 16)
            });
            var point = new THREE.Mesh(geometry, material);

point.castShadow = true;
            //point.receiveShadow = true;
            point.position.set($x, $y, $z);

this.locGroup.add(point);

makeText($text, $lat, $lon) {

var t = this;

var loader = new THREE.FontLoader();
            loader.load('/uploads/161001/glyphs.js', function(font) {

var textGeometry = new THREE.TextGeometry($text, {
                    font: font,
                    size: .15,
                    height: .01,
                    curveSegments: 12,
                    bevelThickness: 1,
                    bevelSize: 1,
                    bevelEnabled: false
                });

var textMaterial = new THREE.MeshPhongMaterial({
                    color: 0xffffff,
                    specular: 0xffffff
                });

var mesh = new THREE.Mesh(textGeometry, textMaterial);
                mesh.position.set($lat, .5, $lon);

t.locGroup.add(mesh);

});

makePlane() {

var t = this,
                texture = new THREE.TextureLoader(),
                textureMaterial;

texture.load(
                'http://lorempixel.com/output/sports-q-c-640-480-9.jpg',
                function(texture) {
                    // do something with the texture
                    textureMaterial = new THREE.MeshBasicMaterial({
                        map: texture
                    });

init();

function init() {
                console.log('Plane init');

var geometry = new THREE.PlaneGeometry(50, 60, 32);
                var plane = new THREE.Mesh(geometry, textureMaterial);

plane.castShadow = true;
                plane.receiveShadow = true;
                plane.rotation.x = 90;
                plane.position.set(10, -20, -10);

t.scene.add(plane);
            }

clearScene: function() {
            var t = this;

// console.log(this);
            for (let i = t.hypoGroup.children.length - 1; i >= 0; i--) {
                t.hypoGroup.remove(t.hypoGroup.children[i]);
            }

for (let i = t.magGroup.children.length - 1; i >= 0; i--) {
                t.magGroup.remove(t.magGroup.children[i]);
            }
        },

hypoSize($scale) {
            var t = this;
            for (let i = 0; i < t.hypoGroup.children.length; i++) {
                t.hypoGroup.children[i].scale.x = $scale;
                t.hypoGroup.children[i].scale.y = $scale;
                t.hypoGroup.children[i].scale.z = $scale;
            }

t.hypoGroup.children.forEach(function() {

});
        },

magSize($scale) {
            var t = this;
            for (let i = 0; i < t.magGroup.children.length; i++) {
                t.magGroup.children[i].scale.x = $scale;
                t.magGroup.children[i].scale.y = $scale;
                t.magGroup.children[i].scale.z = $scale;
            }
        },

renderFrame: 0,
        startTime: 0,

render() {
            var t = this;

this.renderFrame++;
            var i = Math.floor(this.renderFrame / 100);

// Sequence animation
            /*
            if (t.hypoGroup.children.length > 0 && i<t.hypoGroup.children.length) {        
              var s = 0.1;        
              t.hypoGroup.children[i].material.opacity += s;
              if ( i > 0) {
                t.hypoGroup.children[i-1].material.opacity -= s*2;
              }
            }
            */

/*
            if(this.modifyGroup) {
              console.log(77);
              var i=0;
              setTimeout(function () {
                t.hypoGroup.children[i].visible = false;
              }, 1000);
              
              
              for (var i=0; i<t.hypoGroup.children.length; i++) {
                t.hypoGroup.children[i].scale.x += .1;
                t.hypoGroup.children[i].scale.y += .1;
                t.hypoGroup.children[i].scale.z += .1;
              }
              
            }
            */

// http://stackoverflow.com/questions/6065169/requestanimationframe-with-this-keyword
            requestAnimationFrame(this.render.bind(this));
            // t.renderer.setSize(window.innerWidth, window.innerHeight);
            t.renderer.render(t.scene, t.camera);
        },

init() {

var renderer = this.renderer;

// this.makeSky();
            this.makeGrid();
            // makeCube();
            //this.makePlane();
            this.makeCamera();
            this.makeDirectionalLight();
            //makeLight();
            //makePointLight();

this.scene.add(this.locGroup);
            this.scene.add(this.magGroup);
            this.scene.add(this.hypoGroup);
            // this.scene.background = new THREE.Color(0xff0000);

renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setClearColor(0x5c94fc);
            document.body.appendChild(renderer.domElement);

this.render();

}

};
})

/*-------------------------------------------
FIX VALUES
-------------------------------------------*/
.service('fix', function() {
    return {
        n: 12,
        fn(val) {
            return val * this.n;
        },
        lat(val) {
            return ((val - 43) * this.n) * (-1); // (val - 41.8) * this.n;
        },
        lon: function(val) {
            var newVal = ((val - 13)) * this.n;
            // console.log(val, newVal );
            return newVal;
        },
        depth: function(val) {
            return val * (-1) / 5000;
        },
        mag: function(val) {
            var mag = Math.pow((Math.pow(10, val)), (3 / 2)); // val;
            //console.log(mag)
            return mag / Math.pow(10, 7);
        }
    };
})

/*-------------------------------------------
DATE SERVICE
-------------------------------------------*/
.service('dateService', function() {

})

;

// http://webservices.rm.ingv.it/fdsnws/event/1/

编译

CSS

body {
    margin: 0;
    overflow: hidden;
    font-family: consolas;
    background: #5c94fc;
}
aside {
    position: fixed;
    width: 300px;
    background: rgba(0, 0, 0, 0.2);
}
#log {
    position: fixed;
    bottom: 10px;
    left: 10px;
    font-family: courier;
    color: white;
    width: 100%;
}
.form {
    padding: 10px;
    z-index: 10;
    width: 100%;
    color: white;
}
.form label {
    font-size: 11px;
    color: white;
}
.form input {
    font-family: courier;
    background: rgba(255, 255, 255, 0.3);
    border: 0;
    color: white;
    width: 100%;
}
.dna {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
}
.dna textarea {
    font-size: 18px;
    background: none;
    border: none;
    font-family: 'Ubuntu Mono', monospace;
    width: 170px;
    max-width: 170px;
    overflow: hidden;
    line-height: .7;
    white-space: pre-wrap;
    color: white;
}
.camera {
    display: none;
    position: fixed;
    top: 0;
    left: 10px;
    background: none;
}
.camera label {
    color: white;
    display: block;
    width: 100px;
}
canvas {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML

Earthquakes App 本例需要能访问数据服务： http://webservices.rm.ingv.it