Note: This documentation is for the old 1.2.0 version of A-Frame. Check out the documentation for the current 1.4.0 version
The scale component defines a shrinking, stretching, or skewing transformation of an entity. It takes three scaling factors for the X, Y, and Z axes.
All entities inherently have the scale component.
The example below shrinks the entity in half along the X direction, maintains the same scale factor along the Y direction, and stretches the entity by two-fold along the Z-direction:
<a-entity scale="0.5 1 2"></a-entity>
If we set any of the scaling factors to 0, then A-Frame will assign instead a negligible value.
|x||Scaling factor in the X direction.||1|
|y||Scaling factor in the Y direction.||1|
|z||Scaling factor in the Z direction.||1|
Scaling factors can be negative, which results in a reflection.
A notable use for this is for sky spheres. Sky spheres contain the entire scene and have a texture mapped on the interior surface. To do this, we can reflect, or invert, the sphere in the Z-direction.
<a-entity geometry="primitive: sphere; radius: 1000"
Similar to the rotation and position components, scales are applied in the local coordinate system and multiply in nested entities.
For performance and ergonomics, we recommend updating scale directly via the
.scale Vector3 versus via
This method is easier because we have access to all the Vector3
utilities, and faster by skipping
.setAttribute overhead and not
needing to create an object to set rotation:
// With three.js
Also easier to do incremental updates:
el.object3D.scale.x += 1;
To reflect updates done at the three.js level, A-Frame returns the actual
Object3D.scale vector object when doing
modifying the return value will modify the entity itself.
Order of Transformations
Transformations are applied to entities in this order: