Creé una escena usando A-frame ( https://aframe.io ) y actualmente tengo algo de lluvia en mi escena y un botón. Lo que me gustaría hacer es cuando se hace clic en el botón, se produce una función, me pregunto cómo puedo hacer que esta función elimine el componente de rain de la escena. Código:
<head> <script src="https://cdn.rawgit.com/aframevr/aframe/v0.4.0/dist/aframe-master.min.js"></script> <script src="https://rawgit.com/takahirox/aframe-rain/master/build/aframe-rain.min.js"></script> </head> <body> <button onclick="toggleRain()"> Toggle rain </button> <a-scene rain> <a-entity position="0 0 10"> <a-camera></a-camera> </a-entity> <a-entity geometry="primitive:sphere"></a-entity> <a-sky color="#222"></a-sky> <a-entity light="type:directional;color:#666" position="-10 -10 -10"></a-entity> </a-scene> </body> Lo que me gustaría que sucediera es que cuando se activa la función toggleRain() , el
<a-scene rain> parte del código cambiará y eliminará la parte de lluvia para que solo haya
<a-scene> Esto debería evitar que la lluvia caiga cuando se hace clic en el botón. Solo para aclarar, cuando se activa la función, debería rain la propiedad de <a-scene rain> dejando solo
<a-scene>¿Cómo se puede hacer esto? Enlace al código que contiene violín: https://jsfiddle.net/AidanYoung/z7qstgua/2/
Podrías simplemente usar removeAttribute() para eliminar la rain
function toggleRain() { let a = document.getElementById('a'); if (a.hasAttribute('rain')) { a.removeAttribute('rain'); } else { a.setAttribute('rain', '1'); } console.log ("ok"); } <head> <script src="https://cdn.rawgit.com/aframevr/aframe/v0.4.0/dist/aframe-master.min.js"></script> <script src="https://rawgit.com/takahirox/aframe-rain/master/build/aframe-rain.min.js"></script> </head> <body> <button onclick="toggleRain()"> Toggle rain </button> <a-scene id="a" rain> <a-entity position="0 0 10"> <a-camera></a-camera> </a-entity> <a-entity geometry="primitive:sphere"></a-entity> <a-sky color="#222"></a-sky> <a-entity light="type:directional;color:#666" position="-10 -10 -10"></a-entity> </a-scene> </body>