Viewer style

Set the color and style of the environment.

Description

The following parts of the environment can be styled:

  1. The background.
  2. The menus.
  3. The tooltips.
  4. The hotspots.

Background

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

Values

Default value

The default value for background-color is set in the Content Management System (CMS).

Possible values

Possible values are hex color codes (lowercase), without the leading hash-tag (#). The value transparent is also supported. Hex color codes with opacity are also supported (FFFFFF50).

Example 

  <iframe
      src="https://vulp.studio/foxmountain/moped/en-US?background-color=404040"
      allow="xr-spatial-tracking; fullscreen"
      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.

Values

Default value

The default value for menu-color is ffffff (white). Both menu-fill-color, menu-stroke-colorand menu-icon-color default to menu-color.

Possible values

Possible values are hex color codes (lowercase), without the leading hash-tag (#). Hex color codes with opacity are also supported (FFFFFF50).

Example 

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

Hotspots

Information hotspots

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

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

Values

Default value

The default value for information-hotspot-fill-color is ffffff (white). The default value for information-hotspot-stroke-color is also ffffff (white).

Possible values

Possible values are hex color codes (lowercase), without the leading hash-tag (#). Hex color codes with opacity are also supported (FFFFFF50).

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"
      allow="xr-spatial-tracking; fullscreen"
      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:

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

Values

Default value

The default value for customize-hotspot-fill-color is 9b9b9b66 (gray with 40% opacity). The default value for customize-hotspot-stroke-color is also ffffff (white). The default value for customize-hotspot-icon-color is also ffffff (white).

Possible values

Possible values are hex color codes (lowercase), without the leading hash-tag (#). Hex color codes with opacity are also supported (FFFFFF50).

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"
      referrerpolicy="no-referrer-when-downgrade"
      width="600"
      height="510"
      frameBorder="0"
      title="Moped - vulp.studio"
  ></iframe>

Tooltip

The tooltips can be styled using the following two parameters:

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

Values

Default value

The default value for tooltip-background-color is ffffff (white). The default value for tooltip-text-color is 000000 (black).

Possible values

Possible values are hex color codes (lowercase), without the leading hash-tag (#). Hex color codes with opacity are also supported (FFFFFF50).

Example 

  <iframe
      src="https://vulp.studio/foxmountain/moped/en-US?tooltip-text-color=ffffff&amp;tooltip-background-color=000000"
      allow="xr-spatial-tracking; fullscreen"
      referrerpolicy="no-referrer-when-downgrade"
      width="600"
      height="510"
      frameBorder="0"
      title="Moped - vulp.studio"
  ></iframe>
🗗 Open in new tab
← Model style
Camera →