scale

Note: This documentation is for the old 0.9.0 version of A-Frame. Check out the documentation for the current 1.6.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.

Example

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>

Value

If we set any of the scaling factors to 0, then A-Frame will assign instead a negligible value.

Reflection

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"
          material="src: sky.png"
          scale="1 1 -1"></a-entity>

Relative Scale

Similar to the rotation and position components, scales are applied in the local coordinate system and multiply in nested entities.

Updating Scale

For performance and ergonomics, we recommend updating scale directly via the three.js Object3D .scale Vector3 versus via .setAttribute.

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
el.object3D.scale.set(1, 2, 3);

// With .setAttribute (not recommended).
el.setAttribute('scale', {x: 1, y: 2, z: 3});

Also easier to do incremental updates:

el.object3D.scale.x += 1;
el.object3D.scale.multiplyScalar(2);
el.object3D.scale.sub(someOtherVector);

Getting Scale

To reflect updates done at the three.js level, A-Frame returns the actual Object3D.scale vector object when doing .getAttribute('scale'). Note modifying the return value will modify the entity itself.