Aframe mesh rotation and animation

Question

I am trying rotation for mesh in an aframe gltf model but its seems to be not working. Is it possible to rotate a mesh of gltf model added on runtime in the scene? I am getting mesh where pivot is set but unable to apply rotation to it.

Issue: I have a door model with two meshes. Left door and right door. I want to rotate door 180 degree when user clicks on door mesh. I got the click event on entire 3d object as of now and checking which mesh is clicked; checking its parent and trying to rotate the left door but not working. Any idea what am i missing. so object.parent returns me parent object type which I am trying to rotate. Is it the right way?

Here is what I got so far.

 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
               });

            })

Answer 1

The trick to doing anything to parts of a gltf model is to traverse the gltf and isolate the object inside that you want to manipulate. You can do this by writing a component, attached to the gltf entity, that gets the underlying threejs object, and traverses all the objects within the gltf group, and then you can select an object by its name. You do this inside of a "model-loaded" event listener, like this

             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;
                        }
                    });

This selects one of the models, assigns it to a variable, which can be later used, to rotate the model (or do whatever you like with it).

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

here is the glitch