AFrame使用颜色选择器（香草拾取器）更新实体颜色的问题

Question

摘要

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

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

我至少要在背景墙上应用纹理，我想让用户可以从拾色器中选择一种自定义颜色，然后应用该颜色替换该纹理。

从vanilla-picker库运行该函数后，逻辑似乎全部正常工作，并且颜色属性在html的相关位置更新，但是颜色似乎从未应用，这让我有些难过。

是否必须“更新”框架以改变颜色？或十六进制代码本身有问题（查看附带的图像以获取控制台日志示例）。我应该说该实体从应用了纹理开始，但是您可以从代码onChange上看到我将其去除，然后它应该应用color属性，我希望它会自动应用颜色（因为那里没有纹理）不再）

任何帮助表示赞赏

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

代码

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函数，因为每次选择器颜色现在更改时颜色都会更新。

希望可以帮助陷入类似问题的其他人！