Viewer style

Set the color and style of the environment.

Description

The following parts of the environment can be styled:

Background

Background color

Using the background-color parameter you can change the background color of the environment.

Parameter	Supported values	Default value
`background-color`	Hex color codes, without the leading hash-tag (#). or `transparent` or Hex color codes with opacity are also supported (FFFFFF50).	Set in CMS

Example

<iframe
    src="https://vulp.studio/foxmountain/moped/en-US?background-color=404040"
    allow="xr-spatial-tracking; fullscreen; web-share; clipboard-write"
    referrerpolicy="no-referrer-when-downgrade"
    width="600"
    height="510"
    frameBorder="0"
    title="Moped - vulp.studio"
></iframe>

Skydome

The skydome feature allows you to enable a skybox background (Set in CMS) and adjust the camera height relative to the floor.

Parameter	Supported values	Default value
`skybox`	`1` (on), `0` (off)	`0`
`skybox-height`	Centimeter (`cm`), millimeter (`mm`), or meter (`m`) Example: `160cm`, `1600mm`, `1.6m`	`1.6m`

Example

<iframe
    src="https://vulp.studio/foxmountain/moped/en-US?skybox=1&skybox-height=2m"
    allow="xr-spatial-tracking; fullscreen; web-share; clipboard-write"
    referrerpolicy="no-referrer-when-downgrade"
    width="600"
    height="510"
    frameBorder="0"
    title="Moped - vulp.studio"
></iframe>

Using the menu-color parameter you can change the color of the menu buttons. This sets the color for both the fill and the stroke of the menu buttons. Using menu-fill-color,menu-stroke-color and menu-icon-color it is possible to set a color for either the fill,the stroke or icon.

Parameter	Supported values	Default value
`menu-color`	Hex color codes, without the leading hash-tag (#). or Hex color codes with opacity are also supported (FFFFFF50).	`ffffff` (white)
`menu-fill-color`	Hex color codes, without the leading hash-tag (#). or Hex color codes with opacity are also supported (FFFFFF50).	Set in `menu-color`
`menu-stroke-color`	Hex color codes, without the leading hash-tag (#). or Hex color codes with opacity are also supported (FFFFFF50).	Set in `menu-color`
`menu-icon-color`	Hex color codes, without the leading hash-tag (#). or Hex color codes with opacity are also supported (FFFFFF50).	Set in `menu-color`

Example

<iframe
    src="https://vulp.studio/foxmountain/moped/en-US?menu-color=ffc800"
    allow="xr-spatial-tracking; fullscreen; web-share; clipboard-write"
    referrerpolicy="no-referrer-when-downgrade"
    width="600"
    height="510"
    frameBorder="0"
    title="Moped - vulp.studio"
></iframe>

Title

You can style the title using the following parameter:

Parameter	Supported values	Default value
`title-color`	Hex color codes, without the leading hash-tag (#). or Hex color codes with opacity are also supported (FFFFFF50).	Contrast color: `000000` (black) or `ffffff` (white)

Example

<iframe
    src="https://vulp.studio/foxmountain/moped/en-US?title-color=ffc800"
    allow="xr-spatial-tracking; fullscreen; web-share; clipboard-write"
    referrerpolicy="no-referrer-when-downgrade"
    width="600"
    height="510"
    frameBorder="0"
    title="Moped - vulp.studio"
></iframe>

Hotspots

You can style all hotspots globally using the following parameters. If you want to style specific types, use the information-hotspot-, customize-hotspot- or animation-hotspot- parameters instead (see below).

Parameter	Supported values	Default value
`hotspot-fill-color`	Hex color codes, without the leading hash-tag (#). or Hex color codes with opacity are also supported (FFFFFF50).	`ffffff` (white)
`hotspot-stroke-color`	Hex color codes, without the leading hash-tag (#). or Hex color codes with opacity are also supported (FFFFFF50).	`000000` (black)
`hotspot-icon-color`	Hex color codes, without the leading hash-tag (#). or Hex color codes with opacity are also supported (FFFFFF50).	`000000` (black)

Example

<iframe
    src="https://vulp.studio/foxmountain/moped/en-US?hotspot-fill-color=ffc800&hotspot-stroke-color=3a3733&hotspot-icon-color=ffffff"
    allow="xr-spatial-tracking; fullscreen; web-share; clipboard-write"
    referrerpolicy="no-referrer-when-downgrade"
    width="600"
    height="510"
    frameBorder="0"
    title="Moped - vulp.studio"
></iframe>

Information hotspots

The information hotspots can be styled using the following three parameters:

Using the information-hotspot-fill-color parameter you can change the fill color of the information hotspots.
Using the information-hotspot-stroke-color parameter you can change the stroke color of the information hotspots.
Using the information-hotspot-icon-color parameter you can change the icon color of the information hotspots.

Parameter	Supported values	Default value
`information-hotspot-fill-color`	Hex color codes, without the leading hash-tag (#). or Hex color codes with opacity are also supported (FFFFFF50).	`ffffff` (white)
`information-hotspot-stroke-color`	Hex color codes, without the leading hash-tag (#). or Hex color codes with opacity are also supported (FFFFFF50).	`ffffff` (white)
`information-hotspot-icon-color`	Hex color codes, without the leading hash-tag (#). or Hex color codes with opacity are also supported (FFFFFF50).	`000000` (black)

Example

<iframe
    src="https://vulp.studio/foxmountain/chair-preview/en-US?information-button=1&information-hotspot-fill-color=ffc800&information-hotspot-stroke-color=b8ecff&information-hotspot-icon-color=3a3733"
    allow="xr-spatial-tracking; fullscreen; web-share; clipboard-write"
    referrerpolicy="no-referrer-when-downgrade"
    width="600"
    height="510"
    frameBorder="0"
    title="Chair-Preview - vulp.studio"
></iframe>

Customize hotspots

The customize hotspots can be styled using the following three parameters:

Using the customize-hotspot-fill-color parameter you can change the fill color of the customize hotspots.
Using the customize-hotspot-stroke-color parameter you can change the stroke color of the customize hotspots.
Using the customize-hotspot-icon-color parameter you can change the icon color of the customize hotspots.

Parameter	Supported values	Default value
`customize-hotspot-fill-color`	Hex color codes, without the leading hash-tag (#). or Hex color codes with opacity are also supported (FFFFFF50).	`9b9b9b66` (gray with 40% opacity)
`customize-hotspot-stroke-color`	Hex color codes, without the leading hash-tag (#). or Hex color codes with opacity are also supported (FFFFFF50).	`ffffff` (white)
`customize-hotspot-icon-color`	Hex color codes, without the leading hash-tag (#). or Hex color codes with opacity are also supported (FFFFFF50).	`ffffff` (white)

Example

<iframe
    src="https://vulp.studio/foxmountain/moped/en-US?customize-button=1&customize-hotspot-fill-color=bdd7e380&customize-hotspot-stroke-color=ffc800&customize-hotspot-icon-color=3a3733"
    allow="xr-spatial-tracking; fullscreen; web-share; clipboard-write"
    referrerpolicy="no-referrer-when-downgrade"
    width="600"
    height="510"
    frameBorder="0"
    title="Moped - vulp.studio"
></iframe>

Animation hotspots

The animation hotspots can be styled using the following three parameters:

Using the animation-hotspot-fill-color parameter you can change the fill color of the animation hotspots.
Using the animation-hotspot-stroke-color parameter you can change the stroke color of the animation hotspots.
Using the animation-hotspot-icon-color parameter you can change the icon color of the animation hotspots.

Parameter	Supported values	Default value
`animation-hotspot-fill-color`	Hex color codes, without the leading hash-tag (#). or Hex color codes with opacity are also supported (FFFFFF50).	`9b9b9b66` (gray with 40% opacity)
`animation-hotspot-stroke-color`	Hex color codes, without the leading hash-tag (#). or Hex color codes with opacity are also supported (FFFFFF50).	`ffffff` (white)
`animation-hotspot-icon-color`	Hex color codes, without the leading hash-tag (#). or Hex color codes with opacity are also supported (FFFFFF50).	`ffffff` (white)

Example

<iframe
    src="https://vulp.studio/foxmountain/moped/en-US?animation-button=1&animation-hotspot-fill-color=bdd7e380&animation-hotspot-stroke-color=ffc800&animation-hotspot-icon-color=3a3733"
    allow="xr-spatial-tracking; fullscreen; web-share; clipboard-write"
    referrerpolicy="no-referrer-when-downgrade"
    width="600"
    height="510"
    frameBorder="0"
    title="Moped - vulp.studio"
></iframe>

The tooltips can be styled using the following two parameters:

Using the tooltip-background-color parameter you can change the the background color of the tooltips.
Using the tooltip-text-color parameter you can change the text color of the tooltip.

Parameter	Supported values	Default value
`tooltip-background-color`	Hex color codes, without the leading hash-tag (#). or Hex color codes with opacity are also supported (FFFFFF50).	`ffffff` (white)
`tooltip-text-color`	Hex color codes, without the leading hash-tag (#). or Hex color codes with opacity are also supported (FFFFFF50).	`000000` (black)

Please note that tooltips are hidden on small resolutions. The minimum height must be greater than 500px.

Example

<iframe
    src="https://vulp.studio/foxmountain/moped/en-US?tooltip-text-color=ffffff&tooltip-background-color=000000"
    allow="xr-spatial-tracking; fullscreen; web-share; clipboard-write"
    referrerpolicy="no-referrer-when-downgrade"
    width="600"
    height="510"
    frameBorder="0"
    title="Moped - vulp.studio"
></iframe>

↗ Open in new tab

Interaction prompt

Using the interaction-prompt parameter you can define whether the interaction prompt is shown or not. This interaction prompt instructs the user how to interact with the 3D model.

Parameter	Supported values	Default value
`interaction-prompt`	`auto` *or `none`	`auto`

Example

<iframe
    src="https://vulp.studio/foxmountain/moped/en-US?interaction-prompt=none"
    allow="xr-spatial-tracking; fullscreen; web-share; clipboard-write"
    referrerpolicy="no-referrer-when-downgrade"
    width="600"
    height="510"
    frameBorder="0"
    title="Moped - vulp.studio"
></iframe>

Model customization

Camera

Docs

Vulp

Title here

Viewer style

Description

Background

Background color

Example

Skydome

Example

Menu

Example

Title

Example

Hotspots

Example

Information hotspots

Example

Customize hotspots

Example

Animation hotspots

Example

Tooltip

Example

Interaction prompt

Example

Viewer style

Description#

Background#

Background color#

Example#

Skydome#

Example#

Menu#

Example#

Title#

Example#

Hotspots#

Example#

Information hotspots#

Example#

Customize hotspots#

Example#

Animation hotspots#

Example#

Tooltip#

Example#

Interaction prompt#

Example#

Description

Background

Background color

Example

Skydome

Example

Menu

Example

Title

Example

Hotspots

Example

Information hotspots

Example

Customize hotspots

Example

Animation hotspots

Example

Tooltip

Example

Interaction prompt

Example