Estoy trabajando en un proyecto en el que quiero reutilizar este ejemplo https://aframe.io/aframe/examples/showcase/model-viewer/
todo lo que quiero agregar es un activador que inicie la animación al hacer clic en el evento.
Logré implementar esto para que se ejecute en mi servidor https://github.com/aframevr/aframe/tree/master/examples/showcase/model-viewer
pero ahora lucha por codificar el controlador de eventos.
en model-viewer.js puedo ver una línea que activa la animación al principio
modelEl.setAttribute('animation-mixer', '');Parece que no puedo averiguar cómo reproducirlo con un clic. He hecho esta implementación antes en una configuración más simple ( https://codepen.io/wspluta/pen/rNwReNB )
<script> AFRAME.registerComponent('animationhandler', { init: function() { let playing = false; this.el.addEventListener('click', () => { if (!playing) { this.el.setAttribute('animation-mixer', 'clip:*; loop: once; clampWhenFinished: true; duration : 6'); playing=true; } else { this.el.removeAttribute('animation-mixer'); playing=false; } }); } }) </script> <body> <a-scene> <a-assets> <a-asset id="sky" src="https://raw.githubusercontent.com/WSPluta/webxr102/main/tatooine.jpg"> </a-asset> <a-asset-item id="tie" src="https://raw.githubusercontent.com/WSPluta/webxr102/main/newTie.gltf"></a-asset-item> </a-assets> <a-entity id="tie" gltf-model="#tie" position="0 0.5 -5" scale="0.25 0.25 0.25" animationhandler></a-entity> <a-plane id="background" position="0 5 -15" height="9" width="16" rotation="0 0 0" opacity="0.9"></a-plane> <a-sky src="#sky"></a-sky> <a-camera> <a-cursor color="yellow"></a-cursor> </a-camera> </a-scene> </body>pero no puedo averiguar cómo modificar el documento de ejemplo/exhibición para implementarlo. Tengo muchas ganas de reutilizar el movimiento de la cámara y todas las cosas buenas que vienen del archivo de muestra/ejemplo.
Quería reproducir una animación y usé este código con react/nextjs para lograr esta funcionalidad.
const handleAnimate = useCallback( (e) => { const { keyCode } = e const rot = document.getElementById("camOrbit").getAttribute("rotation"); // when w is pressed if (keyCode === 87) { document .getElementById("modAnim") .setAttribute("animation-mixer", `clip: Walk; loop: repeat`); document.getElementById("modAnim").setAttribute("rotation", `0 ${rot.y} 0`); // // // // // document.getElementById("modAnim").setAttribute("position", `${pos.x} 0 ${pos.z}`); document.addEventListener("keyup", (event) => { document .getElementById("modAnim") .setAttribute("animation-mixer", `clip: Idle; loop: repeat`); }); } }, [setAttribute] );