A-Frame Brings Virtual Reality to Life
<a-scene> <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere> <a-cube position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-cube> <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> </a-scene>In this example, a sphere, a cube as well as a cylinder are placed in the scenery. You can use attributes to define the size, color, position and rotation of the object. The parameter set for "position" requires three values to be able to place an object on the x, y and z-axis. "rotation" also needs three values which define the angle of rotation on the three axes. Simple Example With Sphere, Cube, and Cylinder Depending on the chosen type, there are different attributes available for the size of an object. For „<a-sphere>“, only the radius ("radius") needs to be defined. „<a-cube>“ requires information on the three edge lengths ("width", "height" and "depth"). For the cylinder, you need to enter a radius as well as a height ("radius" and "height").
Adding AnimationsVia „<a-animation>“, you can add an object to an animation in a simple way. To do so, „<a-animation>“ is marked as the child element of the object that you want to animate.
<a-cube position="-1 0.5 1" rotation="0 0 0" width="1" height="1" depth="4" color="#4CC3D9"> <a-animation attribute="rotation" to="0 360 0" dur="10000" fill="forwards" repeat="indefinite"></a-animation> </a-cube>In the example, a cube is rotated by 360 degrees on the y-axis. To do so, the type of animation is defined via "attribute" and the goal of the animation is defined by "to". "dur" defines the duration and "fill" determines what should happen at the end of the animation. The value "forwards" makes sure that the animation is not reset back to the beginning. "repeat" allows you to set the number of repeats.