This is the list of all the properties of the embed viewer. Each property is a single attribute on the HTML tag.

e.g. the scale property will be: <aryel-embed scale="2 2 2"></aryel-embed>.

Property Description Type Default
scale The scale of the object. Must be a 3D vector with three values (x y z). Vector3 1 1 1
position The position of the object. Must be a 3D vector with three values (x y z). Vector3 0 0 0
rotation The rotation of the object. Must be three values in degrees (x y z). String 0 0 0
button It enable the button in the viewer. If you specify a value for this attribute, the value will be the text of the button. If only the attribute is provided without a value, the text of the button will be “View in AR”. Attribute only or String
button-text-color Button text color. Hex color #fff
button-background-color Button background color. Hex color linear-gradient(315deg, #ff00cf 0%, #d800da 100%)
loader-color Loader color. Hex color #fc1aa0
disable-gestures Disable touch and drag gestures. Attribute only false
auto-rotate Enable auto rotate of object. Attribute only false
environment Specify a custom hdr background. String default-environment
show-environment Enable viewer background with the environment provided. Attribute only false
output-encoding 3D renderer output encoding. String linear
camera Camera settings. List of key-value parameters divided by semi-column fov: 75; near: 0.1; far: 1000; position: 0 0 30;
min-distance Minimum distance to zoom-in. Number 12
max-distance Maximum distance to zoom-out. Number 30
bloom Bloom settings. List of key-value parameters divided by semi-column strength: 0.25; threshold: 0; radius: 0;

<aside> 💡 Check the browser console if a property you set is not reflected in the viewer. If something is wrong with how you’ve written the attributes, it will be logged there.

</aside>

Scale

Define the scale of your 3D object.

<aryel-embed campaign="your-campaign-id" scale="3 3 3"></aryel-embed>

Position

Define the position of your 3D object.

<aryel-embed campaign="your-campaign-id" position="1 2 -4"></aryel-embed>

<aside> 💡 The position can also be used to correct a 3D model position if its origin coordinates are not aligned to its center.

</aside>

Rotation