Get it working
This commit is contained in:
parent
9a350e7348
commit
24dfb5ca1b
3 changed files with 1933 additions and 1495 deletions
File diff suppressed because it is too large
Load diff
|
@ -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);
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue