Skip to main content

Properties

How to manage properties

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>.

PropertyDescriptionTypeDefaultNotes
scaleThe scale of the object. Must be a 3D vector with three values (x y z).Vector31 1 1
positionThe position of the object. Must be a 3D vector with three values (x y z).Vector30 0 0
rotationThe rotation of the object. Must be three values in degrees (x y z).Vector30 0 0
buttonEnables the button in the viewer. You can also customize the button text and the behaviour of the experience AR viewerList of key-value parameters divided by semi-columntext: View in AR; return: false
button-styleButton style.StringAryel's button styleDeprecated. Look at aryel-embed-button slot.
loaderCustomize the loader style.List of key-value parameters divided by semi-columncolor: #fc1aa0
gesturesCustomize how the user can interact with the viewer.List of key-value parameters divided by semi-columnpan: true; zoom: true; rotate: true; damping: true; auto-rotate: 0; min-zoom: 0; max-zoom: 5; helper: true;
environmentSpecify a custom hdr background and if it's visible.List of key-value parameters divided by semi-columnsrc: Aryel's default hdr; visible: false; enable: true;
rendererSpecify the viewer rendering behavior.List of key-value parameters divided by semi-columncorrect-lights: true; output-encoding: sRGB; exposure: 1.2
cameraCamera settings.List of key-value parameters divided by semi-columnfov: 50; near: 0.1; far: 1000; position: 0 0 1;
shadowGlobal shadow settingsList of key-value parameters divided by semi-columncolor: #000000; opacity: 0.075;
bloomBloom settings.List of key-value parameters divided by semi-columnstrength: 0.25; threshold: 0; radius: 0;
ambient-occlusionAmbient occlusion settings.List of key-value parameters divided by semi-columnkernel-radius: 8; kernel-size: 32; min-distance: 0.005; max-distance: 0.1;
gridEnable grid.Attribute onlyDisabled

Scale

Define the scale of your 3D object.

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

The model is already scaled to fit its container height. Keep this in mind when setting the scale attribute. Setting scale 2 2 2 will scale the model to double its size after it's scaled to fit the container.

Position

Define the position of your 3D object.

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

Rotation

Define the rotation of your 3D object. The rotation values must be defined in degrees.

<aryel-embed campaign="your-campaign-id" rotation="90 180 90"></aryel-embed>

Button

Enable the button in the viewer. If has been provided a property with no value, the button will be displayed with the text “View in AR”.

<aryel-embed campaign="your-campaign-id" button></aryel-embed>

You can also customize the button text or the AR experience behaviour.

<aryel-embed
campaign="your-campaign-id"
button="text: Display in AR space; return: true"
></aryel-embed>
tip

Setting return: true in the attribute value will tell the AR viewer to come back to the page where the embed viewer is located as soon as the user leaves the AR viewer.

Available properties

KeyValueDefault
textstringView in AR
returnbooleanfalse

Button style

Customize the appearance of the button.

<aryel-embed
campaign="your-campaign-id"
button
button-style="background-color: orange; color: white; padding: 10px 20px;"
></aryel-embed>
note

This property requires button attribute to be defined.

Loader

Customize the appearance of the loader.

<aryel-embed campaign="your-campaign-id" loader="color: #346beb"></aryel-embed>

Available properties

KeyValueDefault
colorhex color#fc1aa0

Gestures

Customize how the user can interact with the viewer.

<aryel-embed
campaign="your-campaign-id"
gestures="pan: false; zoom: false; rotate: false; damping: false; auto-rotate: 3;"
></aryel-embed>
note

The gestures helper is enabled by default but if all the gestures are disabled, also the helper will be disabled.

Available properties

KeyValueDefault
panbooleantrue
zoombooleantrue
rotatebooleantrue
dampingbooleantrue
auto-rotatenumber0
min-zoomnumber0
max-zoomnumber5
helperbooleantrue

Environment

Define a custom environment and its visibility. The environment must be an .hdr file.

<aryel-embed
campaign="your-campaign-id"
environment="src: https://domain.com/path/to/my/hdr-file.hdr; visible: true; enable: true;"
></aryel-embed>

Available properties

KeyValueDefault
srcstringAryel's default hdr
visiblebooleanfalse
enablebooleantrue

Renderer

Customize how the 3D rendering engine behaves.

<aryel-embed
campaign="your-campaign-id"
renderer="correct-lights: true; output-encoding: linear; exposure: 1"
></aryel-embed>

Available properties

KeyValueDefault
correct-lightsbooleantrue
output-encodinglinear | sRGBsRGB
exposurenumber1.2

Camera

Defines the settings of the camera.

<aryel-embed
campaign="your-campaign-id"
camera="fov: 50; near: 0.1; far: 1000; position: 0 0 3;"
></aryel-embed>

Available properties

KeyValueDefault
fovnumber50
nearnumber0.1
farnumber1000
positionvector30 0 1

Shadow

Defines the global settings for shadows.

<aryel-embed
campaign="your-campaign-id"
shadow="color: #000000; opacity: 0.075;"
></aryel-embed>

Available properties

KeyValueDefault
colorhex color#000000
opacitynumber0.075
note

This option requires at least one light with an enabled shadow. Otherwise it will be unnecessary.

Bloom

Defines the settings of the camera.

<aryel-embed
campaign="your-campaign-id"
bloom="strength: 0.5; threshold: 0; radius: .25"
></aryel-embed>

Available properties

KeyValueDefault
strengthnumber0.25
thresholdnumber0
radiusnumber0

Ambient occlusion

Defines the settings of the camera.

<aryel-embed
campaign="your-campaign-id"
ambient-occlusion="kernel-radius: 4; kernel-size: 16; min-distance: 0.01; max-distance: 0.2"
></aryel-embed>

Available properties

KeyValueDefault
kernel-radiusnumber8
kernel-sizenumber32
min-distancenumber0.005
max-distancenumber0.1

Grid

Enable the grid in the viewer.

<aryel-embed campaign="your-campaign-id" grid></aryel-embed>
note

The grid is made for testing purposes. You should disabled it on live pages.