Get it working

This commit is contained in:
hodasemi 2019-01-16 17:03:15 +01:00
parent 9a350e7348
commit 24dfb5ca1b
3 changed files with 1933 additions and 1495 deletions

File diff suppressed because it is too large Load diff

View file

@ -8,8 +8,6 @@ const doFetchCountries = () => {
tableData_global = []; tableData_global = [];
tableData_global.push(data); tableData_global.push(data);
} }
setup_bars();
}); });
}; };
@ -27,6 +25,9 @@ const options = {
pitch: 50, pitch: 50,
} }
let WIDTH;
let HEIGHT;
const key = 'pk.eyJ1IjoicmljYXJkb2xhbmduZXIiLCJhIjoiY2pxano2enh2MG1qazN4bm5lajIzeDl3eiJ9.wK0MtuxLgJxDcGUksKMeKg'; const key = 'pk.eyJ1IjoicmljYXJkb2xhbmduZXIiLCJhIjoiY2pxano2enh2MG1qazN4bm5lajIzeDl3eiJ9.wK0MtuxLgJxDcGUksKMeKg';
let mappa; let mappa;
let myMap; let myMap;
@ -36,21 +37,20 @@ let canvas;
let scene; let scene;
let camera; let camera;
let renderer; let renderer;
var light;
let zoom = 1.0;
function setup_enables() { function setup_enables() {
flags = [ flags = [
{ id: "birth_rate_per_1000", enabled: true }, { id: "birth_rate_per_1000", enabled: true, color: 0xff0000 },
{ id: "cell_phones_per_100", enabled: false }, { id: "cell_phones_per_100", enabled: true, color: 0x0ff000 },
{ id: "children_per_woman", enabled: false }, { id: "children_per_woman", enabled: true, color: 0x00ff00 },
{ id: "electricity_consumption_per_capita", enabled: false }, { id: "electricity_consumption_per_capita", enabled: true, color: 0x000ff0 },
{ id: "gdp_per_capita", enabled: false }, { id: "gdp_per_capita", enabled: true, color: 0x0000ff },
{ id: "gdp_per_capita_growth", enabled: false }, { id: "gdp_per_capita_growth", enabled: true, color: 0xf0000f },
{ id: "inflation_annual", enabled: false }, { id: "inflation_annual", enabled: true, color: 0xf000f0 },
{ id: "internet_user_per_100", enabled: false }, { id: "internet_user_per_100", enabled: true, color: 0x00f00f },
{ id: "life_expectancy", enabled: false }, { id: "life_expectancy", enabled: true, color: 0xf00f00 },
{ id: "military_expenditure_percent_of_gdp", enabled: false }, { id: "military_expenditure_percent_of_gdp", enabled: true, color: 0x0f00f0 },
]; ];
} }
@ -61,29 +61,43 @@ function setup() {
canvas.width = window.innerWidth; canvas.width = window.innerWidth;
canvas.height = window.innerHeight; canvas.height = window.innerHeight;
WIDTH = window.innerWidth;
HEIGHT = window.innerHeight;
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 0.1, 1000);
camera.up = new THREE.Vector3(0, 0, 1); camera.up = new THREE.Vector3(0, 0, 1);
//camera.position.z = 300;
scene = new THREE.Scene(); scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({ alpha: true, canvas: canvas }); renderer = new THREE.WebGLRenderer({ alpha: true, canvas: canvas });
renderer.setSize(window.innerWidth, window.innerHeight); light = new THREE.PointLight(0xffffff, 1, 1000);
light.position.set(-50, -50, 100);
light.castShadow = true;
light.shadow.mapSize.width = 512;
light.shadow.mapSize.height = 512;
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 1000;
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement); document.body.appendChild(renderer.domElement);
myMap.overlay(canvas); myMap.overlay(canvas);
myMap.onChange(animate); myMap.onChange(update);
scene.add(camera);
setup_enables(); setup_enables();
update();
} }
function setup_bars() { function setup_objects() {
let k = 1000; scene.remove.apply(scene, scene.children);
scene.add(light);
for (let i = 0; i < tableData_global.length; i++) { for (let i = 0; i < tableData_global.length; i++) {
let long = tableData_global[i]["gps_long"]; let long = tableData_global[i]["gps_long"];
let lat = tableData_global[i]["gps_lat"]; let lat = tableData_global[i]["gps_lat"];
let enabled = 0;
for (let j = 0; j < flags.length; j++) { for (let j = 0; j < flags.length; j++) {
let flag = flags[j]; let flag = flags[j];
@ -91,11 +105,27 @@ function setup_bars() {
if (flag.enabled) { if (flag.enabled) {
let value = tableData_global[i][flag.id]; let value = tableData_global[i][flag.id];
let geometry = new THREE.BoxGeometry(1, 1, value); // TODO: value
let material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); let height = value / 10.0;
let geometry = new THREE.BoxGeometry(1, 1, height);
let material = new THREE.MeshBasicMaterial({ color: flag.color });
let cube = new THREE.Mesh(geometry, material); let cube = new THREE.Mesh(geometry, material);
cube.position.set(long, lat, 0.0); cube.castShadow = true;
cube.receiveShadow = true;
const pos = myMap.latLngToPixel(lat, long);
const vector = new THREE.Vector3();
vector.set((pos.x / WIDTH) * 2 - 1, -(pos.y / HEIGHT) * 2 + 1, 0.5);
vector.unproject(camera);
const dir = vector.sub(camera.position).normalize();
const distance = -camera.position.z / dir.z;
const newPos = camera.position.clone().add(dir.multiplyScalar(distance));
cube.position.set(newPos.x + enabled, newPos.y, newPos.z + height / 2);
scene.add(cube); scene.add(cube);
enabled++;
} }
} }
@ -104,11 +134,13 @@ function setup_bars() {
function draw() { } function draw() { }
function animate() { function update() {
let position = myMap.pixelToLatlng(window.innerWidth / 2, window.innerHeight / 2); setup_objects();
let position = myMap.pixelToLatLng(window.innerWidth / 2, window.innerHeight / 2);
let look_at = new THREE.Vector3(position.x, position.y, 0); let look_at = new THREE.Vector3(position.x, position.y, 0);
camera.position.set(look_at.x, look_at.y - 10 * zoom, look_at.z + 30 * zoom); camera.position.set(look_at.x, look_at.y - 10, look_at.z + 30);
camera.lookAt(look_at); camera.lookAt(look_at);
renderer.render(scene, camera); renderer.render(scene, camera);

View file

@ -13,8 +13,12 @@
rel='stylesheet' type='text/css'> rel='stylesheet' type='text/css'>
<link href="assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <link href="assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/style.css" type="text/css" rel="stylesheet"> <link href="assets/css/style.css" type="text/css" rel="stylesheet">
<script src="assets/js/three.js" type="text/javascript"></script> <script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<script src="https://d3js.org/d3-request.v1.min.js"></script>
<script src="assets/js/mappa.js" type="text/javascript"></script> <script src="assets/js/mappa.js" type="text/javascript"></script>
<script src="assets/js/three.js" type="text/javascript"></script>
<script src="assets/js/p5.min.js" type="text/javascript"></script> <script src="assets/js/p5.min.js" type="text/javascript"></script>
<script type="text/javascript" src="assets/js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="assets/js/jquery-3.3.1.min.js"></script>
</head> </head>