I have set up a virtual environment using A-frame () with some raining effects and a button. What I want to achieve is to have a function executed when the button is clicked, that function should remove the rain component from the scene. Here is the code snippet:
<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>
When the toggleRain() function is triggered, I want the rain part within <a-scene rain> to be removed, so it becomes just
<a-scene>
This action should halt the rain effect when the button is clicked. In other words, upon function execution, the rain property from the <a-scene rain> should be deleted, leaving only
<a-scene>
Is there a way to accomplish this? Here is a link to a fiddle containing the code: https://jsfiddle.net/AidanYoung/z7qstgua/2/