我已经使用 A 形框架 ( 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>部分代码将更改并删除下雨部分，因此只有
<a-scene>
这应该可以阻止单击按钮时下雨。只是为了澄清，当函数被触发时，它应该 rain属性来自<a-scene rain>只剩下
<a-scene>
如何做到这一点？链接到包含代码的 fiddle :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>关于javascript - A-frame 添加启用/禁用功能组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69637926/