# Scene settings
In the last section of the tutorial we will discuss how to adjust the scene in which the product is displayed. Right now we have the option to change the floor, the light settings and the background.
# Floor
For some products it makes sense to show them in a more realistic scenario. Therefore it makes sense to display a floor. This makes the scene more haptic and let it look less artificial. Therefore you only need to pass the ID of the floor material you want to set on the init method. In this example we use roomle_floor:EicheLondon but there are several more floors available. To know which you can use, just get in touch with us. In code this looks like:
await rubensConfiguratorApi.init(scene.value, {
initialFloorMaterial: 'roomle_floor:EicheLondon',
});
Of course you can always change the floor during runtime. Therefore just use changeFloorMaterial. For details how to do this see our reference.
# Light
It's very important to have a good light setting for each product. You can read about this here our reference. We won't go into details about the theory of light here. The specific parameters for each light can be found in our reference. In this example we will fade down the intensitiv of the main light and give it a warmer color temprature. Therefore the following parameters are adjusted:
{
"intensity": 100,
"color": "#bb9d8c"
}
We can do this by calling the method loadSceneSetting. To see the full JSON which is loaded see the file scene-settings.js (opens new window) in the sample Code Sandbox.
# Background
Our default background is just a grey color which tries to be a good fit for every product. Sometimes this does not match your expectations or it does not fit to the design of the app you embed the Roomle Web SDK. You can change the background to some color, background image or GLB. For more details see our reference. In this tutorial we will focus on a simple background image. Therefore you just need to add an environment to the loadSceneSetting call. Practically speaking this is the following JSON:
{
"environment": {
"type": "image",
"details": {
"imageUrl": "https://storage.googleapis.com/roomle-static/test/bg/bg_grey.jpg",
"color": null,
"material": null,
"fog": false
}
}
}
For more details about the options of the environment hash see our reference.
# Change scene settings
To see a difference between standard scene settings and the described settings above we create a button which loads the scene settings.
# Code Sandbox
To see the results of this chapter in code checkout the Code Sandbox: