nicolo/scaenae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restructure to use separate scenes

Browse Source 
Uses pseudo-router logic...
This commit is contained in:
Nicolò P.
2026-01-14 16:42:39 +01:00
parent 8c1da5e4e2
commit e85bd4f959
13 changed files with 307 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
js/main.js
View File

@@ -1,5 +1,4 @@
import Map from "./map.js";
import Scene from "./scene.js";
/*
Main js entry for ATON web-app
@@ -7,30 +6,10 @@ import Scene from "./scene.js";
// Realize our app
let APP = ATON.App.realize();
APP.UI = {};
/**
*
* @param {String} triggerSelector - Usually, the close modal trigger element(s) selector
*/
APP.UI.pauseAudio = function(triggerSelector) {
// What if more than one audio element is playing?
const audio = document.querySelector('audio');
document.querySelectorAll(triggerSelector).forEach(el => {
el.addEventListener('click', () => audio.pause());
});
document.querySelector('.modal').addEventListener('blur', () => {
audio.pause();
});
}
// APP.setup() is required for web-app initialization
// You can place here UI setup (HTML), events handling, etc.
APP.setup = ()=>{
Map.init('map');
APP.UI.pauseAudio('[data-bs-dismiss="modal"');
//APP.UI.showClipper('#clipper');
};
/* If you plan to use an update routine (executed continuously), you can place its logic here.

11
js/map.js
View File

@@ -1,7 +1,6 @@
// Global Leaflet and ATON
import {config} from '../config.js';
import Scene from './scene.js';
import AppState from './state.js';
const Map = {};
@@ -29,7 +28,7 @@ Map.init = function(mapContainerId) {
const popup = this.domParser.parseFromString(marker.popup, 'text/html')
.querySelector('div');
popup.querySelector('button').onclick = () => {
Scene.openScene(marker);
this.goToScene(marker.uri);
map.getContainer().classList.toggle('d-none');
};
@@ -41,4 +40,12 @@ Map.init = function(mapContainerId) {
AppState.map = map;
}
/**
*
* @param {String} uri The scene's absolute URI (from config)
*/
Map.goToScene = function (uri) {
location.href = uri;
}
export default Map;

149
js/scene.js
View File

