A 帧颜色设置为变量

Question

我想知道如何在 A 帧 (aframe.io) 中将对象的颜色设置为变量。例如，如果名为 x 的变量的值为 #8F3A84，则形状的颜色将设置为该颜色。如果变量的值为 #738F3A，则形状也将设置为该颜色。我怎样才能实现这样的目标？这是我的形状的代码：<a-box position="0 20 0" static-body width="20" depth="20" height="0.1"></a-box>

Answer 1

您可以使用函数代替变量。像下面这样：

const changeColor = (eleId, colorValue) => {
  const box = document.getElementById(eleId)
  box.setAttribute('color', colorValue)
}

编辑

完全实施

index.html

<HTML>
<body>
  <a-scene stats="" inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui="" device-orientation-permission-ui="">
    <a-box id='test' position="0 5 0" static-body="" width="5" depth="5" height="5" material="" geometry=""></a-box>
  </a-scene>
</body>
<script>
window.changeColor = (eleId, colorValue) => {
  const box = document.getElementById(eleId)
  box.setAttribute('color', colorValue)
}

changeColor('test', 'red')
</script>
</html>

从任何地方调用 changeColor 函数

A 帧颜色设置为变量

A-frame color is set to a variable

html

javascript

css

virtual-reality

aframe