Draft map with Leaflet (inverted logic...)
This commit is contained in:
parent
dd18fdce3d
commit
051a32195e
1
.gitignore
vendored
1
.gitignore
vendored
@ -6,3 +6,4 @@
|
||||
*.gl*
|
||||
*.obj
|
||||
|
||||
vendor/
|
||||
|
||||
BIN
assets/defsky-grass.jpg
Normal file
BIN
assets/defsky-grass.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
15
index.html
15
index.html
@ -37,7 +37,9 @@
|
||||
|
||||
<title>SCAENE</title>
|
||||
<link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap-icons/font/bootstrap-icons.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="/res/css/main.css">
|
||||
<link rel="stylesheet" href="./vendor/leaflet/dist/leaflet.css">
|
||||
|
||||
<!-- Vendors -->
|
||||
<script type="text/javascript" src="/vendors/vendors.min.js"></script>
|
||||
@ -45,14 +47,21 @@
|
||||
|
||||
<script type="text/javascript" src="/dist/THREE.bundle.js"></script>
|
||||
<script type="text/javascript" src="/dist/ATON.min.js"></script>
|
||||
<script type="text/javascript" src="./vendor/leaflet/dist/leaflet-src.js"></script>
|
||||
|
||||
<!-- Main js entry -->
|
||||
<script type="text/javascript" src="js/main.js"></script>
|
||||
<script type="module" src="js/main.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body style="height: 100vh;">
|
||||
<div class="map d-none" id="map" style="height: 100%;"></div>
|
||||
<div id="toolbar" class="aton-toolbar-top">
|
||||
<a class="btn aton-btn" id="settings">Settings</a>
|
||||
<a class="btn aton-btn fs-5" id="back" title="Torna alla mappa">
|
||||
<i class="bi bi-map-fill"></i>
|
||||
</a>
|
||||
<a class="btn aton-btn fs-5" id="settings" title="Impostazioni">
|
||||
<i class="bi bi-gear-fill"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="aton-poweredby" >
|
||||
|
||||
32
js/main.js
32
js/main.js
@ -1,5 +1,6 @@
|
||||
import Map from "./map.js";
|
||||
/*
|
||||
Main js entry for template ATON web-app
|
||||
Main js entry for ATON web-app
|
||||
|
||||
===============================================*/
|
||||
// Realize our app
|
||||
@ -11,10 +12,13 @@ const material = {
|
||||
};
|
||||
|
||||
APP.showEdges = function(object) {
|
||||
const edgeMaterial = new THREE.MeshBasicMaterial({color: "#333"});
|
||||
if (object.isMesh) {
|
||||
let edges = new THREE.EdgesGeometry(child.geometry, 45);
|
||||
let edges = new THREE.EdgesGeometry(object.geometry, 45);
|
||||
let line = new THREE.LineSegments(edges, edgeMaterial);
|
||||
child.add(line);
|
||||
object.add(line);
|
||||
|
||||
console.log(object);
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,10 +29,24 @@ APP.toggleSettingsPanel = function(id) {
|
||||
const btn = document.querySelector(`#${id}`);
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
ATON.UI.showSidePanel({header: 'Settings'});
|
||||
ATON.UI.showSidePanel({header: '<i class="bi bi-gear-fill me-1"></i> Impostazioni'});
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {String} id - The back-to-map button id
|
||||
*/
|
||||
APP.toggleScene = function(id) {
|
||||
const btn = document.querySelector(`#${id}`);
|
||||
const scene = document.querySelector('canvas');
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
scene.classList.toggle('d-none');
|
||||
document.querySelector('#map').classList.toggle('d-none');
|
||||
Map.init('map');
|
||||
});
|
||||
}
|
||||
|
||||
// You can require here flares (plugins) if needed by the app
|
||||
//APP.requireFlares(["myFlare","anotherFlare"]);
|
||||
|
||||
@ -44,13 +62,19 @@ APP.setup = ()=>{
|
||||
|
||||
// Open settings side panel when clicking on btn
|
||||
APP.toggleSettingsPanel('settings');
|
||||
APP.toggleScene('back');
|
||||
|
||||
// All assets for this app are stored here
|
||||
ATON.setPathCollection('./assets/');
|
||||
// Light direction should be dynamic / user-defined
|
||||
ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7));
|
||||
|
||||
const rootUI = ATON.getRootUI();
|
||||
rootUI.traverse(object => APP.showEdges(object));
|
||||
|
||||
// Load 3D model
|
||||
let mainNode = ATON.createSceneNode("teatro").load("teatro_san_salvador_20250926.gltf");
|
||||
// Panorama should be configurable and / or user-defined
|
||||
const pano = "defsky-grass.jpg";
|
||||
ATON.setMainPanorama(pano);
|
||||
mainNode.setMaterial(new THREE.MeshPhongMaterial(material));
|
||||
|
||||
24
js/map.js
Normal file
24
js/map.js
Normal file
@ -0,0 +1,24 @@
|
||||
// Global Leaflet
|
||||
const Map = {};
|
||||
|
||||
Map.init = function(mapContainerId) {
|
||||
let baseMap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxNativeZoom : 15,
|
||||
maxZoom: 15,
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
});
|
||||
|
||||
// Mappa centrata su Roma...
|
||||
let map = L.map(mapContainerId, {
|
||||
//attributionControl: false,
|
||||
minZoom: 5,
|
||||
}).setView([41.9028, 12.4964], 6);
|
||||
|
||||
baseMap.addTo(map);
|
||||
|
||||
L.marker([45.4363, 12.3352]).addTo(map)
|
||||
.bindPopup('Teatro San Salvador, Venezia')
|
||||
.openPopup();
|
||||
}
|
||||
|
||||
export default Map;
|
||||
11
package.json
Normal file
11
package.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "scaenae",
|
||||
"version": "1.0.0",
|
||||
"description": "SCAENAE web app",
|
||||
"main": "main.js",
|
||||
"author": "Nicolò P. <nicolo.paraciani@cnr.it>",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"leaflet": "^1.9.4"
|
||||
}
|
||||
}
|
||||
8
yarn.lock
Normal file
8
yarn.lock
Normal file
@ -0,0 +1,8 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
||||
# yarn lockfile v1
|
||||
|
||||
|
||||
leaflet@^1.9.4:
|
||||
version "1.9.4"
|
||||
resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
|
||||
integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
|
||||
Loading…
Reference in New Issue
Block a user