Refactor into proper modules
This commit is contained in:
211
js/scene.js
211
js/scene.js
@@ -2,17 +2,13 @@
|
||||
|
||||
import AppState from "./state.js";
|
||||
import { config } from "../config.js";
|
||||
import UI from "./ui.js";
|
||||
|
||||
const Scene = {};
|
||||
|
||||
Scene.UI = UI;
|
||||
import { toggleAmbientOcclusion } from "./utils/environment.js";
|
||||
|
||||
/**
|
||||
* @todo Experimental...
|
||||
* @param {THREE.Object3D} object - A THREE Object3D instance
|
||||
*/
|
||||
Scene.showEdges = function(object) {
|
||||
function showEdges (object) {
|
||||
const edgeMaterial = new THREE.LineBasicMaterial( { color: 0x000000 } );
|
||||
|
||||
object.traverse(function(child) {
|
||||
@@ -27,169 +23,7 @@ Scene.showEdges = function(object) {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate bounding box for the scene root object
|
||||
* and return it along with its center and size (bad?).
|
||||
* It only uses meshes to prevent "empty" nodes in the scene
|
||||
* from being included in the calculation.
|
||||
* @todo Use ATON.Node.getBound()? [bounding sphere]
|
||||
*/
|
||||
Scene.getRootBoundingBox = function() {
|
||||
const meshes = [];
|
||||
AppState.root.traverse(obj => {
|
||||
if (obj.isMesh) meshes.push(obj);
|
||||
});
|
||||
|
||||
if (meshes.length === 0) return null;
|
||||
|
||||
const bbox = new THREE.Box3().setFromObject(meshes[0]);
|
||||
for (let i = 1; i < meshes.length; i++) {
|
||||
bbox.union(new THREE.Box3().setFromObject(meshes[i]));
|
||||
}
|
||||
|
||||
const center = bbox.getCenter(new THREE.Vector3());
|
||||
const size = bbox.getSize(new THREE.Vector3());
|
||||
|
||||
return { bbox, center, size };
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {THREE.Sphere} boundingSphere - The bounding sphere for the main node
|
||||
* @returns {THREE.Mesh}
|
||||
*/
|
||||
Scene.createClippingPlaneMesh = function (boundingSphere) {
|
||||
const planeSize = boundingSphere.radius * 1.5;
|
||||
const mesh = new THREE.Mesh(
|
||||
new THREE.PlaneGeometry(planeSize, planeSize),
|
||||
new THREE.MeshBasicMaterial({ color: 0xffff00, opacity: 0.05, side: THREE.DoubleSide, transparent: true })
|
||||
);
|
||||
|
||||
return mesh;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {THREE.Mesh} planeMesh
|
||||
* @param {THREE.ArrowHelper} arrowHelper
|
||||
* @param {String} axis
|
||||
*/
|
||||
Scene.dragClipper = function(planeMesh, axis) {
|
||||
const controls = new THREE.DragControls(
|
||||
[planeMesh],
|
||||
ATON.Nav._camera,
|
||||
ATON._renderer.domElement,
|
||||
);
|
||||
|
||||
const startPosition = new THREE.Vector3();
|
||||
// Only move along the selected axis (exlude the others)
|
||||
const excludedAxes = ['x', 'y', 'z'].filter(a => a != axis);
|
||||
|
||||
if (AppState.clipping.enabled && AppState.clipping.vector) {
|
||||
controls.addEventListener('dragstart', function (event) {
|
||||
startPosition.copy(event.object.position);
|
||||
ATON.Nav.setUserControl(false);
|
||||
});
|
||||
|
||||
controls.addEventListener('drag', function(event) {
|
||||
const point = event.object.position;
|
||||
Scene.updateClipper(AppState.clipping.vector, point);
|
||||
for (const a of excludedAxes) {
|
||||
event.object.position[a] = startPosition[a];
|
||||
}
|
||||
});
|
||||
|
||||
controls.addEventListener('dragend', function (event) {
|
||||
ATON.Nav.setUserControl(true);
|
||||
});
|
||||
|
||||
AppState.clipping.controls = controls;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {String} axis - The axis along which 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();
|
||||
const bound = AppState.clipping.boundingSphere;
|
||||
|
||||
if (!bound) return;
|
||||
|
||||
const vector = [
|
||||
axis === 'x' ? orientation : 0,
|
||||
axis === 'y' ? orientation : 0,
|
||||
axis === 'z' ? orientation : 0,
|
||||
];
|
||||
|
||||
AppState.clipping.vector = vector;
|
||||
|
||||
// First, add a default clipping plane
|
||||
// at a default point (calculated...)
|
||||
const defaultPoint = bound.center.clone();
|
||||
Scene.activateClipper(vector, axis, defaultPoint);
|
||||
}
|
||||
|
||||
/**
|
||||
* @todo WIP!
|
||||
* Activate clipping plane
|
||||
* @param {Number[]} vector - The vector array to direct the plane
|
||||
* @param {String} axis - The x,y,z axis
|
||||
* @param {?THREE.Vector3} point - The queried scene point
|
||||
*/
|
||||
Scene.activateClipper = function(vector, axis, point = null) {
|
||||
ATON.enableClipPlanes();
|
||||
Scene.updateClipper(vector, point);
|
||||
Scene.dragClipper(AppState.clipping.helper, axis);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {THREE.Vector3} vector
|
||||
* @param {THREE.Vector3} point
|
||||
*/
|
||||
Scene.updateClipper = function(vector, point) {
|
||||
// Useless guard...
|
||||
if (vector) {
|
||||
// Normal of the clipping plane along the axis facing down
|
||||
const normal = new THREE.Vector3(...vector).normalize();
|
||||
const plane = AppState.clipping.plane ?? ATON.addClipPlane(normal, point);
|
||||
// Add a visible plane helper for the clipping plane
|
||||
const visiblePlane = AppState.clipping.helper ?? Scene.createClippingPlaneMesh(AppState.clipping.boundingSphere);
|
||||
|
||||
if (!AppState.clipping.helper) {
|
||||
AppState.root.add(visiblePlane);
|
||||
AppState.clipping.helper = visiblePlane;
|
||||
}
|
||||
|
||||
visiblePlane.position.copy(point);
|
||||
visiblePlane.lookAt(point.clone().add(normal));
|
||||
|
||||
plane.setFromNormalAndCoplanarPoint(normal, point);
|
||||
AppState.clipping.plane = plane;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {THREE.Vector3} vector - An object with x,y,z coordinates
|
||||
*/
|
||||
Scene.changeLightDirection = function(vector) {
|
||||
ATON.setMainLightDirection(vector);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {Boolean} isEnabled
|
||||
*/
|
||||
Scene.toggleAmbientOcclusion = function(isEnabled) {
|
||||
ATON.FX.togglePass(ATON.FX.PASS_AO, isEnabled);
|
||||
console.log('Ambient occlusion', isEnabled ? 'ON' : 'OFF');
|
||||
}
|
||||
|
||||
Scene.init = function() {
|
||||
function init () {
|
||||
ATON.realize();
|
||||
ATON.UI.addBasicEvents();
|
||||
ATON.UI.init();
|
||||
@@ -200,49 +34,22 @@ Scene.init = function() {
|
||||
ATON.toggleShadows(true);
|
||||
ATON.setExposure(config.scene.initialExposure);
|
||||
// Open settings side panel when clicking on settings btn
|
||||
Scene.UI.toggleSettingsPanel('settings');
|
||||
Scene.UI.toggleContentMenu('menu');
|
||||
|
||||
AppState.camera = ATON.Nav._camera;
|
||||
AppState.renderer = ATON._renderer;
|
||||
|
||||
ATON.Nav.setUserControl(true);
|
||||
}
|
||||
/**
|
||||
* Reset clipping state after disabling from UI
|
||||
* @todo DragControls errors!!
|
||||
*/
|
||||
Scene.resetClipping = function () {
|
||||
AppState.clipping.enabled = false;
|
||||
ATON.disableClipPlanes();
|
||||
AppState.clipping.controls.deactivate();
|
||||
// Manually remove event listeners from DragControls!!
|
||||
AppState.renderer.domElement.removeEventListener( 'pointermove', AppState.clipping.controls.onPointerMove );
|
||||
AppState.renderer.domElement.removeEventListener( 'pointerdown', AppState.clipping.controls.onPointerDown );
|
||||
AppState.renderer.domElement.removeEventListener( 'pointerup', AppState.clipping.controls.onPointerCancel );
|
||||
AppState.renderer.domElement.removeEventListener( 'pointerleave', AppState.clipping.controls.onPointerCancel )
|
||||
AppState.clipping.controls = null;
|
||||
AppState.clipping.helper.removeFromParent();
|
||||
AppState.root.remove(AppState.clipping.helper);
|
||||
AppState.clipping.helper = null;
|
||||
AppState.clipping.plane = null;
|
||||
AppState.clipping.vector = null;
|
||||
// Ensure nav controls are reactivated!
|
||||
ATON.Nav.setUserControl(true);
|
||||
}
|
||||
/**
|
||||
* @param {Object} marker - The marker object from config
|
||||
* @param {Object[]} nodes - The flat list of nodes for this scene
|
||||
*/
|
||||
Scene.openScene = function(marker, nodes) {
|
||||
Scene.init();
|
||||
// TODO: move to init logic
|
||||
Scene.UI.toggleClipperBar('#clipper', '#clipper-bar');
|
||||
|
||||
export function openScene (marker, nodes) {
|
||||
init();
|
||||
// Filter nodes with models first
|
||||
nodes = nodes.filter(n => n.model);
|
||||
// Load 3D models and create nodes
|
||||
Scene.loadNodes(nodes);
|
||||
loadNodes(nodes);
|
||||
|
||||
ATON.setMainPanorama(marker.pano);
|
||||
// TODO: hardcoded...
|
||||
@@ -250,7 +57,7 @@ Scene.openScene = function(marker, nodes) {
|
||||
|
||||
ATON.setAutoLP(config.scene.autoLP);
|
||||
AppState.lightProbe = config.scene.autoLP;
|
||||
Scene.toggleAmbientOcclusion(true);
|
||||
toggleAmbientOcclusion(true);
|
||||
AppState.ambientOcclusion = true;
|
||||
AppState.root = ATON.getRootScene();
|
||||
}
|
||||
@@ -259,7 +66,7 @@ Scene.openScene = function(marker, nodes) {
|
||||
*
|
||||
* @param {Object[]} nodes
|
||||
*/
|
||||
Scene.loadNodes = function (nodes) {
|
||||
function loadNodes(nodes) {
|
||||
nodes.forEach(n => {
|
||||
let node = ATON.createSceneNode(n.label);
|
||||
node.load(n.model);
|
||||
@@ -289,5 +96,3 @@ Scene.loadNodes = function (nodes) {
|
||||
AppState.nodes.push({id: n.label, active: true});
|
||||
});
|
||||
}
|
||||
|
||||
export default Scene;
|
||||
63
js/ui.js
63
js/ui.js
@@ -1,14 +1,14 @@
|
||||
import { config } from "../config.js";
|
||||
import Scene from "./scene.js";
|
||||
import AppState from "./state.js";
|
||||
import { changeLightDirection, toggleAmbientOcclusion } from "./utils/environment.js";
|
||||
import { resetClipping, addClippingPlane } from "./utils/clipping.js";
|
||||
|
||||
/**
|
||||
* @namespace UI
|
||||
* @module UI
|
||||
*/
|
||||
const UI = {};
|
||||
|
||||
UI.domParser = new DOMParser;
|
||||
const domParser = new DOMParser;
|
||||
|
||||
UI.contentMenuTabs = `
|
||||
const contentMenuTabs = `
|
||||
<!-- Nav tabs -->
|
||||
<ul class="nav nav-pills" id="content-tabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
@@ -30,7 +30,7 @@ UI.contentMenuTabs = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
UI.audioExample = `
|
||||
const audioExample = `
|
||||
<button type="button" id="audio-example" class="text-left btn aton-btn fs-6 mx-2" data-bs-toggle="modal" data-bs-target="#audio1">
|
||||
<i class="bi bi-play-btn me-2"></i> Esempio audio (<em>Che fiero costume</em>)
|
||||
</button>
|
||||
@@ -40,7 +40,7 @@ UI.audioExample = `
|
||||
*
|
||||
* @param {String} triggerSelector - Usually, the close modal trigger element(s) selector
|
||||
*/
|
||||
UI.pauseAudio = function(triggerSelector) {
|
||||
export function pauseAudio(triggerSelector) {
|
||||
// What if more than one audio element is playing?
|
||||
const audio = document.querySelector('audio');
|
||||
|
||||
@@ -57,7 +57,7 @@ UI.pauseAudio = function(triggerSelector) {
|
||||
* Resets the UI state (essentially hides the clipper toolbar if visible...)
|
||||
* @todo Other elements to reset?? Restore inital lighting conditions and viewpoint...
|
||||
*/
|
||||
UI.reset = function() {
|
||||
function reset() {
|
||||
document.querySelector('#clipper-bar')?.classList.add('d-none');
|
||||
document.querySelector('#clipper')?.classList.remove('border', 'border-2', 'border-white');
|
||||
}
|
||||
@@ -68,9 +68,9 @@ UI.reset = function() {
|
||||
* @param {NodeListOf<HTMLButtonElement>} btns
|
||||
* @param {String} axis - One of 'x', 'y', 'z'
|
||||
*/
|
||||
UI.showClipping = function(target, btns, axis) {
|
||||
function showClipping(target, btns, axis) {
|
||||
if (axis) {
|
||||
Scene.addClippingPlane(axis, -1);
|
||||
addClippingPlane(axis, -1);
|
||||
target.classList.add('border', 'border-2', 'border-warning');
|
||||
btns.forEach(btn => {
|
||||
if (btn.id !== target.id) {
|
||||
@@ -84,7 +84,7 @@ UI.showClipping = function(target, btns, axis) {
|
||||
* @param {String} triggerSelector
|
||||
* @param {String} targetSelector The selector for the target toolbar to be displayed
|
||||
*/
|
||||
UI.toggleClipperBar = function(triggerSelector, targetSelector) {
|
||||
function toggleClipperBar(triggerSelector, targetSelector) {
|
||||
const trigger = document.querySelector(triggerSelector);
|
||||
const toolbar = document.querySelector(targetSelector);
|
||||
const btns = toolbar.querySelectorAll('button');
|
||||
@@ -103,7 +103,7 @@ UI.toggleClipperBar = function(triggerSelector, targetSelector) {
|
||||
|
||||
if (!toolbar.classList.contains('d-none')) {
|
||||
AppState.clipping.enabled = true;
|
||||
Scene.toggleAmbientOcclusion(false);
|
||||
toggleAmbientOcclusion(false);
|
||||
|
||||
btns.forEach(btn => {
|
||||
btn.classList.remove('border', 'border-2', 'border-warning');
|
||||
@@ -111,13 +111,13 @@ UI.toggleClipperBar = function(triggerSelector, targetSelector) {
|
||||
|
||||
trigger.className += ' border border-2 border-white';
|
||||
toolbar.addEventListener('click', event => {
|
||||
UI.showClipping(event.target, btns, clipTargets[event.target.id]?.axis);
|
||||
showClipping(event.target, btns, clipTargets[event.target.id]?.axis);
|
||||
});
|
||||
} else {
|
||||
Scene.resetClipping();
|
||||
resetClipping();
|
||||
let noBorder = trigger.className.replace(/ border.*$/g, '');
|
||||
trigger.className = noBorder;
|
||||
Scene.toggleAmbientOcclusion(aoCurrentState);
|
||||
toggleAmbientOcclusion(aoCurrentState);
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -128,7 +128,7 @@ UI.toggleClipperBar = function(triggerSelector, targetSelector) {
|
||||
* A left side settings panel
|
||||
* @param {String} triggerId - The settings button id
|
||||
*/
|
||||
UI.toggleSettingsPanel = function(triggerId) {
|
||||
function toggleSettingsPanel(triggerId) {
|
||||
const btn = document.querySelector(`#${triggerId}`);
|
||||
const lightHeading = document.createElement('h2');
|
||||
lightHeading.className = 'fs-5 ms-2 mb-3 mt-3';
|
||||
@@ -142,9 +142,9 @@ UI.toggleSettingsPanel = function(triggerId) {
|
||||
ATON.UI.showSidePanel({header: '<i class="bi bi-gear-fill me-1"></i> Impostazioni'});
|
||||
ATON.UI.elSidePanel.appendChild(lightHeading);
|
||||
|
||||
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);
|
||||
const lightSliderX = createLightSlider('x', 'Asse X', [-2, 2], 0.1);
|
||||
const lightSliderY = createLightSlider('y', 'Asse Y', [-2, 2], 0.1);
|
||||
const lightSliderZ = createLightSlider('z', 'Asse Z', [-2, 2], 0.1);
|
||||
|
||||
ATON.UI.elSidePanel.appendChild(lightSliderX);
|
||||
ATON.UI.elSidePanel.appendChild(lightSliderY);
|
||||
@@ -176,7 +176,7 @@ UI.toggleSettingsPanel = function(triggerId) {
|
||||
document.querySelector('#aoSwitch').addEventListener(
|
||||
'change',
|
||||
event => {
|
||||
Scene.toggleAmbientOcclusion(event.target.checked);
|
||||
toggleAmbientOcclusion(event.target.checked);
|
||||
AppState.ambientOcclusion = event.target.checked;
|
||||
}
|
||||
);
|
||||
@@ -197,7 +197,7 @@ UI.toggleSettingsPanel = function(triggerId) {
|
||||
* @param {Number[]} range - The slider's range
|
||||
* @param {Number} step - The slider's step
|
||||
*/
|
||||
UI.createLightSlider = function(direction, label, range, step) {
|
||||
function createLightSlider(direction, label, range, step) {
|
||||
const currentVal = ATON.getMainLightDirection()[direction];
|
||||
const lightSlider = ATON.UI.createSlider({
|
||||
range,
|
||||
@@ -207,7 +207,7 @@ UI.createLightSlider = function(direction, label, range, step) {
|
||||
const lightDir = ATON.getMainLightDirection();
|
||||
// Keep existing direction values for the other axes
|
||||
lightDir[direction] = Number.parseFloat(val);
|
||||
Scene.changeLightDirection(lightDir);
|
||||
changeLightDirection(lightDir);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -220,17 +220,17 @@ UI.createLightSlider = function(direction, label, range, step) {
|
||||
* Right-side main menu panel
|
||||
* @param {String} triggerId - The menu button id
|
||||
*/
|
||||
UI.toggleContentMenu = function(triggerId) {
|
||||
function toggleContentMenu(triggerId) {
|
||||
const btn = document.querySelector(`#${triggerId}`);
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
ATON.UI.setSidePanelRight();
|
||||
ATON.UI.showSidePanel({header: 'Menu'});
|
||||
// Append tabs, then tab panes
|
||||
const tabs = this.domParser.parseFromString(UI.contentMenuTabs, 'text/html');
|
||||
const tabs = domParser.parseFromString(contentMenuTabs, 'text/html');
|
||||
ATON.UI.elSidePanel.appendChild(tabs.querySelector('#content-tabs'));
|
||||
ATON.UI.elSidePanel.appendChild(tabs.querySelector('.tab-content'));
|
||||
this.buildLayersMenu(AppState.normalizedNodes, ATON.UI.elSidePanel.querySelector('#layer'));
|
||||
buildLayersMenu(AppState.normalizedNodes, ATON.UI.elSidePanel.querySelector('#layer'));
|
||||
});
|
||||
}
|
||||
/**
|
||||
@@ -238,7 +238,7 @@ UI.toggleContentMenu = function(triggerId) {
|
||||
* @param {Array} nodes The scenes nodes (IDs and status)
|
||||
* @param {HTMLElement} sidePanel ATON's side panel element
|
||||
*/
|
||||
UI.buildLayersMenu = function(nodes, sidePanel) {
|
||||
function buildLayersMenu(nodes, sidePanel) {
|
||||
for(let node of nodes) {
|
||||
const menuItem = document.createElement('div');
|
||||
menuItem.className = `form-check form-switch ms-${node.depth} ps-${node.depth} mt-2`;
|
||||
@@ -273,4 +273,11 @@ UI.buildLayersMenu = function(nodes, sidePanel) {
|
||||
}
|
||||
}
|
||||
|
||||
export default UI;
|
||||
/**
|
||||
* Initialize required components for scene UI
|
||||
*/
|
||||
export function initUI() {
|
||||
toggleSettingsPanel('settings');
|
||||
toggleContentMenu('menu');
|
||||
toggleClipperBar('#clipper', '#clipper-bar');
|
||||
}
|
||||
144
js/utils/clipping.js
Normal file
144
js/utils/clipping.js
Normal file
@@ -0,0 +1,144 @@
|
||||
// Global ATON and THREE
|
||||
|
||||
import AppState from "../state.js";
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {THREE.Sphere} boundingSphere - The bounding sphere for the main node
|
||||
* @returns {THREE.Mesh}
|
||||
*/
|
||||
function createClippingPlaneMesh (boundingSphere) {
|
||||
const planeSize = boundingSphere.radius * 1.5;
|
||||
const mesh = new THREE.Mesh(
|
||||
new THREE.PlaneGeometry(planeSize, planeSize),
|
||||
new THREE.MeshBasicMaterial({ color: 0xffff00, opacity: 0.05, side: THREE.DoubleSide, transparent: true })
|
||||
);
|
||||
|
||||
return mesh;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {THREE.Mesh} planeMesh
|
||||
* @param {THREE.ArrowHelper} arrowHelper
|
||||
* @param {String} axis
|
||||
*/
|
||||
function dragClipper (planeMesh, axis) {
|
||||
const controls = new THREE.DragControls(
|
||||
[planeMesh],
|
||||
ATON.Nav._camera,
|
||||
ATON._renderer.domElement,
|
||||
);
|
||||
|
||||
const startPosition = new THREE.Vector3();
|
||||
// Only move along the selected axis (exlude the others)
|
||||
const excludedAxes = ['x', 'y', 'z'].filter(a => a != axis);
|
||||
|
||||
if (AppState.clipping.enabled && AppState.clipping.vector) {
|
||||
controls.addEventListener('dragstart', function (event) {
|
||||
startPosition.copy(event.object.position);
|
||||
ATON.Nav.setUserControl(false);
|
||||
});
|
||||
|
||||
controls.addEventListener('drag', function(event) {
|
||||
const point = event.object.position;
|
||||
updateClipper(AppState.clipping.vector, point);
|
||||
for (const a of excludedAxes) {
|
||||
event.object.position[a] = startPosition[a];
|
||||
}
|
||||
});
|
||||
|
||||
controls.addEventListener('dragend', function (event) {
|
||||
ATON.Nav.setUserControl(true);
|
||||
});
|
||||
|
||||
AppState.clipping.controls = controls;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {String} axis - The axis along which the plane's normal should be directed,
|
||||
* one of 'x', 'y', 'z'
|
||||
* @param {Number} orientation - Positive (1) or negative (-1) orientation on the axis
|
||||
*/
|
||||
export function addClippingPlane (axis, orientation = -1) {
|
||||
axis = axis.toLowerCase();
|
||||
const bound = AppState.clipping.boundingSphere;
|
||||
|
||||
if (!bound) return;
|
||||
|
||||
const vector = [
|
||||
axis === 'x' ? orientation : 0,
|
||||
axis === 'y' ? orientation : 0,
|
||||
axis === 'z' ? orientation : 0,
|
||||
];
|
||||
|
||||
AppState.clipping.vector = vector;
|
||||
|
||||
// First, add a default clipping plane
|
||||
// at a default point (calculated...)
|
||||
const defaultPoint = bound.center.clone();
|
||||
activateClipper(vector, axis, defaultPoint);
|
||||
}
|
||||
|
||||
/**
|
||||
* @todo WIP!
|
||||
* Activate clipping plane
|
||||
* @param {Number[]} vector - The vector array to direct the plane
|
||||
* @param {String} axis - The x,y,z axis
|
||||
* @param {?THREE.Vector3} point - The queried scene point
|
||||
*/
|
||||
function activateClipper (vector, axis, point = null) {
|
||||
ATON.enableClipPlanes();
|
||||
updateClipper(vector, point);
|
||||
dragClipper(AppState.clipping.helper, axis);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {THREE.Vector3} vector
|
||||
* @param {THREE.Vector3} point
|
||||
*/
|
||||
function updateClipper (vector, point) {
|
||||
// Useless guard...
|
||||
if (vector) {
|
||||
// Normal of the clipping plane along the axis facing down
|
||||
const normal = new THREE.Vector3(...vector).normalize();
|
||||
const plane = AppState.clipping.plane ?? ATON.addClipPlane(normal, point);
|
||||
// Add a visible plane helper for the clipping plane
|
||||
const visiblePlane = AppState.clipping.helper ?? createClippingPlaneMesh(AppState.clipping.boundingSphere);
|
||||
|
||||
if (!AppState.clipping.helper) {
|
||||
AppState.root.add(visiblePlane);
|
||||
AppState.clipping.helper = visiblePlane;
|
||||
}
|
||||
|
||||
visiblePlane.position.copy(point);
|
||||
visiblePlane.lookAt(point.clone().add(normal));
|
||||
|
||||
plane.setFromNormalAndCoplanarPoint(normal, point);
|
||||
AppState.clipping.plane = plane;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Reset clipping state after disabling from UI
|
||||
* @todo DragControls errors!!
|
||||
*/
|
||||
export function resetClipping () {
|
||||
AppState.clipping.enabled = false;
|
||||
ATON.disableClipPlanes();
|
||||
AppState.clipping.controls.deactivate();
|
||||
// Manually remove event listeners from DragControls!!
|
||||
AppState.renderer.domElement.removeEventListener( 'pointermove', AppState.clipping.controls.onPointerMove );
|
||||
AppState.renderer.domElement.removeEventListener( 'pointerdown', AppState.clipping.controls.onPointerDown );
|
||||
AppState.renderer.domElement.removeEventListener( 'pointerup', AppState.clipping.controls.onPointerCancel );
|
||||
AppState.renderer.domElement.removeEventListener( 'pointerleave', AppState.clipping.controls.onPointerCancel )
|
||||
AppState.clipping.controls = null;
|
||||
AppState.clipping.helper.removeFromParent();
|
||||
AppState.root.remove(AppState.clipping.helper);
|
||||
AppState.clipping.helper = null;
|
||||
AppState.clipping.plane = null;
|
||||
AppState.clipping.vector = null;
|
||||
// Ensure nav controls are reactivated!
|
||||
ATON.Nav.setUserControl(true);
|
||||
}
|
||||
18
js/utils/environment.js
Normal file
18
js/utils/environment.js
Normal file
@@ -0,0 +1,18 @@
|
||||
// Global ATON
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {THREE.Vector3} vector - An object with x,y,z coordinates
|
||||
*/
|
||||
export function changeLightDirection (vector) {
|
||||
ATON.setMainLightDirection(vector);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {Boolean} isEnabled
|
||||
*/
|
||||
export function toggleAmbientOcclusion (isEnabled) {
|
||||
ATON.FX.togglePass(ATON.FX.PASS_AO, isEnabled);
|
||||
console.log('Ambient occlusion', isEnabled ? 'ON' : 'OFF');
|
||||
}
|
||||
@@ -1,12 +1,14 @@
|
||||
import Scene from "../../js/scene.js";
|
||||
import { openScene } from "../../js/scene.js";
|
||||
import { config } from "../../config.js";
|
||||
import AppState from "../../js/state.js";
|
||||
import { normalizeNodes } from "../../js/utils/nodeUtils.js";
|
||||
import { initUI, pauseAudio } from "../../js/ui.js";
|
||||
|
||||
AppState.currentScene = 'salvador';
|
||||
AppState.sceneHasAudio = true;
|
||||
const marker = config.markers.find(m => m.id === 'salvador');
|
||||
AppState.normalizedNodes = normalizeNodes(marker.nodes);
|
||||
Scene.openScene(marker, AppState.normalizedNodes);
|
||||
|
||||
Scene.UI.pauseAudio('[data-bs-dismiss="modal"]');
|
||||
openScene(marker, AppState.normalizedNodes);
|
||||
initUI();
|
||||
pauseAudio('[data-bs-dismiss="modal"]');
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
import Scene from "../../js/scene.js";
|
||||
import { openScene } from "../../js/scene.js";
|
||||
import { config } from "../../config.js";
|
||||
import AppState from "../../js/state.js";
|
||||
import { normalizeNodes } from "../../js/utils/nodeUtils.js";
|
||||
import { initUI } from "../../js/ui.js";
|
||||
|
||||
AppState.currentScene = 'ssgp';
|
||||
const marker = config.markers.find(m => m.id === 'ssgp');
|
||||
AppState.normalizedNodes = normalizeNodes(marker.nodes);
|
||||
Scene.openScene(marker, AppState.normalizedNodes);
|
||||
|
||||
openScene(marker, AppState.normalizedNodes);
|
||||
initUI();
|
||||
|
||||
Reference in New Issue
Block a user