> For the complete documentation index, see [llms.txt](https://docs.echo3d.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.echo3d.com/scene-viewer/transforming-content.md).

# Transforming Content

## Moving 3D Content

Move the model by tapping the screen with **one finger** and moving the finger around the screen.

![](/files/-M8X0NXAXVFtfyja6RTg)

![](/files/-M8Wsc1ERUTwz5-wOQUw)

## Scaling 3D Content

### Using Touch Screen Gestures

Scale the model by pinching the screen with **two fingers**.

![](/files/-M8X1KLK2fo0h-M3yQVk)

![](/files/-M8WuDoAyj1-aSdZVIAj)

### Using Metadata

You can use metadata to **persistently** transform 3D content.

If the content is too big or too small, go back to the console and [add metadata](/web-console/manage-pages/data-page/how-to-add-data.md#adding-metadata) to affect its transformation. After adding or changing metadata **refresh the browser and relaunch the experiences** for the changes to take effect.

The following keys are words the system uses as pre-defined metadata keys to control transformations:

<table><thead><tr><th width="126">Keyword</th><th width="93">Type</th><th>Options</th><th>Effect</th></tr></thead><tbody><tr><td>scale</td><td>float</td><td>Any positive number. Default value is 1.</td><td>Grows or shrinks the hologram uniformly</td></tr></tbody></table>

{% hint style="info" %}
Refresh the browser and relaunch the experiences after adding metadata with WebAR experiences for the changes to take effect.&#x20;
{% endhint %}

## Rotating 3D Content

### Using Touch Screen Gestures

Rotate the model by placing **two fingers** on the screen and moving them in a circular motion.

![](/files/-M8X1HTvpAfCvAXwdr_c)

You can also use **two thumbs** and move them up and down, each thumb in the opposite direction.

![](/files/-M8WtMDw4IzD3GqOYn2b)

### Using Metadata

You can use metadata to persistently transform 3D content.

If you can [add metadata](/web-console/manage-pages/data-page/how-to-add-data.md#adding-metadata) to further adjust the starting rotation of the model. After adding or changing metadata **refresh the browser and relaunch the experiences** for the changes to take effect.

The following keys are words the system uses as pre-defined metadata keys to control transformations:

<table><thead><tr><th width="125">Keyword</th><th width="79">Type</th><th>Options</th><th>Effect</th></tr></thead><tbody><tr><td>xAngle</td><td>float</td><td><p>Any positive or negative number. </p><p>Default value is 0.</p></td><td>Rotates the model on the x-axis</td></tr><tr><td>yAngle</td><td>float</td><td><p>Any positive or negative number. </p><p>Default value is 0.</p></td><td>Rotates the model on the y-axis</td></tr><tr><td>zAngle</td><td>float</td><td><p>Any positive or negative number. </p><p>Default value is 0.</p></td><td>Rotates the model on the z-axis</td></tr></tbody></table>

{% hint style="info" %}
Remember to [relaunch the experience](/scene-viewer/deploy-experience.md#launching-the-scene-viewer-app) after adding metadata with Scene Viewer experiences for the changes to take effect.&#x20;
{% endhint %}

## Adding Text to 3D Content

You can add [annotations ](/web-console/manage-pages/content-page/annotations.md)to the model from the Inspector Dialog.

{% hint style="info" %}
Remember to [relaunch the experience](/scene-viewer/deploy-experience.md#launching-the-scene-viewer-app) after adding metadata with Scene Viewer experiences for the changes to take effect.&#x20;
{% endhint %}

![](/files/-MBjl1ROg29E8g86KsEu)

## Controlling 3D Animations

{% hint style="info" %}
Controlling animations requires that you to upload pre-animated 3D assets that have a built-in animations list.
{% endhint %}

If you'd like to control built-in animations of the content, go back to the console and [add metadata](/web-console/manage-pages/data-page/how-to-add-data.md#adding-metadata) to control animations. After adding metadata, [relaunch the experience](/scene-viewer/deploy-experience.md#launching-the-scene-viewer-app).

The following keys are words the system uses as pre-defined metadata keys to control built-in animations:

| Keyword             | Type    | Options                                                                                                      | Description                                                                                                       |
| ------------------- | ------- | ------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
| autoplay            | boolean | <p>Either 'true' or 'false'.</p><p>Default value 'true'.</p>                                                 | Play the default animation automatically.                                                                         |
| animationsTrigger   | string  | Either 'click' or 'after'. Default value 'click'.                                                            | Play the next animation by clicking the model or automatically after the previous animation.                      |
| animation\<X>\_name | string  | Any string that matches a name of an existing built-in animation in the asset's pre-defined animations list. | The animation's place in the sequence of the animations that is presented.                                        |
| animation\_loop     | boolean | <p>Either 'true' or 'false'.</p><p>Default value 'false'.</p>                                                | Play the animation once or in a loop. This option is available only if 'animationsTrigger' is not set to 'after'. |

For example:&#x20;

| Key              | Value   |
| ---------------- | ------- |
| animation1\_name | walking |
| animation2\_name | running |

{% hint style="info" %}
Remember to [relaunch the experience](/scene-viewer/deploy-experience.md#launching-the-scene-viewer-app) after adding metadata with Scene Viewer experiences for the changes to take effect.&#x20;
{% endhint %}