diff --git a/index.html b/index.html index 6188f06..01210c3 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@ - + @@ -78,11 +78,24 @@ +
+ + + +
+
Disabilitare le ombre può migliorare le prestazioni
diff --git a/js/scene.js b/js/scene.js index e3ef431..f9e7d07 100644 --- a/js/scene.js +++ b/js/scene.js @@ -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(); }