aframe-hotspots/dist/aframe-hotspots.min.js

A-Frame component for interactive VR hotspots with audio and scene transitions

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).aframeHotspots={})}(this,(function(t){"use strict";const e={tick:function(){const t=document.querySelector("[camera]").object3D;this.el.object3D.lookAt(t.position)}},o={init:function(){this.el.addEventListener("reloadspots",(function(t){document.getElementById(t.detail.currspots).setAttribute("visible","false");var e=document.getElementById(t.detail.newspots);e.setAttribute("visible","true"),console.log("Hotspots reloaded from",t.detail.currspots,"to",t.detail.newspots),console.log("New hotspot group visibility:",t.detail.newspots,e.getAttribute("visible"))}))}},n={schema:{linkto:{type:"string",default:""},spotgroup:{type:"string",default:""},label:{type:"string",default:""},audio:{type:"string",default:""},labelBackground:{type:"color",default:"#333333"},labelPadding:{type:"number",default:.2},lineHeight:{type:"number",default:.4}},init:function(){this.el.setAttribute("src","#hotspot"),this.el.setAttribute("look-at","#cam");var t=this.data,e=this.el;if(console.log("Initializing hotspot with label:",t.label),""!==t.label){const o=document.createElement("a-entity");o.setAttribute("position","0 -0.6 0");const n=document.createElement("a-plane");n.setAttribute("color",t.labelBackground),n.setAttribute("opacity",.8),n.setAttribute("width",.15*t.label.length+t.labelPadding),n.setAttribute("height",.3),n.setAttribute("position","0 0 -0.01");const l=document.createElement("a-text");l.setAttribute("value",t.label),l.setAttribute("align","center"),l.setAttribute("color","#FFFFFF"),l.setAttribute("position","0 0 0"),o.appendChild(n),o.appendChild(l),e.appendChild(o)}if(""!==t.audio){var o=document.createElement("a-sound");o.setAttribute("src",t.audio),o.setAttribute("autoplay","false"),o.setAttribute("loop","true"),o.setAttribute("volume","1"),e.appendChild(o),console.log("Audio element added with source:",t.audio),o.addEventListener("sound-loaded",(function(){console.log("Sound loaded -force stop playing:",t.label),o.components.sound.stopSound(),n.setAttribute("text","value: Play; align: center; color: #FFF"),l=!0}));var n=document.createElement("a-plane");n.setAttribute("color","#ff0000"),n.setAttribute("width","0.5"),n.setAttribute("height","0.3"),n.setAttribute("position","0 -1 0"),n.setAttribute("text","value: Play; align: center; color: #FFF"),e.appendChild(n),console.log("Play/Pause button added for hotspot:",t.label);var l=!1;o.addEventListener("sound-loaded",(function(){console.log("Sound loaded for hotspot:",t.label),l=!0}));var i=function(){o.components.sound.isPlaying?(o.components.sound.stopSound(),n.setAttribute("text","value: Play; align: center; color: #FFF"),console.log("Audio paused for hotspot:",t.label)):(o.components.sound.playSound(),n.setAttribute("text","value: Pause; align: center; color: #FFF"),console.log("Audio playing for hotspot:",t.label))};n.addEventListener("click",(function(e){if(e.stopPropagation(),console.log("Button clicked for hotspot:",t.label),l)i();else{console.log("Waiting for audio to load...");var n=function(){o.removeEventListener("sound-loaded",n),i()};o.addEventListener("sound-loaded",n)}}))}e.addEventListener("click",(function(o){var n=e.querySelector("a-sound");if(n&&n.components&&n.components.sound&&n.components.sound.isPlaying){n.components.sound.stopSound();var l=e.querySelector("a-plane");l&&l.setAttribute("text","value: Play; align: center; color: #FFF"),console.log("Audio reset on hotspot:",t.label)}document.getElementById("skybox").setAttribute("src",t.linkto),console.log("Skybox changed to:",t.linkto);var i=document.getElementById("spots"),s=e.parentElement.getAttribute("id");i.emit("reloadspots",{newspots:t.spotgroup,currspots:s})}))}};"undefined"!=typeof window&&window.AFRAME&&(window.AFRAME.registerComponent("face-camera",e),window.AFRAME.registerComponent("hotspots",o),window.AFRAME.registerComponent("spot",n)),t.FaceCameraComponent=e,t.HotspotsComponent=o,t.SpotComponent=n}));