Giter VIP home page Giter VIP logo

Comments (5)

awe-media avatar awe-media commented on August 24, 2024

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.

fitzmode avatar fitzmode commented on August 24, 2024

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.

awe-media avatar awe-media commented on August 24, 2024

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.

awe-media avatar awe-media commented on August 24, 2024

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.

awe-media avatar awe-media commented on August 24, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.