Transforming Content
Learn how to move, scale, rotate, and add text to 3D content in AR.js.
Last updated
Was this helpful?
Learn how to move, scale, rotate, and add text to 3D content in AR.js.
Last updated
Was this helpful?
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.
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
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
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
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.