Documentation

# Move Camera

With the moveCamera API you can animate the camera angle and position freely within the scene.

RoomleConfigurator.moveCamera({
  yaw: -0.785,
  pitch: 0,
  distance: 1,
  targetX: 0,
  targetY: 0.5,
  targetZ: 0,
  blockOtherTweens: true,
});

For a full list and explanation of the parameters check the Camera Parameter Interface.

# Render image of current camera perspective

Here is an example of how to render an image with current camera perspective and then create new HTML img element.

const base64Image = await RoomleConfigurator.renderImage({
  useCurrentPerspective: true,
});
const img = document.createElement('img');
img.src = base64Image.image;
img.id = 'perspectiveImage';
img.style =
  'width: ' +
  base64Image.width +
  '; height: ' +
  base64Image.height +
  '; position: fixed; top: 0; right: 0; border: solid 1px black';
document.body.appendChild(img);

If you set the parameter to false it will use the default perspective.

# Manipulating the scene

With the getScene and updateScene APIs it's possible to get the current three.js scene (opens new window) (as a reference) and therefore delete and add objects as you need. After you've changed the scene you need to call updateScene to re-render the scene and reflect your changes.

For example if you want to see which objects are present in the scene you can call

const sceneObjects = RoomleConfigurator.getScene().children;

You can then remove or manipulate the scene objects. If you want to add a new object to the scene you can call

const object = new THREE.Object3D();
// set material, geometry etc.
RoomleConfigurator.getScene().add(object);
RoomleConfigurator.updateScene();

WARNING: Depending on what you change in the scene, the use of this API may break behaviour/funcionality of the configurator!

# Interacting with the scene by runtime id

The runtime id is the ID which can be used to identify objects within the scene. There are several ways to retrieve the runtime id but the most general approach is to use the part list. Therefore you need to listen to part list changes. How this works is explained in chapter 4. But to recap quickly what you need:

configuratorInstance.callbacks.onPartListUpdate = (...args) => console.log(...args);

You will see that the part list has the key perMainComponent, which is an array of "parts". Each "part" consists of the properties "fullList", "originPart" and again "perMainComponent". For this example only the "originPart" is interesting. The origin part has a key called subpartId. This subpartId is the same as our runtime id. So we need to collect those IDs so we can use it later.

# Select a component by it's runtime id

To select a component you simply need to find the runtime id or subpartId you want to select. Then you can call:

const runtimeId = 1; // Just some random number, see how to get the real numbers from the sections above
configuratorInstance.selectComponent(runtimeId);

# Change a components parameter by the runtime id of the component

If you want to set the parameter of a component you need to use the runtime id or subpartId and call the following method:

const runtimeId = 1; // Just some random number, see how to get the real numbers from the sections above
configuratorInstance.setComponentParameter(runtimeId, parameter, value);

Some things to note: the parameter should be an instance of a kernel parameter. How you can retrieve them is explained in chapter 2. If you do not have access to the parameters and if you do not need validation of the value you want to set then you can just pass in the following object {key: "key-of-your-parameter"}. The value needs to be a string. We do the conversion internally.

← UI customization →