Map / scene transition logic + config

js/scene.js

@@ -0,0 +1,92 @@
+// Global ATON
+
+const material = {
+    color: "#e6f2ff",
+    emissive: true,
+};
+
+const Scene = {};
+
+/**
+ * @todo Experimental...
+ * @param {THREE.Object3D} object - A THREE Object3D instance
+ */
+Scene.showEdges = function(object) {
+    const edgeMaterial = new THREE.MeshBasicMaterial({color: "#333"});
+    if (object.isMesh) {
+        let edges = new THREE.EdgesGeometry(object.geometry, 45);
+        let line = new THREE.LineSegments(edges, edgeMaterial);
+        object.add(line);
+
+        console.log(object);
+    }
+    /*
+    const rootUI = ATON.getRootUI();
+    rootUI.traverse(object => APP.showEdges(object));
+    */
+}
+
+/**
+ * @param {String} id - The settings button id
+ */
+Scene.toggleSettingsPanel = function(id) {
+    const btn = document.querySelector(`#${id}`);
+
+    btn.addEventListener('click', () => {
+        ATON.UI.showSidePanel({header: '<i class="bi bi-gear-fill me-1"></i> Impostazioni'});
+    })
+}
+
+Scene.init = function() {
+    console.log("I'm initializing, baby!")
+    ATON.realize();
+    ATON.UI.addBasicEvents();
+    ATON.UI.init();
+    ATON.UI.setSidePanelLeft();
+    // 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));
+
+    ATON.toggleShadows(true);
+    ATON.setExposure(1.3);
+    // Open settings side panel when clicking on btn
+    Scene.toggleSettingsPanel('settings');
+}
+/**
+ * @param {String} id - The back-to-map button id
+ */
+Scene.toggleScene = function(id) {
+    const btn = document.querySelector(`#${id}`);
+    const scene = document.querySelector('#scene');
+
+    btn.addEventListener('click', () => {
+        scene.classList.toggle('d-none');
+        document.querySelector('#map').classList.toggle('d-none');
+    });
+}
+/**
+ * @todo This shoudn't be here...
+ * @param {Object} marker - The marker object from config
+ */
+Scene.openScene = function(marker) {
+    let canvas = document.querySelector('canvas');
+    let scene = document.querySelector('#scene');
+
+    if (canvas === null) {
+        Scene.init();
+    }
+    scene.classList.toggle('d-none');
+    console.log(marker.model);
+	// Load 3D model
+	let mainNode = ATON.createSceneNode(marker.label).load(marker.model);
+    // Panorama should be configurable and / or user-defined
+    ATON.setMainPanorama(marker.pano);
+    mainNode.setMaterial(new THREE.MeshPhongMaterial(material));
+    mainNode.setRotation(0, 1.5, 0)
+
+    //showEdges(mainNode.children[0]);
+    mainNode.attachToRoot();
+}
+
+export default Scene;