Scene Settings

The look and feel of the configurator scene can be fully customized by setting the environment (background) and adjust the number and position of lights. You can pass a SceneSetting object using roomleConfigurator.getApi().loadSceneSettings which can have an environmentand lights.

Environment

The environment defines how the background of the furniture looks like. By default the GLTF background is loaded, which is a slightly grey object. Currently there are 4 different background types to choose from:

• Floor
• Image
• Color
• GLTF

You can find all the details in our reference: EnvironmentSetting.

Lights

Lights create the mood in which the furniture is presented. You can use different types of lights and place them around the scene.

You can find all the details in our reference: DynamicLight.

Example:

{
  "lights": [
    {
      "type": "rectarea",
      "name": "main",
      "intensity": 240,
      "color": "#ffffff",
      "position": {
        "x": -0.5,
        "y": 6,
        "z": 3
      },
      "target": {
        "x": 0,
        "y": 0,
        "z": 0
      },
      "castShadow": true,
      "width": 0.8,
      "height": 0.8
    },
    {
      "type": "spot",
      "name": "side",
      "intensity": 0.3,
      "color": "#ffffff",
      "position": {
        "x": 2,
        "y": 3,
        "z": 1.5
      },
      "target": {
        "x": 0,
        "y": 0.1,
        "z": 0
      },
      "castShadow": false,
      "angle": 50,
      "penumbra": 0.5
    },
    {
      "type": "spot",
      "name": "back",
      "intensity": 0.5,
      "color": "#ffffff",
      "position": {
        "x": 1,
        "y": 3,
        "z": -3
      },
      "target": {
        "x": 0,
        "y": 0.1,
        "z": 0
      },
      "castShadow": false,
      "angle": 150,
      "penumbra": 1
    },
    {
      "type": "ambient",
      "name": "ambient",
      "intensity": 0.3,
      "color": "#ffffff",
      "position": {
        "x": 0,
        "y": 0,
        "z": 0
      }
    }
  ]
}

Predefined light settings

You can also choose from a set of predefined light setting using the InitData param ls (light setting). All available lightsettings can be found in PREDEFINED_LIGHTSETTING.

Transparent background

Via InitData, you can remove the background of the scene completely allowing the embedding iframe to be transparent and elements behind it to be visible through the scene. Example (opens new window).

Embedding example

const configurator = await RoomleConfiguratorApi.create(
  "demoConfigurator",
  document.getElementById("configurator-container"),
  {
    id: '...',
    moc: true,
    transparentBackground: true,
  }
);

Query Parameter

&transparentBackground=true