echo3D
🌐 Back to website💻 Go to console📺 Watch workshop💬 Discuss on Slack
  • Introduction
  • Quickstart
    • 🔑Register
    • 💻Access the Console
    • 🎲Add a 3D Asset
    • 📤Share it with Others
    • ❔Troubleshooting
  • Web Console
    • 📦Load a Collection
    • 💼Manage Pages
      • Content Page
        • Assets and Targets
        • Add Content
        • Edit Content
        • Share Content
        • Access Permissions
        • Version Control
        • Asset Hierarchy
        • Bulk Actions on Assets
        • Asset Commenting
        • Activity Sidebar
      • Metadata & Tags Page
        • Collection Taxonomy and Asset Specific Metadata
        • How to Add and Edit Metadata
        • How to Add Associated Files and Text
      • Collections and Sharing Page
        • Users Tab
        • Groups Tab
        • Collections
        • Collection Sharing Tab
        • Asset Sharing Tab
        • Security Tab
      • Customizer Page
      • Model Editor Page
      • Scene Editor Page
    • 🚚Deliver Pages
      • Locations Page
      • Users Page
      • Insights Page
    • 🕛Optimize Pages
      • Convert & Compress Page
    • 🎓Learn Pages
      • Tutorials Page
    • 👤Account Page
      • Profile Tab
      • Email & Password
      • Plans Tab
      • Credit Usage Tab
      • Notifications Tab
      • Delete Account Tab
    • ❓Help Menu
    • ⏬Downloads
    • 🎨Themes
    • 🔎Search
  • API
    • 🧩Objects
    • 🗨️Queries
    • 📊Data
      • 📑What Metadata is Stored
    • 🔼Upload
    • 🔽Download
    • ❌Delete
    • 🌳Entry Hierarchy
    • 🔄Convert
    • 🔃Compress
    • 📁Organize
    • ⏪Version
    • ⏬Locate
    • 🔎Search
    • 🖼️Search by Image or Model
    • Share Content
  • Unity
    • 🔨Installation
    • 🧰Using the SDK
    • 🔧Script Settings
    • 📐Transforming Content
    • 👩‍💻Edit Code
    • 🤳Adding AR Capabilities
    • ❔Troubleshooting
  • Unreal 4
    • 🔨Installation
    • 🧰Using the SDK
    • 🔧Demo Project
  • Web
    • 🔨Installation
    • 🧰Using the Package
  • Scene Viewer
    • 📲Deploy Experience
    • 📐Transforming Content
    • 🔢Embed into Website or App
    • 👩‍💻Add Code
    • ❔Troubleshooting
  • AR.js
    • 📲Deploy Experience
    • 📐Transforming Content
    • 🔢Embed into Website or App
    • ❔Troubleshooting
  • FaceAR
    • 📲Deploy Experience
    • 📐Transforming Content
    • 🔢Embed into Website or App
    • ❔Troubleshooting
  • React Native
    • 📩Fetching Data
    • 👩‍💻Edit Code
    • 🤳Adding AR/VR Capabilities
    • 📐Transforming Content
  • Swift
    • 🔨Installation
    • 🔢Displaying a Model Asset
    • 🤳Adding AR Capabilities
    • 🧰Using the SDK
  • Flutter
    • 🔨Installation
    • 👩‍💻Edit Code
    • 🤳Adding AR Capabilities
  • JavaScript
    • 🔨Installation
    • 🧰Using the SDK
    • 📩Fetching Data
    • 👩‍💻Edit Code
  • Python
    • 🔨Installation
    • 🧰Using the SDK
    • 🔧Demo Project
  • NVIDIA Omniverse
    • 🔨Installation
  • Adobe Substance 3D Painter
    • 🔨Installation
  • 🧰Using the Plugin
  • Blender
    • 🔨Installation
    • 🧰Using the Add-on
  • eCommerce Sites
    • 🛒Shopify
    • 🌐Wix
  • 3D Content
    • 🎨Content Creation
    • 💎Google Poly
    • 📦Objaverse
    • 💫3D Capture Apps
      • MagiScan
      • Qlone
      • ARitize360
      • SCANN3D
      • 3D Scanner
      • Didimo Xperience
      • Scaniverse
      • Metascan3D
      • Polycam3D
      • RealityScan
Powered by GitBook
On this page
  • Moving, Scaling, and Rotating 3D Content
  • Using Touch Screen Gestures
  • Using Metadata
  • Adding Text to 3D Content
  • Muting 3D Content

Was this helpful?

  1. AR.js

Transforming Content

Learn how to move, scale, rotate, and add text to 3D content in AR.js.

PreviousDeploy ExperienceNextEmbed into Website or App

Last updated 1 year ago

Was this helpful?

Moving, Scaling, and Rotating 3D Content

Using Touch Screen Gestures

You can use touch screen gestures to temporarily transform 3D content.

Rotate content by taping the screen with one finger and moving the finger around the screen.

Scale content by pinching the screen with two fingers.

Using Metadata

You can use metadata to persistently transform 3D content.

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

Keyword

Type

Options

Effect

x

float

Any positive or negative number.

Default value is 0.

Moves the asset on the x-axis

y

float

Any positive or negative number.

Default value is 0.

Moves the asset on the y-axis

z

float

Any positive or negative number.

Default value is 0.

Moves the asset on the z-axis

scale

float

Any positive number.

Default value is 1.

Grows or shrinks the asset uniformly

height

integer

Any positive number.

Set the height of an image asset or a video asset

width

integer

Any positive number.

Set the width of an image asset or a video asset

xAngle

float

Any positive or negative number.

Default value is 0.

Rotates the model on the x-axis

yAngle

float

Any positive or negative number.

Default value is 0.

Rotates the model on the y-axis

zAngle

float

Any positive or negative number.

Default value is 0.

Rotates the model on the z-axis

Adding Text to 3D Content

The following keys are words the system uses as pre-defined metadata keys to add and design text:

Keyword

Type

Options

Description

text

string

Any string. The character ';' represents a line break.

Text to appear with the 3D content

textColor

string

Any color.

Default value is "white".

Color of the text

textPosition

float,float

Any pair of positive or negative numbers. Default value is "0,2"

Position of the text relative to the 3D content

textScale

float

Any positive number.

Default value is "2".

Scale of the text

textBackground

string

Any string.

Default is no background.

Color of the text background plane

textBackgroundHeight

float

Any positive number.

Default value is "1".

Height of the text background plane

textBackgroundWidth

float

Any positive number.

Default value is "1".

Width of the text background plane

If changes are not instantly visible try refreshing the browser after adding metadata for the changes to take effect.

Muting 3D Content

Muting is only supported for 3D videos.

The following key is a word the system uses as a pre-defined metadata key to mute a video:

Keyword

Type

Options

Effect

mute

boolean

Either 'true' or 'false'.

Default value 'false'.

Mute the sound of a video assets

Remember to refresh the browser after adding metadata with AR.js experiences for the changes to take effect.

If the content is too big or too small or if you'd like to move or rotate it, go back to the console and to affect its transformation. After adding or changing metadata you can instantly see the changes in the browser even while the experience is running.

If you'd like to annotate the content, go back to the console and to add text. After adding or changing metadata you can instantly see the changes in the browser even while the experience is running.

If you'd like to stop a video asset from playing sound as it is playing, go back to the console and to mute it. After adding metadata, refresh the browser.

📐
add metadata
add metadata
add metadata