Using Aframe 0.6.1 I'm trying to make a button in the scene who begin an animation. This animation must rotate only the X angle of camera to 0. I like to leave all other angles same as before (ok, Z angle never moved, so like to only save Y angle).
an approach
<a-camera>
<a-animation begin="cameraToHorizonEvent" attribute="rotation.x" to="0" dur="2000"></a-animation>
</a-camera>
Here "rotation.x" DON'T WORK, something like this it's what I like. It's possible?
A temporal solution is to use animation-component, set rotation as property (attribute in a-animation), and do cameraEntity.setAttribute('animation', 'to', '0'+camRotY+camRotZ) and other stuff but I think that another solution can be
Thanks
Related
I have a earth object that I would like to rotate using animation in A-frame.
I just want the object to rotate forever and I don't know how to do it.
Below is my code thanks!
<a-sphere rotation="45 0 0" position="-44.277 50 -80.933" radius="30" src="images/earth.png" roughness="0.6">
<a-animation attribute="rotation"
easing="linear"
dur="10000"
to="0 360 0"
repeat="indefinite">
</a-animation>
</a-sphere>
That code is correct. It will take 10,000 ms (10 seconds) to complete 1 rotation, and it will repeat indefinitely ("forever"). I just tested the code and it works. If the earth.png texture isn't appearing, it may be difficult to see the sphere rotation. If you use the same code on an <a-box>, for example, it's much more obvious.
That said, since you have the rotation for the <a-sphere> set to 45 along the x axis and have the <a-animation> set to rotate to 360 over the y axis, it will not rotate in a linear fashion.
This can be remedied by adding a container <a-entity> element and setting the default position and rotation on that entity, removing it from the <a-sphere>, which will now be positioned relative to its container.
Here is demo: https://codepen.io/dansinni/pen/MVgqxd
Note that I had to use a different texture for the Earth.
I need rotate X axis of a-sky in my task in a 360 image liked project, but when I rotated, the look-controls works weird. The reason may be that camera's axis need change, and how can I change that camera's axis ?
look-controls works weird
<a-sky src="#skyTexture" rotation="30 0 0"></a-sky>
I guess you want to change the basis axes of the camera space, the easiest way to do that is wrapping the camera with a rotated object:
<a-entity rotation = "30 0 0">
<a-camera look-controls>
</a-camera>
</a-entity>
But, be careful, if you do that, all the objects in the scene would have a slope.
The controls are okay, You crooked the image, and the horizon is no longer a perfect circle around the camera, so Your perception feels off. If You rotate the camera, You will see the same image as if You didn't change anything.
I made a quick comparison of the rotations:
Take a look what is the relation of the horizon on the image, and the (0,0,0) grid. You can't rotate the sky in x, or z, and expect the guy to be lower and the horizon to be normal. If You want the user to be "higher", change the a-sky to a a-sphere and position it a bit lower than the camera, like i did here: https://codepen.io/gftruj/pen/Kqbxbx.
Craig.Li's anwser is correct if You want to rotate the camera, but its a bad idea to mess with the camera since the user should be the only one manipulating the camera ( what i think the initial intention of a-frame was ).
I need to be able to change rotation pivot without changing camera lookAt on THREE.TrackballControls no mater what I tried I could not succeed. Please give me a direction to solve this problem. What I am actually trying to achieve is Revit like mouse controls.
I was able to solve this problem by creating 2 3D objects named orbit and target, then add target and camera into orbit as child objects... camera always looks at target.position, mousemove on x axis rotates the orbit object around Z axis (hence target and camera rotates around the orbit) and mousemove on y axis rotates the camera arm (camera.position vector) around cameraSideways direction.
I'm learning Unity and I have a question.
I dont understand why this line resets the rotation to 0,0,0. All I'm doing is re-assigning its euler values?
transform.rotation =
Quaternion.Euler(transform.rotation.x,
transform.rotation.y,
transform.rotation.z);
The reason I'm doing this is because I need to lock one axis and keep the others changing. So I thought I could do it like this after the changes in x and z axes occur:
transform.rotation = Quaternion.Euler(transform.rotation.x,
LOCKED ROTATION VALUE,
transform.rotation.z);
I'm sure its simple but I cant find out whats wrong.
Thanks in advance.
Here is some documentation with transform.Rotate(). I'd use this one for rotating.
// Here is an example if you want to just rotate the Z axis.
transform.Rotate(new Vector3(0, 0, 10f) * Time.deltaTime);
Also, here is some other documentation on Quaternion. You could use functions like RotateTowards.
If your game object has a rigidbody on it then you can lock the rotation of it in Unity. Click on the game object and under the Rigidbody component click Constraints and then click the axis under Freeze Rotation.
You are using transform.rotation as if it is exposing Euler angles (which it is not). If you want the Euler angles from your rotation, you have to do this:
transform.rotation =
Quaternion.Euler(transform.rotation.eulerAngles.x,
transform.rotation.eulerAngles.y,
transform.rotation.eulerAngles.z);
I'm working on Libdx app using Decals.
Decals are 2d sprites in 3d world.
I have problem that when I say:
decal.setRotationX(angle)
everything works fine, but when I say:
decal.setRotationX(angle);
decal.setRotationY(angle2);
The decal rotates over Y axis only.
How to manage that problem?
I have found that Decal in source code uses Quaternion for rotation, but currently I don't know how to customize that to face my requirements.
Tnx in advance!
EDIT:
I have managed to rotate decal around multiple axis with:
decal.getRotation().setEulerAngles(yaw,pitch,roll);
Now my question is how to animate this with TweenEngine?
In get values method I have:
returnValues[0] = target.getRotation().getYaw();
returnValues[1] = target.getRotation().getPitch();
returnValues[2] = target.getRotation().getRoll();
In set values method I have:
target.getRotation().setEulerAngles(newValues[0], newValues[1],
newValues[2]);
But decal is not moving or animating, it's stucked in one position (slightly rotated over XYZ axis).
Any idea, values in TweenEngine are correct but somehow decal is not refreshing and rotating.
If you want to do it only once, you can do it like this:
decal.rotateX(angleX);
decal.rotateY(angleY);
decal.rotateZ(angleZ);
This will "add" the given angle to the current one though.
An alternative way would be to use the rotation Quaternion of the Decal:
decal.getRotation().setEulerAngles(yaw, pitch, roll);
The following image shows what "yaw", "pitch" and "roll" means:
Roll, pitch, yaw http://i.msdn.microsoft.com/dynimg/IC79189.gif
EDIT: I've just seen the JavaDoc of Decal.getRotation() and it says that the returned quaternion should not be modified! I've also checked the code and every other method of Decal sets an internal update flag which will cause the decal to change the next time it's rendered. Decal.getRotation() does not set this flag and thus the changes to it won't get recognized.
It seems like currently there is no really clean and easy way to set the rotation on all three axes at the same time. A workaround might look like this:
decal.setRotationX(0);
decal.setRotationY(0);
decal.setRotationZ(0);
decal.rotateX(angleX);
decal.rotateY(angleY);
decal.rotateZ(angleZ);
It first resets all angles to 0 and then rotates on each axis while not overwriting any other axis.