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

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;