Estoy tratando de cargar un archivo HTML cuando hago clic en <a-entity> y no funciona con los métodos HTML tradicionales (usando href). Consulte el código a continuación.
<a-scene> <a-assets> <a-asset-item id="mBot" src="../assets/robot1.glb"></a-asset-item> <img id="panorama" src="../assets/stock.jpg" /> </a-assets> <!-- Robot --> <a-entity gltf-model="#mBot" scale="4 4 4" position="0 1 2" id="mBot-1" > <a-animation attribute="rotation" to="0 360 0" repeat="indefinite" > </a-animation> </a-entity> <!-- Robot --> <a-entity gltf-model="#mBot" scale="4 4 4" position="8 1 2" id="mBot-2" > <a-animation attribute="rotation" to="0 -360 0 " repeat="indefinite"> </a-animation> </a-entity> <a-entity position="4 0 8"> <a-camera></a-camera> </a-entity> <a-sky src="#panorama"></a-sky> </a-scene> Quiero cargar dos archivos html separados al hacer clic en entidad id=mBot-1 y mBot-2.
Agradezco mucho cualquier ayuda para resolver esto.
En general, puede agregar un controlador de clics a su elemento.
Sin embargo, no está claro qué quiere decir con "cargar un archivo HTML". ¿Quieres decir seguir un enlace a esa página?
Tampoco especifica cuál es la URL de ese archivo. Aquí hay un ejemplo usando stackoverflow.com como el "archivo HTML"
var entities = document.querySelectorAll('A-ENTITY'); var entity; for (var i = 1; i < entities.length; i++) { entity = entities[i]; entity.addEventListener('click', function() { window.location.href = "https://stackoverflow.com"; }); }El problema se puede resolver haciendo un enlace propio con js.
Cree su propio elemento, que cambiará la ubicación de la ventana al hacer clic:
AFRAME.registerComponent("mylink", { init: function() { this.el.addEventListener("click", (e)=> { window.location = this.data.href; }) } })HTML
<a-text color="black" position="1 1 -2" value="goToSchatzkin" mylink="href: https://schatzkin.com;"></a-text>Código final
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> <script> AFRAME.registerComponent("mylink", { init: function() { this.el.addEventListener("click", (e) => { window.location = this.data.href; }) } }) </script> <a-scene cursor="rayOrigin: mouse"> <a-text color="black" position="1 1.6 -2" value="Click the text" mylink="href: https://schatzkin.com;"></a-text> <a-entity position="-1 1.6 -2" link="highlighted: true; highlightedColor:#000000; backgroundColor: red; href: https://schatzkin.com; titleColor: black; title: click the image below.; image: https://i.imgur.com/wjobVTN.jpg; visualAspectEnabled: true"></a-entity> </a-scene>