@@ -8,6 +8,20 @@ const Scene = {};
Scene.UI = {};
Scene.UI.domParser = new DOMParser;
/**
*
* @param {String} triggerSelector - Usually, the close modal trigger element(s) selector
*/
Scene.UI.pauseAudio = function(triggerSelector) {
// What if more than one audio element is playing?
const audio = document.querySelector('audio');
document.querySelectorAll(triggerSelector).forEach(el => {
el.addEventListener('click', () => audio.pause());
});
document.querySelector('.modal').addEventListener('blur', () => {
audio.pause();
});
}
/**
* Resets the UI state (essentially hides the clipper toolbar if visible...)
@@ -32,10 +46,11 @@ Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
() => {
toolbar.classList.toggle('d-none');
const aoCurrentState = AppState.ambientOcclusion;
if (!AppState.clipping.enabled) {
if (!toolbar.classList.contains('d-none')) {
AppState.clipping.enabled = true;
if (AppState.clipping.controls) AppState.clipping.controls.enabled = true;
//if (AppState.clipping.controls) AppState.clipping.controls.enabled = true;
Scene.toggleAmbientOcclusion(false);
@@ -46,7 +61,6 @@ Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
trigger.className += ' border border-2 border-white';
toolbar.addEventListener('click', event => {
console.log('Clipping target:', event.target);
if (event.target.id === 'clipX') {
// Clip along X...
Scene.addClippingPlane('x', -1);
@@ -80,7 +94,6 @@ Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
}
});
} else {
AppState.clipping.enabled = false;
Scene.resetClipping();
let noBorder = trigger.className.replace(/ border.*$/g, '');
trigger.className = noBorder;
@@ -155,37 +168,40 @@ Scene.createClippingPlaneMesh = function (boundingSphere) {
/**
*
* @param {THREE.Mesh} planeMesh
* @param {THREE.ArrowHelper} arrowHelper
* @param {String} axis
*/
Scene.dragClipper = function(planeMesh, axis) {
const controls = new THREE.DragControls(
[planeMesh],
AppState.camera,
AppState.renderer.domElement,
ATON.Nav._camera,
ATON._renderer.domElement,
);
const startPosition = new THREE.Vector3();
// Only move along the selected axis (exlude the others)
const excludedAxes = ['x', 'y', 'z'].filter(a => a != axis);
controls.addEventListener('dragstart', function (event) {
startPosition.copy(event.object.position);
ATON.Nav.setUserControl(false);
});
if (AppState.clipping.enabled && AppState.clipping.vector) {
controls.addEventListener('dragstart', function (event) {
startPosition.copy(event.object.position);
ATON.Nav.setUserControl(false);
});
controls.addEventListener('drag', function(event) {
const point = event.object.position;
Scene.updateClipper(AppState.clipping.vector, point);
for (const a of excludedAxes) {
event.object.position[a] = startPosition[a];
}
});
controls.addEventListener('drag', function(event) {
const point = event.object.position;
Scene.updateClipper(AppState.clipping.vector, point);
for (const a of excludedAxes) {
event.object.position[a] = startPosition[a];
}
});
controls.addEventListener('dragend', function (event) {
ATON.Nav.setUserControl(true);
});
controls.addEventListener('dragend', function (event) {
ATON.Nav.setUserControl(true);
});
AppState.clipping.controls = controls;
AppState.clipping.controls = controls;
}
}
/**
@@ -221,6 +237,7 @@ Scene.addClippingPlane = function(axis, orientation = -1) {
* @param {?THREE.Vector3} point - The queried scene point
*/
Scene.activateClipper = function(vector, axis, point = null) {
ATON.enableClipPlanes();
Scene.updateClipper(vector, point);
Scene.dragClipper(AppState.clipping.helper, axis);
}
@@ -231,22 +248,25 @@ Scene.activateClipper = function(vector, axis, point = null) {
* @param {THREE.Vector3} point
*/
Scene.updateClipper = function(vector, point) {
// Normal of the clipping plane along the Y axis facing down
const normal = new THREE.Vector3(...vector).normalize();
const plane = AppState.clipping.plane ?? ATON.addClipPlane(normal, point);
// Add a visible plane helper for the clipping plane
const visiblePlane = AppState.clipping.helper ?? Scene.createClippingPlaneMesh(AppState.clipping.boundingSphere);
// Useless guard...
if (vector) {
// Normal of the clipping plane along the axis facing down
const normal = new THREE.Vector3(...vector).normalize();
const plane = AppState.clipping.plane ?? ATON.addClipPlane(normal, point);
// Add a visible plane helper for the clipping plane
const visiblePlane = AppState.clipping.helper ?? Scene.createClippingPlaneMesh(AppState.clipping.boundingSphere);
if (!AppState.clipping.helper) {
AppState.root.add(visiblePlane);
AppState.clipping.helper = visiblePlane;
}
if (!AppState.clipping.helper) {
AppState.root.add(visiblePlane);
AppState.clipping.helper = visiblePlane;
}
visiblePlane.position.copy(point);
visiblePlane.lookAt(point.clone().add(normal));
visiblePlane.position.copy(point);
visiblePlane.lookAt(point.clone().add(normal));
plane.setFromNormalAndCoplanarPoint(normal, point);
AppState.clipping.plane = plane;
plane.setFromNormalAndCoplanarPoint(normal, point);
AppState.clipping.plane = plane;
}
}
/**
@@ -402,7 +422,7 @@ Scene.init = function() {
ATON.UI.addBasicEvents();
ATON.UI.init();
// All assets for this app are stored here
ATON.setPathCollection('./assets/');
ATON.setPathCollection('/a/scaenae/assets/');
// Initial light direction
ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7));
ATON.toggleShadows(true);
@@ -416,37 +436,21 @@ Scene.init = function() {
ATON.Nav.setUserControl(true);
}
/**
* @param {String} btnId - The back-to-map button id
*/
Scene.closeScene = function() {
const scene = document.querySelector('#scene');
scene.classList.toggle('d-none');
const canvas = ATON._renderer?.domElement;
Scene.resetClipping();
AppState.root.clear();
// Ensure GPU resources are freed...
ATON.renderPause();
AppState.renderer.dispose();
ATON._renderer.dispose();
ATON.Nav._camera = undefined;
Scene.UI.reset();
document.querySelector('#map').classList.toggle('d-none');
AppState.map.invalidateSize();
AppState.resetSceneState(AppState.map);
// Remove ATON's canvas from the DOM
if (canvas && canvas.parentElement) {
canvas.parentElement.removeChild(canvas);
}
}
Scene.resetClipping = function () {
AppState.clipping.controls?.dispose();
AppState.clipping.controls = null;
ATON.disableClipPlanes();
console.warn('Resetting clipping!!');
AppState.clipping.enabled = false;
ATON.disableClipPlanes();
AppState.clipping.controls.deactivate();
// Manually remove event listeners from DragControls!!
AppState.renderer.domElement.removeEventListener( 'pointermove', AppState.clipping.controls.onPointerMove );
AppState.renderer.domElement.removeEventListener( 'pointerdown', AppState.clipping.controls.onPointerDown );
AppState.renderer.domElement.removeEventListener( 'pointerup', AppState.clipping.controls.onPointerCancel );
AppState.renderer.domElement.removeEventListener( 'pointerleave', AppState.clipping.controls.onPointerCancel )
AppState.clipping.controls = null;
AppState.clipping.helper.removeFromParent();
AppState.root.remove(AppState.clipping.helper);
AppState.clipping.helper = null;
AppState.clipping.plane = null;
@@ -458,27 +462,10 @@ Scene.resetClipping = function () {
* @param {Object} marker - The marker object from config
*/
Scene.openScene = function(marker) {
//let canvas = document.querySelector('canvas');
let scene = document.querySelector('#scene');
Scene.init();
// Button to go back to the map...
const btn = document.querySelector('#back');
btn.addEventListener('click', () => {
Scene.closeScene('back');
});
Scene.UI.toggleClipper('#clipper', '#clipper-bar');
scene.classList.toggle('d-none');
ATON.renderResume();
if (!AppState.scenes.find(s => s.id === marker.id)) {
const newScene = {id: marker.id, active: false, current: true};
AppState.scenes.push(newScene);
}
// Load 3D model then
let mainNode = ATON.createSceneNode(marker.label);
mainNode.load(marker.model);
@@ -501,8 +488,6 @@ Scene.openScene = function(marker) {
AppState.root = ATON.getRootScene();
// ATON.Node.getBound() returns a THREE.Sphere object
AppState.clipping.boundingSphere = mainNode.getBound();
console.log(ATON.Nav._camera);
}
export default Scene;

4
js/state.js
View File

@@ -8,7 +8,6 @@ let AppState = {
initialRotation: null,
camera: null,
renderer: null,
scenes : [],
ambientOcclusion : true,
shadows : true,
lightProbe : false,
@@ -19,6 +18,7 @@ let AppState = {
controls: null,
onDrag: null,
helper : null,
arrow : null,
boundingSphere: null,
listeners: {
button: false,
@@ -39,7 +39,6 @@ let AppState = {
initialRotation: null,
camera: null,
renderer: null,
scenes : [],
ambientOcclusion : true,
shadows : true,
lightProbe : false,
@@ -50,6 +49,7 @@ let AppState = {
controls: null,
onDrag: null,
helper : null,
arrow : null,
boundingSphere: null,
listeners: {
button: false,