A-frame 在功能上添加 enable/disable 组件

Question

我使用 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>

单击按钮时，这应该可以阻止下雨。澄清一下，当函数被触发时，它应该从 <a-scene rain> rain 属性离开

<a-scene>

如何做到这一点？ Link 到 fiddle 包含代码：https://jsfiddle.net/AidanYoung/z7qstgua/2/

Answer 1

您可以只使用 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>

A-frame 在功能上添加 enable/disable 组件

A-frame add enable/disable component on function

javascript

function

three.js

webvr

aframe