Comments (5)
Hi @anesumuz please checkout the wiki page that's a guide to animations https://github.com/awe-media/awe.js/wiki/tweening-example
So to extend your example to spin your object around the Y axis 360° over 5 seconds and then reset to how it started (e.g. persist:0) you can simply use this code:
awe.pois.update({
data:{
rotation:{
y: 360
},
animation: {
duration: 5,
persist: 0
}
},
where:{
id:'fixedObj',
}
});
Of course this is spinning it using the poi that provides the basis for that coordinate system. You can also apply this at the projections level too.
from awe.js.
My question was with regard to moving the camera view around a projection and not rotating the projection itself. Is this possible with the current API available?
from awe.js.
Hi @anesumuz - good question. Here's some simple code that shows you how to do that.
var new_x = 0, // start pov position at x:0
new_z = 0, // start the pov position at z:0
duration = 3, // make the animation run for 3 seconds
step_size = 360/(duration*61), // if duration == 1 & rAF runs at ~60hz
circle_radius = 400,
angle = 0,
target_poi_id = "fixedObj", // set the poi you want to circle around
target_poi_x = awe.pois.view(target_poi_id).position.x,
target_poi_z = awe.pois.view(target_poi_id).position.z;
awe.pov().update({
position:{ x:1 }, // set an arbitrary non zero position update but override it below
animation: {
duration: duration,
persist: 0, // change this to 1 if you don't want to reset to how you started
step_callback:function(io) { // setup a callback on each step
angle += step_size; // update the current angle
new_x = Math.sin(THREE.Math.degToRad(angle))*circle_radius ; // calculate the x based on angle
new_z = Math.cos(THREE.Math.degToRad(angle))*circle_radius ; // calculate the z based on angle
awe.pov().update({ position:{ x:target_poi_x+new_x, z:target_poi_z+new_z } }); // update offset from the poi you're circling
io.object.look_at_poi({ id:target_poi_id }); // make the pov look at the poi you're circling
},
end_callback:function(io) {
io.object.look_at_poi({ id:target_poi_id }); // if you don't persist then reset orientation here
}
}
});
NOTE: This highlighted a small issue with povs updates and we've pushed a fix for that so please pull the latest version to use this code - see commit 17a0833
from awe.js.
Also note that if you're using the gyro plugin or any other plugins that are driving the pov's position/rotation then you may want to disable that during this animation.
from awe.js.
This github repos is now focused on supporting the development of apps using awe.js on the awe.media platform. You can still access our older awe.js library as the deprecated
branch, however we no longer support that code.
from awe.js.
Related Issues (20)
- what can I pass in texture in awe.projections.add as displaying image? HOT 1
- how to animate or update image via texture using six different frames? HOT 1
- how to load .fbx file to animate an object? HOT 1
- Is texture property supported in awe.pois.update({data:{})? HOT 1
- how to unregister click event HOT 2
- Why object is going on beside of its actual position when an object is clicked/tapped? HOT 1
- how can i shake object from center on device? HOT 1
- object is appearing on another angle HOT 1
- Adding video texture to projections in an onclick event (Android) HOT 1
- texture not load HOT 1
- Use augmented reality in STEREO mode with AWE HOT 1
- Augmented Reality with camera active, with background black, for Hololens. HOT 1
- Non Mobile platform HOT 1
- Dispose method HOT 1
- Nothing HOT 1
- Text Example HOT 1
- How can I reload/update/change .obj model? HOT 2
- projection scale not working HOT 1
- Is there a function to manually run snapshot function HOT 5
- How do I link my AR scene to another scene in the same project?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from awe.js.