Model style

Set the default color of your model and style its shadow.

Description

The model can be styled in two ways:

  1. Using the color or color-<group> parameter you can define the default color of your model.
  2. Using the shadow-intensity parameter you can define the appearance of the shadow of your model.

Color

To color a virtual product you have two options:

  1. For single color changes the color parameter can be used to define the default color of your model.
  2. For multiple color changes the color-<group> parameter can be used to define the default color of a part of your model.

By default, only supported colors from the CMS can be chosen. If defined on the model, it is also possible to use custom colors.

  1. For models with a single color, the custom-color parameter can be used to define the default custom color of your model.
  2. For models with multiple colors, the custom-color-<group> parameter can be used to define the default custom color of a part of your model.
ParameterSupported valuesDefault value
colorThe possible values are depending on your model. All values are lowercase alpha-numeric.Set in CMS
color-<group>The possible values are depending on your model. All values are lowercase alpha-numeric.Set in CMS
custom-colorThe possible values are depending on the supported color systems of your model. All values are lowercase alpha-numeric, a dash is used as separator.Set in CMS
custom-color-<group>The possible values are depending on the supported color systems of your model. All values are lowercase alpha-numeric, a dash is used as separator.Set in CMS

Color example 

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

Color-<group> example 

  <iframe
      src="https://vulp.studio/foxmountain/moped/en-US?color-body=green"
      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>

Custom color example

A custom color is identified by two components:

  1. A color system, for example ral.
  2. A color identifier, for example 2007.

In order to set a default custom color, two parameters need to be defined:

  1. The color (or color-<group>) parameter should to be set to the identifier of the custom color.
  2. The custom-color (or custom-color-<group) parameter should be set to the custom color. The custom color is identified by the color system and color identifier, which should be separated by a dash (-).

Custom color example 

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

Color-<group> custom color example 

  <iframe
      src="https://vulp.studio/foxmountain/moped/en-US?color-body=custom&amp;custom-color-body=ral-2007"
      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>

Shadow intensity

Using the shadow-intensity parameter you can define the appearance of the shadow of your model.

ParameterSupported valuesDefault value
shadow-intensityA value between 0.0 and 10.0Set in CMS

Example 

  <iframe
      src="https://vulp.studio/foxmountain/moped/en-US?shadow-intensity=3.0"
      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>
← Attributes
Model customization →