diff --git a/assets/hemi-grey.jpg b/assets/hemi-grey.jpg
new file mode 100644
index 0000000..69f1a23
Binary files /dev/null and b/assets/hemi-grey.jpg differ
diff --git a/config.js b/config.js
index 54fadcc..6989630 100644
--- a/config.js
+++ b/config.js
@@ -12,6 +12,10 @@ const audioBtn1 = `
`;
export const config = {
+ scene : {
+ initialExposure: 0.6,
+ autoLP: false,
+ },
menu : {
audioBtn1
},
@@ -22,7 +26,7 @@ export const config = {
popup: theater1Popup,
coords: [45.4363, 12.3352],
model: "teatro_san_salvador_20250926.gltf",
- pano: "defsky-grass.jpg",
+ pano: "hemi-grey.jpg",
}
],
map : {
diff --git a/js/scene.js b/js/scene.js
index dee2b05..e3ef431 100644
--- a/js/scene.js
+++ b/js/scene.js
@@ -15,6 +15,34 @@ Scene.UI = {};
Scene.UI.domParser = new DOMParser;
+/**
+ * @todo Get clipping button from state? Review logic!!
+ * @param {String} triggerSelector
+ */
+Scene.UI.toggleClipper = function(triggerSelector) {
+ const trigger = document.querySelector(triggerSelector);
+ trigger.addEventListener(
+ 'click',
+ () => {
+ const aoCurrentState = AppState.ambientOcclusion;
+ if (!AppState.clipping.enabled) {
+ AppState.clipping.enabled = true;
+ trigger.className += ' border border-2 border-white';
+ Scene.toggleAmbientOcclusion(false);
+ //Scene.activateClipper()
+ } else {
+ AppState.clipping.enabled = false;
+ ATON.disableClipPlanes();
+ AppState.root.remove(AppState.clipping.helper);
+ AppState.clipping.helper = null;
+ let noBorder = trigger.className.replace(/ border.*$/g, '');
+ trigger.className = noBorder;
+ Scene.toggleAmbientOcclusion(aoCurrentState);
+ }
+ }
+ );
+}
+
/**
* @todo Experimental...
* @param {THREE.Object3D} object - A THREE Object3D instance
@@ -39,18 +67,20 @@ Scene.showEdges = function(object) {
* Activate clipping plane
*/
Scene.activateClipper = function() {
- const geometry = new THREE.PlaneGeometry( 24, 24 );
- const material = new THREE.MeshPhongMaterial({
- color: 0xffffee,
- opacity: 0.5,
- transparent: true,
- });
- const plane = new THREE.Mesh( geometry, material );
- const root = AppState.root;
- console.log(root, plane);
- root.add(plane);
- AppState.clipping.enabled = true;
- AppState.clipping.plane = plane;
+ 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);
+ // Add a visible plane helper for the clipping plane
+ const helper = new THREE.PlaneHelper(plane, 24, 0xffff00);
+ // Remove any already visbile helper plane
+ if (AppState.clipping.helper !== null) AppState.root.remove(AppState.clipping.helper);
+ AppState.root.add(helper);
+ AppState.clipping.helper = helper;
+ console.log("I'm clipping, baby!");
+ }
}
/**
@@ -155,11 +185,21 @@ Scene.toggleSettingsPanel = function(triggerId) {
`;
+ const lightProbeSwitch = document.createElement('div');
+ lightProbeSwitch.className = 'form-check form-switch ms-4 mt-2';
+ lightProbeSwitch.innerHTML = `
+
+
+ `;
+
shadowsSwitch.querySelector('input[type="checkbox"').checked = AppState.shadows;
ambientOcclSwitch.querySelector('input[type="checkbox"').checked = AppState.ambientOcclusion;
+ lightProbeSwitch.querySelector('input[type="checkbox"').checked = AppState.lightProbe;
ATON.UI.elSidePanel.appendChild(ambientOcclSwitch);
ATON.UI.elSidePanel.appendChild(shadowsSwitch);
+ ATON.UI.elSidePanel.appendChild(lightProbeSwitch);
+
// TODO: move somewhere else...
document.querySelector('#aoSwitch').addEventListener(
'change',
@@ -176,35 +216,19 @@ Scene.toggleSettingsPanel = function(triggerId) {
AppState.shadows = checked;
}
);
- });
-}
-
-/**
- * @todo Get clipping button from state? Review logic!!
- * @param {String} triggerSelector
- */
-Scene.UI.toggleClipper = function(triggerSelector) {
- const trigger = document.querySelector(triggerSelector);
- trigger.addEventListener(
- 'click',
- () => {
- const aoCurrentState = AppState.ambientOcclusion;
- if (!AppState.clipping.enabled) {
- AppState.clipping.enabled = true;
- trigger.className += ' border border-2 border-white';
- Scene.toggleAmbientOcclusion(false);
- //Scene.activateClipper()
- } else {
- AppState.clipping.enabled = false;
- ATON.disableClipPlanes();
- AppState.root.remove(AppState.clipping.helper);
- AppState.clipping.helper = null;
- let noBorder = trigger.className.replace(/ border.*$/g, '');
- trigger.className = noBorder;
- Scene.toggleAmbientOcclusion(aoCurrentState);
+ // Not working properly?
+ document.querySelector('#lpSwitch').addEventListener(
+ 'change',
+ event => {
+ const checked = event.target.checked;
+ ATON.setAutoLP(checked);
+ //if (!checked) ATON.clearLightProbes();
+ AppState.lightProbe = checked;
+ if (checked) ATON.updateLightProbes();
+ console.log('Light probe: ', checked);
}
- }
- );
+ );
+ });
}
Scene.init = function() {
@@ -214,32 +238,19 @@ Scene.init = function() {
ATON.UI.init();
// All assets for this app are stored here
ATON.setPathCollection('./assets/');
- // Light direction should be dynamic / user-defined
+ // Initial light direction
ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7));
-
ATON.toggleShadows(true);
- ATON.setExposure(0.8);
+ ATON.setExposure(config.scene.initialExposure);
// Open settings side panel when clicking on settings btn
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) {
- 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);
- // Add a visible plane helper for the clipping plane
- const helper = new THREE.PlaneHelper(plane, 24, 0xffff00);
- // Remove any already visbile helper plane
- if (AppState.clipping.helper !== null) AppState.root.remove(AppState.clipping.helper);
- AppState.root.add(helper);
- AppState.clipping.helper = helper;
- console.log("I'm clipping, baby!");
- }
+ this.activateClipper();
}
});
}
@@ -285,7 +296,8 @@ Scene.openScene = function(marker) {
mainNode.attachToRoot();
- ATON.setAutoLP(true);
+ ATON.setAutoLP(config.scene.autoLP);
+ AppState.lightProbe = config.scene.autoLP;
Scene.toggleAmbientOcclusion(true);
AppState.ambientOcclusion = true;
diff --git a/js/state.js b/js/state.js
index 549f16f..1ad882c 100644
--- a/js/state.js
+++ b/js/state.js
@@ -9,6 +9,7 @@ export const AppState = {
],
ambientOcclusion : true,
shadows : true,
+ lightProbe : false,
map : null,
clipping : {
enabled: false,