A-frame add enable/disable component on function-CodePudding

I have created a scene using A-frame (https://aframe.io) and I currently have some rain in my scene and a button. What I would like to do is when the button is clicked, a function occurs, I'm wondering how I can make this function remove the rain component from the scene. Code:

 <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>

What I would like to happen is when the toggleRain() function is triggered, the
<a-scene rain> part of the code will change and remove the rain part so there is just

<a-scene>

This should stop the rain from falling when the button is clicked. Just to clarify, when the function is triggered, it should rain property from the <a-scene rain> leaving just

<a-scene>

How can this be done? Link to fiddle containing code: https://jsfiddle.net/AidanYoung/z7qstgua/2/

CodePudding user response：

You could just use removeAttribute() to remove the 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>