Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how can i use awe.projections.update to animate object just like butterfly? #51

Closed
binita12345 opened this issue Aug 14, 2017 · 2 comments

Comments

@binita12345
Copy link

binita12345 commented Aug 14, 2017

following code is not working in awe demo or also in my app to animate object as a butterfly.

NOTE: You can also use the projection.update() api to update the texture periodically too. e.g.

var butterfly = awe.projections.view(PROJECTION_ID_HERE);
var i = 1;
b.update({
  position:{ y:1 }, // use a minimal non-zero update here
  animation:{
    duration:0.2, // 5 animation steps are 1/5th of a second
    repeat:5, // play for 1 second total
    persist:0,
    step_callback:function() { 
      i++; if (i>5) { i = 1; } // add time scaling here if the animation is too fast
      b.update({ texture:{ path:i+'.png' } });
    }
  }
});

how can i use this code to fulfill my functionality?

@awe-media
Copy link
Owner

We've tested this code with the standard files in the examples directory of the repos and it definitely does work.

You obviously need to replace the PROJECTION_ID_HERE string with the name of the projection you're using.

Plus you need to update path:i+'.png' to point to the path where you keep your images and make sure the file names are 1.png, 2.png, etc.

@binita12345
Copy link
Author

binita12345 commented Aug 18, 2017

yes, but in my code it is not working, may be i having passed wrong texture in awe.projections.add as below

awe.projections.add({
id: zoneUser.email + '->' + Math.random(),
// geometry: { shape: 'cube', x:50, y:50, z:50 },
geometry: {
shape: 'plane',
height: 10,
width: 20
},
rotation: {
x: 0,
y: getRotation($scope.poiBarrings[zoneUser.fullname]),
z: 0
},
// rotation: getRotation($scope.poiBarrings[zoneUser.fullname]),
material: {
type: 'phong',
color: 0xFFFFFF
},
texture: {
path: 'img/SB-Butterfly.gif'
},
}, {
poi_id: zoneUser.fullname
});

and updates by 6 frames using your code

var butterfly = awe.projections.view(zoneUser.fullname);
var i = 1;
b.update({
position:{ y:1 }, // use a minimal non-zero update here
material: {
color: 0xFFFFFF
},
animation:{
duration:0.2, // 5 animation steps are 1/5th of a second
repeat:5, // play for 1 second total
persist:0,

                            step_callback:function() { 
                              i++; if (i>5) { i = 1; } // add time scaling here if the animation is too fast
                              b.update({ texture:{ path:['img/tmp-0.png', 'img/tmp-1.png', 'img/tmp-2.png', 'img/tmp-3.png', 'img/tmp-4.png', 'img/tmp-5.png']} });
                            }
                          }

what can I pass in texture in awe.projections.add as displaying image?

please check n confirm my code to solve the problem..

thanks in advance

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants