Virtual Restaurant in the Pandemic
Javascript - This function is called when an item with class clickable is clicked. An event is bound which looks for the door id and toggles the position/rotation of a given door.
toggleOpen(el, newOpen, '0 0 0', '0 -90 0', '4 0 4', '0 0 0')
...
function toggleOpen(el, isOpen, positionClosed, rotationClosed, positionOpen, rotationOpen) {
if (isOpen) {
el.setAttribute('position', positionOpen);
el.setAttribute('rotation', rotationOpen);
} else {
el.setAttribute('position', positionClosed);
el.setAttribute('rotation', rotationClosed);
}
}HTML - Sound and click toggle attributes
<a-entity gltf-model="#door" door id="door1" sound="src: #doorSound; on: click" class="clickable" isOpen="false"></a-entity>
Cones are set up during covid mode to block access to seating and promote social distancing. These can be toggled with the yellow button by the registers.
Javascript - Get all Covid elements and toggle visibility
Array.from(document.getElementsByClassName('covid')).forEach(covidItem => {
covidItem.setAttribute('visible', !(covidItem.getAttribute('visible')))
});HTML - Example Covid object
<a-entity gltf-model="#cone" id="cone" class="covid" visible="false"></a-entity>
Javascript - Given the light's current intensity, it is cycled through lightArr and wraps to the start of the array when accessing an out of index value.
const lightArr = ['0.2', '0.4', '0.6', '0.8', '1']
...
let light = document.getElementById('light');
let newLightIndex = lightArr.indexOf(light.getAttribute('intensity')) + 1;
light.setAttribute('intensity', lightArr[(newLightIndex % lightArr.length + lightArr.length) % lightArr.length])HTML - A simple a-light with a default intensity is required.
<a-light id="light" type="hemisphere" intensity="0.6" position="0 2 0"></a-light>
-
17, 18, 19, 20 - Various Tables
Aframe Docs Angular Docs Blender Manual
This project was generated with Angular CLI version 8.3.17.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project.
Run ng run build-prod to build locally to /dist/. This is used for deployment with Angular GitHub Pages
Run ng run deploy deploy the /dist/ directory to GitHub.