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

Property	Description	Type	Default	Notes
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).	Vector3	0 0 0
button	Enables the button in the viewer. You can also customize the button text and the behaviour of the experience AR viewer	List of key-value parameters divided by semi-column	text: View in AR; return: false
button-style	Button style.	String	Aryel's button style	Deprecated. Look at aryel-embed-button slot.
loader	Customize the loader style.	List of key-value parameters divided by semi-column	color: #fc1aa0
gestures	Customize how the user can interact with the viewer.	List of key-value parameters divided by semi-column	pan: true; zoom: true; rotate: true; damping: true; auto-rotate: 0; min-zoom: 0; max-zoom: 5; helper: true;
environment	Specify a custom hdr background and if it's visible.	List of key-value parameters divided by semi-column	src: Aryel's default hdr; visible: false; enable: true;
renderer	Specify the viewer rendering behavior.	List of key-value parameters divided by semi-column	correct-lights: true; output-encoding: sRGB; exposure: 1.2
camera	Camera settings.	List of key-value parameters divided by semi-column	fov: 50; near: 0.1; far: 1000; position: 0 0 1;
shadow	Global shadow settings	List of key-value parameters divided by semi-column	color: #000000; opacity: 0.075;
bloom	Bloom settings.	List of key-value parameters divided by semi-column	strength: 0.25; threshold: 0; radius: 0;
ambient-occlusion	Ambient occlusion settings.	List of key-value parameters divided by semi-column	kernel-radius: 8; kernel-size: 32; min-distance: 0.005; max-distance: 0.1;
grid	Enable grid.	Attribute only	Disabled

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

Key	Value	Default
text	string	View in AR
return	boolean	false

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

Key	Value	Default
color	hex 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

Key	Value	Default
pan	boolean	true
zoom	boolean	true
rotate	boolean	true
damping	boolean	true
auto-rotate	number	0
min-zoom	number	0
max-zoom	number	5
helper	boolean	true

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

Key	Value	Default
src	string	Aryel's default hdr
visible	boolean	false
enable	boolean	true

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

Key	Value	Default
correct-lights	boolean	true
output-encoding	linear | sRGB	sRGB
exposure	number	1.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

Key	Value	Default
fov	number	50
near	number	0.1
far	number	1000
position	vector3	0 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

Key	Value	Default
color	hex color	#000000
opacity	number	0.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

Key	Value	Default
strength	number	0.25
threshold	number	0
radius	number	0

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

Key	Value	Default
kernel-radius	number	8
kernel-size	number	32
min-distance	number	0.005
max-distance	number	0.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.