diff --git a/.yarnc b/.yarnrc
similarity index 100%
rename from .yarnc
rename to .yarnrc
diff --git a/js/scene.js b/js/scene.js
index ccb3b6f..44aea8d 100644
--- a/js/scene.js
+++ b/js/scene.js
@@ -1,7 +1,11 @@
// Global ATON
+import { getSceneStatus } from "./state.js";
+import { setSceneStatus } from "./state.js";
+
const material = {
- color: "#e6f2ff",
+ color: "#fff",
+ //color: "#e6f2ff",
emissive: true,
};
@@ -12,22 +16,63 @@ const Scene = {};
* @param {THREE.Object3D} object - A THREE Object3D instance
*/
Scene.showEdges = function(object) {
- const edgeMaterial = new THREE.MeshBasicMaterial({color: "#333"});
- if (object.isMesh) {
- let edges = new THREE.EdgesGeometry(object.geometry, 45);
- let line = new THREE.LineSegments(edges, edgeMaterial);
- object.add(line);
+ const edgeMaterial = new THREE.LineBasicMaterial( { color: 0x000000 } );
- console.log(object);
- }
+ object.traverse(function(child) {
+
+ if (child.isMesh) {
+ let edges = new THREE.EdgesGeometry(child.geometry, 45);
+ let line = new THREE.LineSegments(edges, edgeMaterial);
+ child.add(line);
+
+ console.log(child);
+ }
+ });
/*
- const rootUI = ATON.getRootUI();
- rootUI.traverse(object => APP.showEdges(object));
+ rootUI.traverse(object => Scene.showEdges(object));
*/
}
-Scene.changeLightDirection = function(x, y = -0.3, z = -0.7) {
- ATON.setMainLightDirection(new THREE.Vector3(x, y, z));
+/**
+ *
+ * @param {{x,y,z}} vector
+ */
+Scene.changeLightDirection = function(vector) {
+ ATON.setMainLightDirection(new THREE.Vector3(vector.x, vector.y, vector.z));
+}
+
+/**
+ *
+ * @param {Boolean} isEnabled
+ */
+Scene.toggleAmbientOcclusion = function(isEnabled) {
+ ATON.FX.togglePass(ATON.FX.PASS_AO, isEnabled);
+}
+
+/**
+ *
+ * @param {String} direction - The axis direction, one of 'x','y','z'
+ * @param {String} label - The slider label
+ * @param {Number[]} range - The slider's range
+ * @param {Number} step - The slider's step
+ */
+Scene.createLightSlider = function(direction, label, range, step) {
+ const lightSlider = ATON.UI.createSlider({
+ range,
+ label,
+ value: 0,
+ oninput: val => {
+ const lightDir = ATON.getMainLightDirection();
+ // Keep existing direction values for the other axes
+ lightDir[direction] = Number.parseFloat(val);
+ this.changeLightDirection(lightDir);
+ },
+ });
+
+ lightSlider.classList.add('ms-4');
+ lightSlider.querySelector('input').step = step;
+
+ return lightSlider;
}
/**
@@ -38,55 +83,40 @@ Scene.toggleSettingsPanel = function(id) {
const lightHeading = document.createElement('h2');
lightHeading.className = 'fs-5 ms-2 mb-3 mt-3';
lightHeading.innerHTML = ' Direzione luce';
+ const envHeading = document.createElement('h2');
+ envHeading.className = 'fs-5 ms-2 mb-3 mt-3';
+ envHeading.innerHTML = ' Ambiente';
btn.addEventListener('click', () => {
ATON.UI.showSidePanel({header: ' Impostazioni'});
ATON.UI.elSidePanel.appendChild(lightHeading);
- const lightSliderX = ATON.UI.createSlider({
- range: [-2, 2],
- label: 'Asse X',
- value: 0,
- oninput: val => {
- const lightDir = ATON.getMainLightDirection();
- console.log(lightDir);
- // Keep existing Y and Z direction values
- this.changeLightDirection(val, lightDir.y, lightDir.z);
- },
- });
- const lightSliderY = ATON.UI.createSlider({
- range: [-2, 2],
- label: 'Asse Y',
- value: 0,
- oninput: val => {
- const lightDir = ATON.getMainLightDirection();
- console.log(lightDir);
- // Keep existing X and Z direction values
- this.changeLightDirection(lightDir.x, val, lightDir.z);
- },
- });
- const lightSliderZ = ATON.UI.createSlider({
- range: [-2, 2],
- label: 'Asse Z',
- value: 0,
- oninput: val => {
- const lightDir = ATON.getMainLightDirection();
- console.log(lightDir);
- // Keep existing X and Y direction values
- this.changeLightDirection(lightDir.x, lightDir.y, val);
- },
- });
+ const lightSliderX = this.createLightSlider('x', 'Asse X', [-2, 2], 0.1);
+ const lightSliderY = this.createLightSlider('y', 'Asse Y', [-2, 2], 0.1);
+ const lightSliderZ = this.createLightSlider('z', 'Asse Z', [-2, 2], 0.1);
- lightSliderX.classList.add('ms-4');
- lightSliderY.classList.add('ms-4');
- lightSliderZ.classList.add('ms-4');
- // Set step to 0.1 for the range input
- lightSliderX.querySelector('input').step = 0.1;
- lightSliderY.querySelector('input').step = 0.1;
- lightSliderZ.querySelector('input').step = 0.1;
ATON.UI.elSidePanel.appendChild(lightSliderX);
ATON.UI.elSidePanel.appendChild(lightSliderY);
ATON.UI.elSidePanel.appendChild(lightSliderZ);
+
+ ATON.UI.elSidePanel.appendChild(envHeading);
+
+ const ambientOcclSwitch = document.createElement('div');
+ ambientOcclSwitch.className = 'form-check form-switch ms-4 mt-2';
+ ambientOcclSwitch.innerHTML = `
+
+
+ `;
+
+ const shadowsSwitch = document.createElement('div');
+ shadowsSwitch.className = 'form-check form-switch ms-4 mt-2';
+ shadowsSwitch.innerHTML = `
+
+
+ `;
+
+ ATON.UI.elSidePanel.appendChild(ambientOcclSwitch);
+ ATON.UI.elSidePanel.appendChild(shadowsSwitch);
});
}
@@ -102,7 +132,7 @@ Scene.init = function() {
ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7));
ATON.toggleShadows(true);
- ATON.setExposure(1.3);
+ ATON.setExposure(0.8);
// Open settings side panel when clicking on settings btn
Scene.toggleSettingsPanel('settings');
}
@@ -119,6 +149,7 @@ Scene.toggleScene = function(id) {
});
}
/**
+ * @todo Load model, pano etc. only if scene hasn't been opened yet
* @param {Object} marker - The marker object from config
*/
Scene.openScene = function(marker) {
@@ -130,13 +161,23 @@ Scene.openScene = function(marker) {
}
scene.classList.toggle('d-none');
- // Load 3D model
- let mainNode = ATON.createSceneNode(marker.label).load(marker.model);
- ATON.setMainPanorama(marker.pano);
- mainNode.setMaterial(new THREE.MeshPhongMaterial(material));
- mainNode.setRotation(0, 1.5, 0)
- mainNode.attachToRoot();
+ if (!getSceneStatus(marker.id)) {
+ // Set scene as active
+ setSceneStatus(marker.id, true);
+ // Load 3D model
+ let mainNode = ATON.createSceneNode(marker.label).load(marker.model);
+ ATON.setMainPanorama(marker.pano);
+ //mainNode.setMaterial(new THREE.MeshPhongMaterial(material));
+ mainNode.setRotation(0, 1.5, 0)
+ Scene.showEdges(mainNode);
+
+ mainNode.attachToRoot();
+
+ ATON.setAutoLP(true);
+ Scene.toggleAmbientOcclusion(true);
+ }
+ //const rootUI = ATON.getRootUI();
}
export default Scene;
\ No newline at end of file
diff --git a/js/state.js b/js/state.js
new file mode 100644
index 0000000..983dc58
--- /dev/null
+++ b/js/state.js
@@ -0,0 +1,27 @@
+export const AppState = {
+ scenes : [
+ {
+ id : "salvador",
+ active : false
+ }
+ ],
+}
+
+/**
+ * @todo Buggyyyyy!!!!
+ * @param {String} id
+ * @returns {Boolean}
+ */
+export function getSceneStatus(id) {
+ return AppState.scenes.find(s => s.id === id).active;
+}
+
+/**
+ * @todo Buggyyyyy!!!!
+ * @param {String} id
+ * @param {Boolean} status
+ * @returns {Boolean}
+ */
+export function setSceneStatus(id, status) {
+ return AppState.scenes.find(s => s.id === id).active = status;
+}
\ No newline at end of file