Uni/WME
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Get it working

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

798
aufgabe5/public/assets/js/mappa.js
View file

File diff suppressed because it is too large Load diff

84
aufgabe5/public/assets/js/webgl.js
View file

@ -8,8 +8,6 @@ const doFetchCountries = () => {
tableData_global = [];
tableData_global.push(data);
}
setup_bars();
});
};
@ -27,6 +25,9 @@ const options = {
pitch: 50,
}
let WIDTH;
let HEIGHT;
const key = 'pk.eyJ1IjoicmljYXJkb2xhbmduZXIiLCJhIjoiY2pxano2enh2MG1qazN4bm5lajIzeDl3eiJ9.wK0MtuxLgJxDcGUksKMeKg';
let mappa;
let myMap;
@ -36,21 +37,20 @@ let canvas;
let scene;
let camera;
let renderer;
let zoom = 1.0;
var light;
function setup_enables() {
flags = [
{ id: "birth_rate_per_1000", enabled: true },
{ id: "cell_phones_per_100", enabled: false },
{ id: "children_per_woman", enabled: false },
{ id: "electricity_consumption_per_capita", enabled: false },
{ id: "gdp_per_capita", enabled: false },
{ id: "gdp_per_capita_growth", enabled: false },
{ id: "inflation_annual", enabled: false },
{ id: "internet_user_per_100", enabled: false },
{ id: "life_expectancy", enabled: false },
{ id: "military_expenditure_percent_of_gdp", enabled: false },
{ id: "birth_rate_per_1000", enabled: true, color: 0xff0000 },
{ id: "cell_phones_per_100", enabled: true, color: 0x0ff000 },
{ id: "children_per_woman", enabled: true, color: 0x00ff00 },
{ id: "electricity_consumption_per_capita", enabled: true, color: 0x000ff0 },
{ id: "gdp_per_capita", enabled: true, color: 0x0000ff },
{ id: "gdp_per_capita_growth", enabled: true, color: 0xf0000f },
{ id: "inflation_annual", enabled: true, color: 0xf000f0 },
{ id: "internet_user_per_100", enabled: true, color: 0x00f00f },
{ id: "life_expectancy", enabled: true, color: 0xf00f00 },
{ id: "military_expenditure_percent_of_gdp", enabled: true, color: 0x0f00f0 },
];
}
@ -61,29 +61,43 @@ function setup() {
canvas.width = window.innerWidth;
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.position.z = 300;
scene = new THREE.Scene();
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);
myMap.overlay(canvas);
myMap.onChange(animate);
scene.add(camera);
myMap.onChange(update);
setup_enables();
update();
}
function setup_bars() {
let k = 1000;
function setup_objects() {
scene.remove.apply(scene, scene.children);
scene.add(light);
for (let i = 0; i < tableData_global.length; i++) {
let long = tableData_global[i]["gps_long"];
let lat = tableData_global[i]["gps_lat"];
let enabled = 0;
for (let j = 0; j < flags.length; j++) {
let flag = flags[j];
@ -91,11 +105,27 @@ function setup_bars() {
if (flag.enabled) {
let value = tableData_global[i][flag.id];
let geometry = new THREE.BoxGeometry(1, 1, value);
let material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// TODO: value
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);
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);
enabled++;
}
}
@ -104,11 +134,13 @@ function setup_bars() {
function draw() { }
function animate() {
let position = myMap.pixelToLatlng(window.innerWidth / 2, window.innerHeight / 2);
function update() {
setup_objects();
let position = myMap.pixelToLatLng(window.innerWidth / 2, window.innerHeight / 2);
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);
renderer.render(scene, camera);

6
aufgabe5/public/index.html
View file

@ -13,8 +13,12 @@
rel='stylesheet' type='text/css'>
<link href="assets/css/font-awesome/css/font-awesome.min.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/three.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>
</head>