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();
}