A-frame场景中如何通过按钮点击事件移除rain组件？

你可以通过直接操作<a-scene>的DOM属性实现降雨效果的启停，完整实现代码如下：

<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> 
  <script>
    function toggleRain() {
      const sceneEl = document.querySelector('a-scene')
      // 判断当前是否有rain属性，实现切换逻辑
      if (sceneEl.hasAttribute('rain')) {
        sceneEl.removeAttribute('rain')
      } else {
        sceneEl.setAttribute('rain', '')
      }
    }
  </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>

A-frame组件和DOM属性是绑定的，移除rain属性时，aframe-rain组件会自动销毁实例，清除降雨相关的实体和动画，达到停止降雨的效果；重新添加属性时会重新初始化组件，恢复降雨效果。
如果你只需要实现单次点击停止降雨，不需要重新开启的效果，toggleRain函数可以简化为：

function toggleRain() {
  document.querySelector('a-scene').removeAttribute('rain')
}

内容的提问来源于stack exchange，提问作者Aidan Young