How to check current rotation of an object about webvr-starter-kit HOT 8 OPEN

here is how you do that with an object named 'box', for example:
var boxRotationX = box.object.rotation.x
that's all there is to it! let me know if you have any questions.

from webvr-starter-kit.

For any kind of web animation, I generally advise against animating incrementally like that. i.e. setting the state based on the previous state - unless your state is controlled by something like user input or a physics engine. A more reliable approach is to simply write an expression that runs on every frame and takes the current time as an input.

One very reliable way to have something wave or oscillate back and forth is to use a sine or cosine function. Like this:

var period = Math.PI * 2 / 5000; // one full cycle every 5000 milliseconds
var range = 60 * Math.PI / 180; // max rotation of 60 degrees off center
box.rotation.x = Math.cos(time * period) * range;

Because it's a trigonometric wave, it'll slow down as it approaches the edge of the rotation and then speed up again as it goes back towards the center. You can try other wave functions, like a triangle wave:

box.rotation.x = range * (Math.abs(4 * (time / period) - Math.floor(time / period + 0.5))) - 1);

But @skompc is not wrong; that should be the correct way to check the local rotation of the object.

from webvr-starter-kit.

Thanks alot @skompc and @brianchirls! I will try this.
Regarding how I am animating, I'm doing the animation in the VR.animate(function (delta, time) function using rotateX function.

from webvr-starter-kit.

Hi again,
I tried the solution you proposed and it works good for one of my images :) , the other one I cant get to rotate around the right axis. It rotates around the same axis regardless if I use rotation.x or rotation.z.
You can see how it rotates here (the image you see if you look left):
http://www.migrantjourneys.com/Intro/

Here is how I have set up the image that is giving me problems, I use a container to get it to rotate around the top of the image instead of the center.

         var containerTwo = VR.empty()
        .moveTo(-12, 8.35, 3)
        .rotateY(Math.PI / 2)
        .rotateZ(-0.04*Math.PI/2);

        var posterTwo = containerTwo.image('IMG_3263.JPG')
        .setScale(5)
        .moveTo(0,-1.5,0);

My VR.animate function looks like this:

        VR.animate(function (delta, time) {
            containerTwo.rotation.z = Math.cos(time * posterRotationPeriod) * posterRotationRange;
            containerLogo.rotation.x = Math.cos(time * posterRotationPeriod) * posterRotationRange;
        });

Thanks
Simon

from webvr-starter-kit.

Yeah, that function provides delta for animating incrementally and time for doing it as an expression. In this case, I think the latter is better because it's much less error prone.

Let us know how it goes and I'd love it if you'd share the results when you're done.

from webvr-starter-kit.

@simonhultgren Euler rotations are weird. Try adding this:

containerTwo.rotation.order = 'ZYX'

Also, I don't think it's entirely necessary to use empty container objects. You should be able to just manipulate the images directly.

from webvr-starter-kit.

Thanks @brianchirls , that did the trick!

About the container, I use that to offset the rotation to occur along the top of the image instead of center. Is there some way in java script to move the origin of the rotation within the image instead? (I'm usually not using javascript so sorry if this is a really basic question).

Anyway, we are using your framework to put together a very brief presentation of our project, we thought using this is better than doing a traditional power point presentation.

Simon

from webvr-starter-kit.

@simonhultgren You know, you're right. There are ways to offset the rotation without a parent object, but honestly this way is easier.

I'm very glad to see you putting together a real, live VR piece instead of a PDF deck. Excellent.

from webvr-starter-kit.