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.

ParameterSupported valuesDefault value
background-colorHex 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>

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.

ParameterSupported valuesDefault value
menu-colorHex color codes, without the leading hash-tag (#).
or Hex color codes with opacity are also supported (FFFFFF50).		ffffff (white)
menu-fill-colorHex color codes, without the leading hash-tag (#).
or Hex color codes with opacity are also supported (FFFFFF50).		Set in menu-color
menu-stroke-colorHex color codes, without the leading hash-tag (#).
or Hex color codes with opacity are also supported (FFFFFF50).		Set in menu-color
menu-icon-colorHex 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>

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.
ParameterSupported valuesDefault value
information-hotspot-fill-colorHex color codes, without the leading hash-tag (#).
or Hex color codes with opacity are also supported (FFFFFF50).		ffffff (white)
information-hotspot-stroke-colorHex 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/chair-preview/en-US?information-button=1&amp;information-hotspot-fill-color=ffc800&amp;information-hotspot-stroke-color=b8ecff"
      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:

  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.
ParameterSupported valuesDefault value
customize-hotspot-fill-colorHex 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-colorHex color codes, without the leading hash-tag (#).
or Hex color codes with opacity are also supported (FFFFFF50).		ffffff (white)
customize-hotspot-icon-colorHex 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>

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.
ParameterSupported valuesDefault value
tooltip-background-colorHex color codes, without the leading hash-tag (#).
or Hex color codes with opacity are also supported (FFFFFF50).		ffffff (white)
tooltip-text-colorHex 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?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>
← Model customization
Camera →