src-fit

src-fit component for A-Frame.

---

title: src-fit type: components layout: docs parent_section: components

The src-fit component automatically modifies the geometry of the entity to match its material src (e.g. image or video) dimensions as specified, and emits an event signaling the changes in dimensions, if any.

If the entity has geometry width specified, the entity's height will be resized preserving aspect ratio.

If the entity has only geometry height specified, the entity's width will be resized preserving aspect ratio.

If the entity has neither geometry width or height specified, the entity will be resized preserving aspect ratio within a maximum 1x1 size.

Thanks to @nylki for inspiration with different implementation at https://github.com/nylki/aframe-fit-texture-component and the great Slack discussion resulting in this separate component.

Example

<a-image src="foo.png" src-fit></a-image>

Events

Event Name	Description
fit	Fit was performed.

Installation

npm

Install via npm:

npm install @mohrtw/aframe-src-fit-component

Then register and use.

require('aframe');
require('aframe-src-fit-component');