docs

Common Core

UI API

showStats(): void

Show overlay with statistic data for:

fps
memory in MB
number of draw calls
number of poly/triangle count
number of geometries
number of textures

Url Params / Init params

enableHD

usage: enableHD=true
default: true
description: enables ambient occlusion, soft shadows, etc

stats

usage: stats=true
default: false
description: enables overlay for statistic data (see showStats()), WARNING: disables HD in planner

Scene settings

Scene settings are currently supported by HSC only. They can be set with RoomleConfigurator.loadSceneSettings("url to json")

{
environment: {}
lights: []
}

Dynamic light settings

Dynamic light setting is part of the scene settings and can be used to define multiple light within the scene. Current light settings can be shown in GUI by calling RoomleConfigurator.showGUI()

declare interface DynamicLight {
    type: string;
    name?: string;
    intensity?: number;
    color?: string;
    position?: Vector3;
    target?: Vector3;
    castShadow?: boolean;
    angle?: number;
    penumbra?: number;
    width?: number;
    height?: number;
    movesWithCamera?: boolean;
}

Description of fields:

type: 'ambient'/'rectarea'/'spot'
name: set a name for this light to identify it more easily
intensity: light intensity/brightness
color: light color as hex ('#ffffff')
position: position of the light, for example {"x": 0,"y": 0, "z": 0}, coords are right hand y up
target: position to which the light should shine, defaults to center
castShadow: defines if this light casts shadows
angle: used for spotlights, defines the light cone of the spotlight
penumbra: used for spotlights, defines how hard the edges of the light are
width: used for rect area light, width of the area
height: used for rect area light, height of the area
movesWithCamera: if true the light will always have the same position and angle as the camera

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": "ambient",
      "name": "ambient",
      "intensity": 0.3,
      "color": "#ffffff",
      "position": {
        "x": 0,
        "y": 0,
        "z": 0
      }
    }
  ]
}

Dynamic environment settings

Dynamic environment settings can be used to select which environment is used.

Example

{
"environment": {
    "type": "image",
    "details": {
      "imageUrl": "https://storage.googleapis.com/roomle-static/test/bg/bg_grey.jpg"
    }
  }
}

Available environment types

"type": "floor"/"image"/"color"/"gltf"

Type floor

"details": {
"material": "roomle_floor:DresdenEiche"
}

Available floor materials

roomle_floor:DresdenEiche
roomle_floor:Ibiza
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

Type image

"details": {
"imageUrl": "https://storage.googleapis.com/roomle-static/test/bg/bg_grey_shine.jpg"
}

Type color

"details": {
"color": "#ff0000"
}

Type gltf

Type gltf does not have any details yet

Configurator Core

UI API

enableMeshSelection(enabled: boolean): void

By default the outline pass uses the bounding box mesh of each component to highlight the object. When mesh selection is enabled, the meshes of the object are used directly. This is the recommended setting for non square/rectangular (shelf) components like sofas.

zoomIn(value?: number): void

Moves the camera closer to the object. Default value (when no value given) is 4, higher value moves a bigger distance.

zoomOut(value?: number): void

Moves the camera away from the object. Default value (when no value given) is 4, higher value moves a bigger distance.

UI Callback

onZoomChange(minZoom: boolean, maxZoom: boolean): void

Gets called when min zoom (as far away as possible) or max zoom (as near as possible) changes. Example: onZoomChange(true, false) Example: onZoomChange(false, false) Example: onZoomChange(false, true)

Url Params / Init params

usage: ls=sofa
default: none
description: predefined light setting, eg sofa. Currently available: sofa, shelf

retina

usage: retina=true
default: false
description: when set to true, hsc and hsp use original device pixel ratio. Makes everything sharper drops frames to half

meshSelection

usage: meshSelection=true
default: false
description: By default the outline pass uses the bounding box mesh of each component to highlight the object. When mesh selection is enabled, the meshes of the object are used directly. This is the recommended setting for non square/rectangular (shelf) components like sofas.

cameraRestriction

usage: cameraRestriction=45
default: not set -> no camera restriction
description: when set this param restricts the camera rotation to the given angle (e.g. 45 degree), this overrides minHorizontalCameraAngle and maxHorizontalCameraAngle

minVerticalCameraAngle

usage: minVerticalCameraAngle=45
default: not set -> no camera angle restriction
description: when set this param restricts the down/vertical camera rotation to the given angle (e.g. 45 degree)

maxVerticalCameraAngle

usage: maxVerticalCameraAngle=45
default: not set -> no camera angle restriction
description: when set this param restricts the up/vertical camera rotation to the given angle (e.g. 45 degree)

minHorizontalCameraAngle

usage: minHorizontalCameraAngle=45
default: not set -> no camera angle restriction
description: when set this param restricts the left/horizontal camera rotation to the given angle (e.g. 45 degree)

maxHorizontalCameraAngle

usage: maxHorizontalCameraAngle=45
default: not set -> no camera angle restriction
description: when set this param restricts the right/horizontal camera rotation to the given angle (e.g. 45 degree)

alwaysUseCache

usage: alwaysUseCache=true
default: not set -> assets fetched from url, set -> assets from cache
description: when set to true and assets were prechaced by the asset loader they are returned from cache. Otherwise we always return a fresh copy from network

customApiUrl

usage: customApiUrl='http://custom-api-url/v2'
default: when set the customApiUrl is used instead of the defined one
description: this can be used in conjunction with a reverse proxy to get rid of the OPTIONS calls, which can create a big delay if network has a huge latency

transparentHighlighting

usage: transparentHighlighting=false
default: true
description: if set to true, components which are between the camera and the selected component/preview will be rendered transparent

Planner Core

Url Params / Init params

mode

usage: mode=2D
default: 3D
description: select in which perspective the planner should start: 2D, 3D or FP (first person)

UI Callback

onCompletelyLoaded(): void

Gets called when the plan is completely loaded on only assets are missing

onItemsLoaded(): void

Gets called when the plan and all items is loaded

onCameraChanged(type: CAMERA_TYPE): void

Gets called when the current camera changed:

export const enum CAMERA_TYPE {
    CAMERA_2D = '2D',
    CAMERA_3D = '3D',
    CAMERA_FP = 'FP'
}

onTotalFloorAreaChanged(totalFloorArea: number): void

Gets called when the total floor area (size of the apartment/house) changes. Also fires once the total area is available

PreviousCHANGELOG NextRoomle Web SDK

Last updated 3 months ago