在“AR.JS”中更改对象（.dae 或 gltf）的颜色答案

【问题标题】：Change the color of an object (.dae or gltf) in "AR.JS"在“AR.JS”中更改对象（.dae 或 gltf）的颜色
【发布时间】：2019-10-29 04:11:32
【问题描述】：

我正在尝试更改我在搅拌机中创建的对象的颜色。我可以在 html 代码本身中更改对象的颜色，例如“a-box，a-sphere”，但对于 tree.js（gltf 或 .dae - collada）中的对象，我不能。

CodePen（这只是我的真实项目（AR.JS）中未来应用的测试环境）

<html>

<head>
  <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>

<body>
  <a-scene>

    <a-gltf-model id="test" src="https://raw.githubusercontent.com/KurtRodrigues/KurtRodrigues.github.io/master/Arquivos%20utilizados/Pe%C3%A7a%2Bbancada_V2.gltf" color="#FF0000" position="0 0 -3" rotation="0 0 0" scale="1.5 1.5 1.5" size="20px"> </a-gltf-model>

    <a-sky color="#ECECEC"></a-sky>
  </a-scene>
</body>

</html>

已经试过了：

HTML 与 color= # ff00000。

CSS by id .test {color: # ff0000}

JS：

var b = document.querySelector ("test");
b.setAttribute ("color", "red");

有什么方法可以直接在代码中更改对象的颜色，或者只是在我制作对象的时候（搅拌机）？

【问题讨论】：

你document.querySelector的参数不对，应该是#test

标签： javascript html css aframe ar.js

【解决方案1】：

包含 GLTF 模型的实体很复杂，因为它们在 gltf 容器中包含许多模型。您不能像使用其他原语一样在 gltf 内的模型上使用 setAttribute。相反，您必须将它们视为 THREEjs 模型。这意味着您需要创建一个自定义组件，该组件将“遍历”gltf，找到模型，并存储对它们的变量引用，然后您可以在 THREEjs 级别更改这些模型的参数。例如

AFRAME.registerComponent('treeman', {
        init: function(){
            let el = this.el;
            let self = this;
            self.trees = [];              
            el.addEventListener("model-loaded", e =>{
                let tree3D = el.getObject3D('mesh'); // get the THREEjs group
                if (!tree3D){return;}    
              console.log('tree3D', tree3D); // log the THREEjs group so you can look 
                                          at all of its contents and parameters.
                tree3D.traverse(function(node){ // this is how you loop through 
                                                  (traverse) the models
                    if (node.isMesh){   
                      console.log(node);
                        self.trees.push(node);
                      if(node.name == "Trunk_A"){
                        self.treeMat = node.material; // store a reference to the 
                                         material you want to modify later
                      }
                      node.material.map = null; // removes the texture so we can see 
                               color clearly
                    }
                });
          });

然后，您可以使用事件侦听器函数访问此组件，并对材质进行处理。像这样

 el.addEventListener('changecolor', e =>{               
            let colorp = e.detail.color;
            let colorHex = Number(colorp.replace('#', '0x'));
            let color3D = new THREE.Color(colorHex);
            self.treeMat.color = color3D;                
          });

请注意，我们必须将颜色放入 THREEjs 想要的数据结构中，例如颜色对象。与 Aframe 的简单性相比，所有这些工作量都很大，但您拥有更多的控制权，并且可以准确地看到引擎盖下发生的事情。

glitch here.

【讨论】：