A-frame 颜色设置为变量答案

【问题标题】：A-frame color is set to a variableA-frame 颜色设置为变量
【发布时间】：2021-08-11 04:56:03
【问题描述】：

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

【问题讨论】：

标签： javascript html css aframe virtual-reality

【解决方案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-box 标签所做的唯一更改是更改位置、高度、宽度和深度值。