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

Clip along selected axis (WIP)

Browse Source
This commit is contained in:
Nicolò P. 2025-10-23 17:02:25 +02:00
parent 7299df6f1e
commit 4dc5e1533c
2 changed files with 58 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@ -16,7 +16,7 @@
<!-- OpenGraph tags -->
<meta property="og:title" content="SCAENE" />
<meta property="og:description" content="__APPDESC__" />
<meta property="og:description" content="Web App 3D per il progetto PRINN 'SCAENAE'" />
<meta property="og:image" content="appicon.png" />
<meta property="og:image:secure_url" content="appicon.png" />
<meta property="og:image:type" content="image/png" />
@ -78,11 +78,24 @@
<a class="btn aton-btn fs-5" id="clipper" title="Clipper">
<i class="bi bi-scissors"></i>
</a>
<div class="d-none
position-absolute
top-0 start-50
translate-middle bg-light
px-4 pt-2 pb-2 bg-opacity-50
rounded-bottom-3
mt-4 text-center"
id="clipper-bar">
<button class="btn aton-btn d-inline" id="clipX">X</button>
<button class="btn aton-btn d-inline" id="clipY">Y</button>
<button class="btn aton-btn d-inline" id="clipZ">Z</button>
</div>
<a class="btn aton-btn fs-5 float-end" id="menu" title="Menu">
<i class="bi bi-list"></i>
</a>
</div>
<!-- TODO CSS-only popover -->
<div class="card d-none" id="shadows-popover" popover>Disabilitare le ombre può migliorare le prestazioni</div>

56
js/scene.js
View File

@ -18,17 +18,35 @@ Scene.UI.domParser = new DOMParser;
/**
* @todo Get clipping button from state? Review logic!!
* @param {String} triggerSelector
* @param {String} targetSelector The selector for the target toolbar to be displayed
*/
Scene.UI.toggleClipper = function(triggerSelector) {
Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
const trigger = document.querySelector(triggerSelector);
const toolbar = document.querySelector(targetSelector);
trigger.addEventListener(
'click',
() => {
toolbar.classList.toggle('d-none');
const aoCurrentState = AppState.ambientOcclusion;
if (!AppState.clipping.enabled) {
AppState.clipping.enabled = true;
trigger.className += ' border border-2 border-white';
Scene.toggleAmbientOcclusion(false);
toolbar.addEventListener('click', event => {
console.log('Clipping target:', event.target);
if (event.target.id === 'clipX') {
// Clip along X...
Scene.addClippingPlane('x', 1);
}
else if (event.target.id === 'clipY') {
// Clip along Y...
Scene.addClippingPlane('y', -1);
}
else if (event.target.id === 'clipZ') {
// Clip along Z...
Scene.addClippingPlane('z', 1);
}
});
//Scene.activateClipper()
} else {
AppState.clipping.enabled = false;
@ -62,17 +80,39 @@ Scene.showEdges = function(object) {
});
}
/**
* @param {String} axis - The axis along wich the plane's normal should be directed,
* one of 'x', 'y', 'z'
* @param {Number} orientation - Positive (1) or negative (-1) orientation on the axis
*/
Scene.addClippingPlane = function(axis, orientation = -1) {
axis = axis.toLowerCase();
// TODO: move to dedicated function!!
window.addEventListener('mousedown', event => {
// Activate clipping when left-clicking on the scene
if (AppState.clipping.enabled && event.buttons === 1) {
const vector = [
axis === 'x' ? orientation : 0,
axis === 'y' ? orientation : 0,
axis === 'z' ? orientation : 0,
]
Scene.activateClipper(vector);
}
});
}
/**
* @todo WIP!
* Activate clipping plane
* @param {Number[]} vector - The vector array to direct the plane
*/
Scene.activateClipper = function() {
Scene.activateClipper = function(vector) {
const point = ATON.getSceneQueriedPoint();
if (point) {
// First remove any existing clipping planes
ATON.disableClipPlanes();
// Normal of the clipping plane along the Y axis facing down
const plane = ATON.addClipPlane(new THREE.Vector3(0, -1, 0), point);
const plane = ATON.addClipPlane(new THREE.Vector3(...vector), point);
// Add a visible plane helper for the clipping plane
const helper = new THREE.PlaneHelper(plane, 24, 0xffff00);
// Remove any already visbile helper plane
@ -232,7 +272,6 @@ Scene.toggleSettingsPanel = function(triggerId) {
}
Scene.init = function() {
console.log("I'm initializing, baby!")
ATON.realize();
ATON.UI.addBasicEvents();
ATON.UI.init();
@ -246,13 +285,6 @@ Scene.init = function() {
Scene.toggleSettingsPanel('settings');
Scene.toggleContentMenu('menu');
// TODO: move to dedicated function!!
window.addEventListener('mousedown', event => {
// Activate clipping when left-clicking on the scene
if (AppState.clipping.enabled && event.buttons === 1) {
this.activateClipper();
}
});
}
/**
* @param {String} id - The back-to-map button id
@ -301,7 +333,7 @@ Scene.openScene = function(marker) {
Scene.toggleAmbientOcclusion(true);
AppState.ambientOcclusion = true;
Scene.UI.toggleClipper('#clipper');
Scene.UI.toggleClipper('#clipper', '#clipper-bar');
AppState.root = ATON.getRootScene();
}