Изменить цвет объекта (.dae или gltf) в «AR.JS» - PullRequest
Новая
       81

Изменить цвет объекта (.dae или gltf) в «AR.JS»

0 голосов
/ 28 октября 2019

Я пытаюсь изменить цвет объекта, который я создал в Blender. Я могу изменить цвет объектов, таких как «a-box, a -phere» в самом html-коде, но с объектами внутри 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 по id .test {color: # ff0000}

JS : 

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

Есть ли способ изменить цветобъект прямо в коде или просто на данный момент я делаю объект (блендер)?

1 Ответ

0 голосов
/ 28 октября 2019

Объекты, содержащие модели GLTF, сложны, так как содержат много моделей внутри контейнера gltf. Вы не можете использовать setAttribute для моделей внутри GLTF, как вы можете использовать с другими примитивами. Вместо этого вы должны относиться к ним как к моделям 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;                
          });

Обратите внимание, что мы должны поместить цвет в структуры данных, которые нужны ТРИ, как объект цвета. Все это большая работа по сравнению с простотой Aframe, но у вас гораздо больше контроля, и вы можете точно видеть, что происходит под капотом.

сбой здесь .

...