CODEWITHSUNDEEP
javascriptarraysaframe
L3 Zhang
L3 Zhang

Reputation: 105

js setAttribute with Array

I have a problem with setAttribute. I set an Array as the value of rotation, but it doesn't work. Alert of gradRoll is a number. But the type of gradRoll is undefined. Why? Can anybody help me? thanks in advance.

AFRAME.registerComponent('clockhand_roll',{
    schema:{
      type:'string', default: "secondClockhand"
    },

    init:function(){
      var data = this.data;
      var el=this.el;

      var oTime= new Date();
      var curTime;

      var clockhandPositonArray;

      if(data == "secondClockhand" ){
        curTime = oTime.getSeconds();
      }else if(data == "minuteClockhand"){
        curTime = oTime.getMinutes();
      }else if(data == "hourClockhand"){
        curTime = oTome.getHours;
      }else {
        alert("invalid input!");
      }

      //alert(curTime);  
      //clockhandPositonArray=getClockhandPosition(curTime, data);
      //alert(el.getAttribute("rotation"));

      //el.setAttribute("rotation", 'clockhandPositonArray');

      setClockhandPosition(el, curTime, data);

    }
  });

  function setClockhandPosition(el, curTime, typeOfClockhand){
    var gradForOneUnit;
    var gradRoll;
    var rotationArray;

    if(typeOfClockhand == "secondClockhand" || typeOfClockhand == "minuteClockhand"){
      gradForOneUnit=360/60;
    }else if(typeOfClockhand == "hourClockhand"){
      gradForOneUnit=360/12;
    }

    gardRoll=curTime*gradForOneUnit;

    //alert(gardRoll); //number: 354!!!!!!!!!!!!!!!!!!!! why??????
    //alert(typeof(gradRoll)); //undefined!!!!!!!!!!!!!  why??????

    rotationArray=[curTime*gradForOneUnit, 0, 0];

    //alert(typeof(rotationArray));//object
    //alert(typeof(el.getAttribute("rotation"))); //object

    //alert(rotationArray); //number: 162 , 0, 0

    el.setAttribute("rotation", rotationArray); //dosn't work.
  }

Upvotes: 0

Views: 3894

Answers (3)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14665

Lot of people suggesting:
el.setAttribute("rotation", 'x'+'y' + 'z'); method, as far as i know, it's a bit more efficient to omit the parsing ( 'x y z' to {x,y,z} ) and use the object in the first place :
el.setAttribute("rotation", {x:gradRoll,y:0,z:0});

Upvotes: 1

Riccardo
Riccardo

Reputation: 165

gradRoll is undefined because the variable name is gardRoll, a typo that you repeated in the first alert but not in the second one.

It seems like you only wish to edit the X value of the rotation so try this:

el.setAttribute("rotation", gardRoll + ' 0 ' + '0');

Note that I used the variable with the typo in it.

It's a bit dirty I know but it worked for me when I had a similar issue with the position component.

Upvotes: 0

bluehipy
bluehipy

Reputation: 2294

Use:

el.setAttribute("transform", "rotate3d,x,y,z,angle)");

or combine rotateX, rotateY, rotateZ.

Upvotes: 0

Related Questions