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.
Related
If I try to scale up a working scene with one sphere and point lighting to make the distances between the objects very large ( > 1E5 ), then the rendered lighting is incorrect - it looks like a tiny slit which moves across the object as one's VR viewpoint changes when I display on an Oculus Quest or indeed Google Cardboard. The scene looks correct in a non-VR web browser on a desktop.
This is clearly an issue with distances, precision, and the a-sphere object and how it reacts with lights and cameras at large distances. But what I need is a workaround. I'm trying to simulate the solar system at real scale ( at least as far as distances between planets goes ). For the moon to be far enough from the observer not to move when I move around, I need to scale it so the moon is at least 2000 m from the camera. That puts the sun at 800000 m away, and that's where sunlight comes from. As a result, the other planets are not rendered correctly.
If I scale downwards, all works, but the moon moves relative to the other objects when I stand up or walk around.
Is there a workaround I can use here? Is there a published limit which explains which bit of the system is the problem - it's clearly more likely to be at a lower level than aframe, but I'm not sure if it's three.js or the webgl implementation on the oculus or what.
<a-scene background="color:black;">
<a-sphere id="mars" position="0 500E3 -2000E3" radius="40E3" color="#FFBBBB"></a-sphere>
<a-entity id="sunlightnear" light="color: #00FF00; type: point;" position="0 0 -1000"></a-entity>
<a-entity id="sunlightfar" light="color: #FF0000; type: point;" position="0 0 -1000E3"></a-entity>
<a-entity id="mainCamera" camera="far:1E10;" position="0 1.6 0" look-controls></a-entity>
</a-scene>
This uses two lights at different distances. I would expect the mars sphere to be evenly illuminated. Instead it is always visibly green from the first light but the red from the second light appears as a band which moves across the sphere with weird artifacts as I move my eye.
Don’t use point lights. If the light source is very far or very big is better approximated with a directional light
Example and corresponding HTML.
I also recommend using small numbers. Easier to work with and won't run into precision or overflow issues. Better to focus on getting distance and size ratios correct.
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
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 ).
In my simple school project, there is a character that moves using buttons. When deciding how I wanted to move a sprite I stumbled upon this dilemma, why use speed? They look pretty much identical to me so far.
Here is what I mean (the top MoveTo block and the bottom one seem the same)
of course given i set the character.speed to 10 in screen init.
What would I benefit by replacing the simple integer value with character.speed?
You can set the heading and the speed of an image sprite and the image sprite will move automatically into the direction defied by heading. Alternatively use the MoveTo method to set the image sprite to a defined x/y coordinate.
See also the documentation
Heading
Returns the sprite's heading in degrees above the positive x-axis. Zero degrees is toward the right of the screen; 90 degrees is toward
the top of the screen.
Interval
The interval in milliseconds at which the sprite's position is updated. For example, if the interval is 50 and the speed is 10, then
the sprite will move 10 pixels every 50 milliseconds.
Speed
The speed at which the sprite moves. The sprite moves this many pixels every interval.
I'm working on a very simple a-frame webvr scene. I want to create an <a-sphere> that when interacted with will scale in size to mimic that of an <a-sky> component in that it will have a 360 photo material mapped to the inside.
Currently I have tried just starting with a small sky and scaling it up:
<a-sky color="#000" scale="1 1 -1" radius="1">
<a-animation attribute="scale" dur="10000" begin="500" to="1000 1000 -1"></a-animation>
</a-sky>
I'm curious about how to best approach this, currently when I animate an increase in the scale the sphere expands but only fills up half of the world view and doesn't encapsulate the player. I believe this is because the initial radius is set to 1. Should I be scaling the radius instead of the scale? or should I write a custom sphere component and avoid using <a-sky>?
Scaling the Z axis as well works for me to="1000 1000 -1000"
http://codepen.io/team/mozvr/pen/VazpEo?editors=100
A-Frame / https://aframe.io