我使用a -frame (https://aframe.io)创建了一个场景，我目前在我的场景中有一些雨和一个按钮。我想做的是当按钮被点击时，一个功能发生，我想知道如何使这个功能从场景中删除rain组件。代码:
<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>
我想发生的是当toggleRain()函数被触发时，代码的<a-scene rain>部分将改变并删除rain部分，因此只有
<a-scene>
当按钮被点击时，这应该会阻止下雨。只是为了澄清，当函数被触发时，它应该从<a-scene rain>中获取rain属性，只留下
<a-scene>
如何做到这一点?链接到包含代码的提琴:https://jsfiddle.net/AidanYoung/z7qstgua/2/
您可以使用removeAttribute()来删除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>