Viewer style

Set the color and style of the environment.

Description

The following parts of the environment can be styled:

The background.
The menus.
The title.
The hotspots.
The tooltips.

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&amp;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&amp;hotspot-stroke-color=3a3733&amp;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&amp;information-hotspot-fill-color=ffc800&amp;information-hotspot-stroke-color=b8ecff&amp;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&amp;customize-hotspot-fill-color=bdd7e380&amp;customize-hotspot-stroke-color=ffc800&amp;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&amp;animation-hotspot-fill-color=bdd7e380&amp;animation-hotspot-stroke-color=ffc800&amp;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&amp;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

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

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 #

Description

Background

Background color

Example

Skydome

Example

Menu

Example

Title

Example

Hotspots

Example

Information hotspots

Example

Customize hotspots

Example

Animation hotspots

Example

Tooltip

Example