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

Fix clipping state bug (partial)

Browse Source
This commit is contained in:
Nicolò P. 2026-01-11 22:27:27 +01:00
parent 8434f3bdc9
commit 91961ec216
2 changed files with 41 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
js/scene.js
View File

@ -30,12 +30,13 @@ Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
trigger.addEventListener( trigger.addEventListener(
'click', 'click',
() => { () => {
console.log('Clipping enabled?', AppState.clipping.enabled);
toolbar.classList.toggle('d-none'); toolbar.classList.toggle('d-none');
const aoCurrentState = AppState.ambientOcclusion; const aoCurrentState = AppState.ambientOcclusion;
if (!AppState.clipping.enabled) { if (!AppState.clipping.enabled) {
AppState.clipping.enabled = true; AppState.clipping.enabled = true;
if (AppState.clipping.controls) AppState.clipping.controls.enabled = true;
Scene.toggleAmbientOcclusion(false); Scene.toggleAmbientOcclusion(false);
const btns = toolbar.querySelectorAll('button'); const btns = toolbar.querySelectorAll('button');
@ -58,7 +59,7 @@ Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
}); });
} }
else if (event.target.id === 'clipY') { else if (event.target.id === 'clipY') {
// Clip along Y... // Clip along Y
Scene.addClippingPlane('y', -1); Scene.addClippingPlane('y', -1);
event.target.classList.add('border', 'border-2', 'border-warning'); event.target.classList.add('border', 'border-2', 'border-warning');
btns.forEach(btn => { btns.forEach(btn => {
@ -68,7 +69,7 @@ Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
}) })
} }
else if (event.target.id === 'clipZ') { else if (event.target.id === 'clipZ') {
// Clip along Z... // Clip along Z
Scene.addClippingPlane('z', 1); Scene.addClippingPlane('z', 1);
event.target.classList.add('border', 'border-2', 'border-warning'); event.target.classList.add('border', 'border-2', 'border-warning');
btns.forEach(btn => { btns.forEach(btn => {
@ -81,8 +82,15 @@ Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
} else { } else {
AppState.clipping.enabled = false; AppState.clipping.enabled = false;
ATON.disableClipPlanes(); ATON.disableClipPlanes();
// Disable DragControls to avoid invoking events...
if (AppState.clipping.controls) {
AppState.clipping.controls.deactivate();
AppState.clipping.controls.dispose();
AppState.clipping.controls = null;
}
AppState.root.remove(AppState.clipping.helper); AppState.root.remove(AppState.clipping.helper);
AppState.clipping.helper = null; AppState.clipping.helper = null;
AppState.clipping.plane = null;
let noBorder = trigger.className.replace(/ border.*$/g, ''); let noBorder = trigger.className.replace(/ border.*$/g, '');
trigger.className = noBorder; trigger.className = noBorder;
Scene.toggleAmbientOcclusion(aoCurrentState); Scene.toggleAmbientOcclusion(aoCurrentState);
@ -140,12 +148,11 @@ Scene.getRootBoundingBox = function() {
/** /**
* *
* @param {THREE.Vector3} rootBBoxSize - The size of the bounding box for the root object * @param {THREE.Sphere} boundingSphere - The bounding sphere for the main node
* @returns {THREE.Mesh} * @returns {THREE.Mesh}
*/ */
Scene.createClippingPlaneMesh = function(rootBBoxSize) { Scene.createClippingPlaneMesh = function (boundingSphere) {
//const averageDim = (Number(rootBBoxSize.x) + Number(rootBBoxSize.y) + Number(rootBBoxSize.z)) / 3; const planeSize = boundingSphere.radius * 1.5;
const planeSize = rootBBoxSize.length() * 1.2;
const mesh = new THREE.Mesh( const mesh = new THREE.Mesh(
new THREE.PlaneGeometry(planeSize, planeSize), new THREE.PlaneGeometry(planeSize, planeSize),
new THREE.MeshBasicMaterial({ color: 0xffff00, opacity: 0.1, side: THREE.DoubleSide, transparent: true }) new THREE.MeshBasicMaterial({ color: 0xffff00, opacity: 0.1, side: THREE.DoubleSide, transparent: true })
@ -175,17 +182,19 @@ Scene.dragClipper = function(planeMesh, axis) {
ATON.Nav.setUserControl(false); ATON.Nav.setUserControl(false);
}); });
const bboxData = AppState.clipping.rootBoundingBox ?? this.getRootBoundingBox(); controls.addEventListener('drag', function(event) {
controls.addEventListener('drag', function (event) {
const point = event.object.position; const point = event.object.position;
Scene.updateClipper(AppState.clipping.vector, point, bboxData); Scene.updateClipper(AppState.clipping.vector, point);
for (const a of excludedAxes) { for (const a of excludedAxes) {
event.object.position[a] = startPosition[a]; event.object.position[a] = startPosition[a];
} }
}); });
controls.addEventListener('dragend', function (event) { controls.addEventListener('dragend', function (event) {
ATON.Nav.setUserControl(true); ATON.Nav.setUserControl(true);
}); });
AppState.clipping.controls = controls;
} }
/** /**
@ -195,9 +204,9 @@ Scene.dragClipper = function(planeMesh, axis) {
*/ */
Scene.addClippingPlane = function(axis, orientation = -1) { Scene.addClippingPlane = function(axis, orientation = -1) {
axis = axis.toLowerCase(); axis = axis.toLowerCase();
const bboxData = AppState.clipping.rootBoundingBox ?? this.getRootBoundingBox(); const bound = AppState.clipping.boundingSphere;
if (!bboxData) return; if (!bound) return;
const vector = [ const vector = [
axis === 'x' ? orientation : 0, axis === 'x' ? orientation : 0,
@ -209,7 +218,7 @@ Scene.addClippingPlane = function(axis, orientation = -1) {
// First, add a default clipping plane // First, add a default clipping plane
// at a default point (calculated...) // at a default point (calculated...)
const defaultPoint = bboxData.center.clone(); const defaultPoint = bound.center.clone();
Scene.activateClipper(vector, axis, defaultPoint); Scene.activateClipper(vector, axis, defaultPoint);
} }
@ -221,32 +230,22 @@ Scene.addClippingPlane = function(axis, orientation = -1) {
* @param {?THREE.Vector3} point - The queried scene point * @param {?THREE.Vector3} point - The queried scene point
*/ */
Scene.activateClipper = function(vector, axis, point = null) { Scene.activateClipper = function(vector, axis, point = null) {
point ??= ATON.getSceneQueriedPoint(); Scene.updateClipper(vector, point);
const bboxData = AppState.clipping.rootBoundingBox ?? this.getRootBoundingBox(); Scene.dragClipper(AppState.clipping.helper, axis);
if (point) {
Scene.updateClipper(vector, point, bboxData);
Scene.dragClipper(AppState.clipping.helper, axis);
}
} }
/** /**
* *
* @param {THREE.Vector3} vector * @param {THREE.Vector3} vector
* @param {THREE.Vector3} point * @param {THREE.Vector3} point
* @param {Object} bboxData
*/ */
Scene.updateClipper = function(vector, point, bboxData) { Scene.updateClipper = function(vector, point) {
// First remove any existing clipping planes
ATON.disableClipPlanes();
// Normal of the clipping plane along the Y axis facing down // Normal of the clipping plane along the Y axis facing down
const normal = new THREE.Vector3(...vector).normalize(); const normal = new THREE.Vector3(...vector).normalize();
//const constant = -normal.dot(point); const plane = AppState.clipping.plane ?? ATON.addClipPlane(normal, point);
const plane = ATON.addClipPlane(normal, point);
// Add a visible plane helper for the clipping plane // Add a visible plane helper for the clipping plane
const visiblePlane = AppState.clipping.helper ?? Scene.createClippingPlaneMesh(bboxData.size); const visiblePlane = AppState.clipping.helper ?? Scene.createClippingPlaneMesh(AppState.clipping.boundingSphere);
// Remove any already visbile helper plane
if (!AppState.clipping.helper) { if (!AppState.clipping.helper) {
AppState.root.add(visiblePlane); AppState.root.add(visiblePlane);
AppState.clipping.helper = visiblePlane; AppState.clipping.helper = visiblePlane;
@ -254,6 +253,9 @@ Scene.updateClipper = function(vector, point, bboxData) {
visiblePlane.position.copy(point); visiblePlane.position.copy(point);
visiblePlane.lookAt(point.clone().add(normal)); visiblePlane.lookAt(point.clone().add(normal));
plane.setFromNormalAndCoplanarPoint(normal, point);
AppState.clipping.plane = plane;
} }
/** /**
@ -482,6 +484,8 @@ Scene.openScene = function(marker) {
setSceneStatus(marker.id, true); setSceneStatus(marker.id, true);
// Load 3D model // Load 3D model
let mainNode = ATON.createSceneNode(marker.label).load(marker.model); let mainNode = ATON.createSceneNode(marker.label).load(marker.model);
// TODO: only for the main ('larger') node in the scene
AppState.mainNodeId = marker.label;
ATON.setMainPanorama(marker.pano); ATON.setMainPanorama(marker.pano);
//mainNode.setMaterial(new THREE.MeshPhongMaterial(material)); //mainNode.setMaterial(new THREE.MeshPhongMaterial(material));
// TODO: hardcoded... // TODO: hardcoded...
@ -497,6 +501,8 @@ Scene.openScene = function(marker) {
AppState.ambientOcclusion = true; AppState.ambientOcclusion = true;
AppState.root = ATON.getRootScene(); AppState.root = ATON.getRootScene();
// ATON.Node.getBound() returns a THREE.Sphere object
AppState.clipping.boundingSphere = mainNode.getBound();
// TODO: set the scene as current!! // TODO: set the scene as current!!
setCurrentScene(marker.id); setCurrentScene(marker.id);

7
js/state.js
View File

@ -1,6 +1,7 @@
export const AppState = { export const AppState = {
// The root scene object // The root scene object
root: null, root: null,
mainNodeId: null,
initialRotation: null, initialRotation: null,
camera: ATON.Nav._camera, camera: ATON.Nav._camera,
renderer: ATON._renderer, renderer: ATON._renderer,
@ -11,8 +12,12 @@ export const AppState = {
map : null, map : null,
clipping : { clipping : {
enabled: false, enabled: false,
plane : null,
controls: null,
onDrag: null,
helper : null, helper : null,
rootBoundingBox: null, // Change to boundingSphere
boundingSphere: null,
listeners: { listeners: {
button: false, button: false,
plane: false, plane: false,