Estoy usando un marco A en red para generar una nueva entidad cuando se carga la página. Quiero agregar algunas funcionalidades en esas entidades como pasar el mouse, al hacer clic, etc. Intenté hacer que se pueda hacer clic, pero no funcionó.
function rigClick(){ console.log("Entity Clicked"); } <a-scene> <a-entity id="rig" onclick="rigClick()"> <a-entity id="foo" networked="template:#rig-template;attachTemplateToLocal:false;" camera="active:true;" position="-27 2.5 24" wasd-controls="acceleration:12;" look-controls spawn-in-circle="radius:2" > </a-entity> </a-entity> </a-scene>También intenté usar el componente de registro pero no puedo obtener los resultados.
AFRAME.registerComponent('click-handler', { init: function () { let entity = document.querySelector('#rig') entity.addEventListener('click', (e) => { console.log("You just clicked on entity"); }) } }); <a-scene> <a-entity id="rig"> <a-entity id="foo" networked="template:#rig-template;attachTemplateToLocal:false;" camera="active:true;" position="-27 2.5 24" wasd-controls="acceleration:12;" look-controls spawn-in-circle="radius:2" click-handler > </a-entity> </a-entity>Si desea usar su mouse, necesita un cursor que mapee los clics del mouse en 2D en rayos 3D para verificar qué hay debajo del cursor del mouse:
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script> <script> // declare a component AFRAME.registerComponent("click-detector", { // called upon initialisation init: function() { // when a click is detected this.el.addEventListener("click", () => { // log "clicked" console.log("clicked") }) } }) </script> <a-scene cursor="rayOrigin: mouse" raycaster="objects: a-sphere"> <a-sphere position="0 1.25 -2" radius="1.25" color="#EF2D5E" click-detector></a-sphere> </a-scene> Funciona igual en un marco en red siempre que agregue el componente a la networked-template para que cada nuevo 'jugador' tenga el componente adjunto:
<template id="avatar-template"> <a-entity class="avatar"> <a-sphere class="head" scale="0.45 0.5 0.4" click-detector></a-sphere> </a-entity> </template>