Change floor material

This guide provides instructions on how to change the floor material in the Rubens Configurator using the Roomle Configurator API. The API allows you to modify the environment of the 3D configurator, including changing the floor material dynamically.

Firstly you have to embed the Rubens configurator in you environment, how you can do this you can find here: Getting started

Code Sandbox

If you want to just copy and paste an existing code example or want to have a quick overview you can check this Code Sandbox.

Change the floor color

For changing the floor color you can use the method RoomleConfigurator.extended.changeFloorMaterial, if you want to know more about our api functions you can have a look in our integration guide: Trigger API functions

Here is a small code example how this could look in your code:

const configurator = await RoomleConfiguratorApi.create(
    configuratorId,
    domElement,
    {}
  );
  // load an item
  await configurator.ui.loadObject("usm:frame");

  // change material of floor
  configurator.extended.changeFloorMaterialById("roomle_floor:DresdenEiche");

In this example we firstly initilise our configurator and load an item, afterwards we change the floor material.

Floor material id's

There are different floor materials which can be set:

• roomle_floor:DresdenEiche

• roomle_floor:Palma

• roomle_floor:Elba

• roomle_floor:Manacor

• roomle_floor:KernEiche

• roomle_floor:KieferScandic

• roomle_floor:EicheHabsburg

• roomle_floor:FuldaKiefer

• roomle_floor:Ashton

• roomle_floor:EicheLondon

• roomle_floor:Ibiza

Helpful links:

Rubens SDK API functions: RoomleConfigurator.default