使用颜色选择器 (vanilla-picker) 更新实体颜色的 AFrame 问题

Question

总结

我正在开发一个简单的应用程序，它允许用户在 3d 房间中使用 aFrame 查看具有纹理的实体。我正在使用 aFrame、HTML 和 vanilla JS 以及一个名为 vanilla-picker 的库作为颜色选择器。

https://aframe.io/ https://vanilla-picker.js.org/

至少我有一个纹理应用于背景墙，我想让用户选择从颜色选择器中选择自定义颜色，然后应用该颜色，替换纹理。

一旦从 vanilla-picker 库运行该函数，所有逻辑似乎都在工作，并且在 html 中的相关位置颜色属性会更新，但是颜色似乎永远不会被应用，这让我有点难过.

这是否与必须“更新”aFrame 颜色应该改变有关？或者十六进制代码本身有问题（查看附件图像以获取控制台日志示例）。我应该说实体以应用纹理开始，但您可以从代码 onChange 中看到我将其剥离，然后它应该应用颜色属性，我希望它只自动应用颜色（因为那里没有纹理不再）

任何帮助表示赞赏

这是主JS中颜色选择器/交换颜色函数的代码

代码

JS 代码段

var parent = document.querySelector('#parent');
var picker = new Picker(parent);

picker.onChange = function(color) {
     var wallpapertex = document.querySelector('a-entity');
     const wallpapercolor = color.hex;  
     console.log(wallpapertex.getAttribute('color'));
     wallpapertex.setAttribute('material', 'src', '');
};

picker.onDone = function(color) {
     var wallpapertex = document.querySelector('a-entity');
     const wallpapercolor = color.hex;  
     console.log(wallpapercolor);
     wallpapertex.setAttribute('color', wallpapercolor);
   }

图片

带有颜色选择器加载的应用程序本身

https://i.imgur.com/El7iRb3.jpg

控制台日志输出和html

https://i.imgur.com/UPJtq4d.jpg

我尝试查看十六进制代码并使用开发人员选项卡对其进行修改，但没有结果

我一直在寻找错误或缺少的依赖项，但无法找到任何（显然）错误。

想知道它是否在加载时应用了纹理会影响它，但我不明白为什么会影响它，因为我一开始将其剥离并且该部分有效

这是剥离纹理的线： wallpapertex.setAttribute('material', 'src', '');

预期：

我希望将十六进制值应用于基元，并在调用 onDone 函数后（按 Enter 后）应用要应用的颜色更改

实际结果

实际发生的情况是 onChange 删除了纹理，然后 onDone 函数更新了原始形状（墙）的属性，然后它仍然保持白色而不是更新为选定的十六进制值，即使更改已经（在html 中的表面）已应用于基元。

Answer 1

修复

我设法用下面的代码解决了这个问题，我只是错过了一些东西 setattribute 缺少材料，我认为将颜色作为十六进制传递是行不通的，因此将其作为来自 vanilla-picker 的 rgba 字符串传递。现在可以正常工作了

var parent = document.querySelector('#parent');
var picker = new Picker(parent);

picker.onChange = function(color) {
    var wallpapertex = document.querySelector('a-entity');
    const wallpapercolor = color.rgbaString; // I passed through the colour from picker as an rgba value instead of hex  
    wallpapertex.setAttribute('material', 'src', '');
    // wallpapertex.setAttribute('color', wallpapercolor); /// I think this line was wrong I had missed material 
       wallpapertex.setAttribute('material', 'color', wallpapercolor); 
    };

此实例中不需要 picker.onDone 函数，因为现在每次选择器颜色更改时颜色都会更新。

希望能帮助遇到类似问题的其他人！