WME/aufgabe5/public/assets/js/webgl.js

let tableData_global; // fetched date

const doFetchCountries = () => {
    $.ajax({ url: "/items" }).done((data) => {
        if (data instanceof Array) tableData_global = data;
        else {
            tableData_global = [];
            tableData_global.push(data);
        }
    });
};

window.onload = () => {
    doFetchCountries();
    setup();
};

// mappa
const options = {
    lat: 0,
    lng: 0,
    zoom: 4,
    style: 'mapbox://styles/mapbox/traffic-night-v2',
    pitch: 50,
}

const key = 'pk.eyJ1IjoicmljYXJkb2xhbmduZXIiLCJhIjoiY2pxano2enh2MG1qazN4bm5lajIzeDl3eiJ9.wK0MtuxLgJxDcGUksKMeKg';
let mappa;
let myMap;
let canvas;

// three
let scene;
let camera;
let renderer;

function setup() {
    mappa = new Mappa('MapboxGL', key);
    myMap = mappa.tileMap(options);
    canvas = document.getElementById("mapa");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer({ alpha: true, canvas: canvas });

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

    myMap.overlay(canvas);
    myMap.onChange(animate);
    scene.add(camera);

    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    camera.position.z = 5;
}

function draw() { }

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