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

Moving camera around POI on mobile #41

Closed
fitzmode opened this issue Jul 10, 2017 · 5 comments
Closed

Moving camera around POI on mobile #41

fitzmode opened this issue Jul 10, 2017 · 5 comments

Comments

@fitzmode
Copy link

fitzmode commented Jul 10, 2017

Having created a fixed projection, how can I move around the POI to see around the projection? I m able to display the model in the scene but am unsure of the approach to take to viewing around it . A short example/pseudo code would be appreciated.

awe.pois.add({ 
  id: 'fixedObj', 
  position: { x: 0, y: -2, z: 0 },
  scale: { x: 2, y: 2, z: 2 },
});
awe.projections.add({ 
  id: 'BracProjection', 
  geometry: {
    path: 'models/Brac.obj'
  },
  material: {
    path: 'models/Brac.mtl' 
  },
  position: { x: 0, y: 0, z: 0 },
  rotation: { x: 0, y: 180, z: 0 },
}, { poi_id: 'fixedObj' });


@awe-media
Copy link
Owner

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.

@fitzmode
Copy link
Author

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?

@awe-media
Copy link
Owner

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

@awe-media awe-media reopened this Jul 12, 2017
@awe-media
Copy link
Owner

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.

@awe-media
Copy link
Owner

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.

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