Aframe Mesh вращение и анимация - PullRequest
Новая
       36

Aframe Mesh вращение и анимация

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

Я пытаюсь вращать сетку в модели aframe gltf, но, похоже, она не работает. Можно ли вращать сетку из модели GLTF, добавленной во время выполнения в сцене? Я получаю сетку, в которой установлен круг, но не могу применить к ней вращение.

Проблема: у меня модель двери с двумя сетками. Левая дверь и правая дверь. Я хочу повернуть дверь на 180 градусов, когда пользователь нажимает на сетку двери. На данный момент я получил событие click для всего трехмерного объекта и проверял, какая сетка нажата;проверяет родитель и пытается повернуть левую дверь, но не работает. Любая идея, что я пропускаю. object.parent возвращает мне тип родительского объекта, который я пытаюсь повернуть. Это правильный путь?

Вот что я получил до сих пор. 

 const newElement = document.createElement('a-entity')

            // The raycaster gives a location of the touch in the scene
            const touchPoint = event.detail.intersection.point
            newElement.setAttribute('position', touchPoint)

            //const randomYRotation = Math.random() * 360
            //newElement.setAttribute('rotation', '0 ' + randomYRotation + ' 0')

            newElement.setAttribute('visible', 'false')
            newElement.setAttribute('scale', '4 4 4')

            newElement.setAttribute('gltf-model', '#animatedModel')

            this.el.sceneEl.appendChild(newElement)

            newElement.addEventListener('model-loaded', () => {
              // Once the model is loaded, we are ready to show it popping in using an animation
              newElement.setAttribute('visible', 'true')
              newElement.setAttribute('id','model')
              newElement.setAttribute('class','cantap')
              newElement.setAttribute('hold-drag','')
              newElement.setAttribute('two-finger-spin','') 
              newElement.setAttribute('pinch-scale','');    
            /*  newElement.setAttribute('animation', {
                property: 'scale',
                to: '4 4 4',
                easing: 'easeOutElastic',
                dur: 800,
              }) */
               newElement.addEventListener('click', event => {
                    const animationList = ["Action", "Action.001"];
                  /*  newElement.setAttribute('animation-mixer', {
                        clip: animationList[0],
                        loop: 'once',
                    })
                    newElement.addEventListener('animation-loop',function() {
                        newElement.setAttribute('animation-mixer', {
                            timeScale : 0
                        })
                    }); */
                    var object = event.detail.intersection.object;
                    document.getElementById("btn").innerHTML = object.parent;

                   /* object.setAttribute('animation', {
                        property: 'rotation',
                        to: '0 180 0',
                        loop: true,
                        dur: 6000,
                        dir: 'once'
                      });*/

                      object.parent.setAttribute('rotation', {x: 0, y: 180, z: 0});

                 /*   object.traverse((node) =>{
                        console.log(node.name);
                        document.getElementById("btn").innerHTML = ;
                    }); */

                    console.log(this.el.getObject3D('mesh').name);

                    // name of object directly clicked
                    console.log(object.name);

                    // name of object's parent
                    console.log(object.parent.name);

                    // name of object and its children
               });

            })

1 Ответ

1 голос
/ 22 октября 2019

Хитрость в том, чтобы что-то сделать с частями модели GLTF, состоит в том, чтобы пройти через GLTF и изолировать объект внутри, которым вы хотите манипулировать. Вы можете сделать это, написав компонент, прикрепленный к сущности gltf, который получает базовый объект threejs и обходит все объекты в группе gltf, а затем вы можете выбрать объект по его имени. Вы делаете это внутри «загруженного моделью» слушателя событий, например: 

             el.addEventListener("model-loaded", e =>{
                    let tree3D = el.getObject3D('mesh');
                    if (!tree3D){return;}    
                    console.log('tree3D', tree3D);
                    tree3D.traverse(function(node){
                        if (node.isMesh){   
                          console.log(node);
                            self.tree = node;
                        }
                    });

. Выбирает одну из моделей, присваивает ее переменной, которая впоследствии может быть использована для поворота модели (илиделай с ней что хочешь). 

 tick: function(){
            if(this.tree){
              this.tree.rotateY(0.01);
            }
          }

вот это глюк

...