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

Get three.js and mappa working together

Browse source
This commit is contained in:
hodasemi 2019-01-16 12:00:42 +01:00
parent 52a0705eff
commit 85b93dce1c
3 changed files with 47769 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47728
aufgabe5/public/assets/js/three.js Normal file
View file

File diff suppressed because one or more lines are too long

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

@ -1,5 +1,4 @@
let tableData_global; // fetched date let tableData_global; // fetched date
// true/false-map für properties
const doFetchCountries = () => { const doFetchCountries = () => {
$.ajax({ url: "/items" }).done((data) => { $.ajax({ url: "/items" }).done((data) => {
@ -16,52 +15,52 @@ window.onload = () => {
setup(); setup();
}; };
/* // mappa
function three() { const options = {
var scene = new THREE.Scene(); lat: 0,
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, lng: 0,
1000); zoom: 4,
var renderer = new THREE.WebGLRenderer(); 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); renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); document.body.appendChild(renderer.domElement);
myMap.overlay(canvas);
myMap.onChange(animate);
scene.add(camera);
var geometry = new THREE.BoxGeometry(1, 1, 1); var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material); var cube = new THREE.Mesh(geometry, material);
scene.add(cube); scene.add(cube);
camera.position.z = 5; camera.position.z = 5;
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
}
*/
let myMap;
let canvas;
let mappa;
// Lets put all our map options in a single object
const options = {
lat: 0,
lng: 0,
zoom: 4,
style: 'mapbox://styles/mapbox/traffic-night-v2'
} }
function setup() { function draw() { }
const key = 'pk.eyJ1IjoicmljYXJkb2xhbmduZXIiLCJhIjoiY2pxano2enh2MG1qazN4bm5lajIzeDl3eiJ9.wK0MtuxLgJxDcGUksKMeKg';
mappa = new Mappa('MapboxGL', key);
canvas = createCanvas(window.innerWidth, window.innerHeight);
// background(100); let's uncomment this, we don't need it for now
// Create a tile map with the options declared
myMap = mappa.tileMap(options);
myMap.overlay(canvas);
}
function draw() {
function animate() {
renderer.render(scene, camera);
} }

4
aufgabe5/public/index.html
View file

@ -13,13 +13,15 @@
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="assets/js/mappa.min.js" type="text/javascript"></script> <script src="assets/js/mappa.min.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>
</head> </head>
<body> <body>
<script type="text/javascript" src="assets/js/jquery-3.3.1.min.js"></script> <canvas id="mapa"></canvas>
<script type="text/javascript" src="assets/js/webgl.js"></script> <script type="text/javascript" src="assets/js/webgl.js"></script>
</body> </body>