Customization
Adding URL parameters (so called url options) allows you to control different aspects of the model viewer: UI elements, environment, camera behavior, annotations and animations.
There are three places you can put the url options:
In the url
https://viewer.rooom.com/product/e725a9e18cb87bbc2977b73d4bdc65?autospin=1&autostart=1&bg_color=ffd700In the
srcattribute of embedded iframes
html
<iframe
src="https://viewer.rooom.com/product/e725a9e18cb87bbc2977b73d4bdc65?autospin=1&autostart=1&bg_color=ffd700"
></iframe>- During initialization of the Viewer API
Options
General
| Name | Type | Default | Description |
|---|---|---|---|
| autospin | number | 0 | Setting to any other number will cause the model to automatically spin around the y-axis after loading. |
| autostart | boolean | false | Setting to true will make the model load immediately once the page is ready, rather than waiting for a user to click the Play button. |
| preload | boolean | true | Setting to true will force all resources (textures) to download before the scene is displayed. |
| fallback_lang | string | 'de' | Setting the language for UI elements and text, when the browser locale are not supported (german = de / english = en / italian = it / ...) |
| lang | string | '' | Setting the language for UI elements & text and ignore the browser language (german = de / english = en / italian = it / ...) |
| render_background | boolean | false | Setting to true will force to render the scene in background (Has impact on the performance). |
| start_ar | boolean | false | Setting to true will force the AR mode after start. |
Environment
| Name | Type | Default | Description |
|---|---|---|---|
| bg_color | string | 'ffffff' | Setting to a hexadecimal color code (without the #) will change the color of the background. |
| env_intensity | number | 1.5 | Setting the intensity for the scene environment map. |
| mirror | boolean | true | Setting to false will disable the mirror under the model. |
| skybox | boolean | true | Setting to false will make the skybox invisible (transparent=true - skybox is forced set to false). |
| transparent | boolean | false | Setting to true will make the model's background and preview image transparent. This is useful for overlaying models on your website elements. |
| highlight_color | string | '' | Setting the default highlight color. |
Animations
| Name | Type | Default | Description |
|---|---|---|---|
| animations | boolean | true | Setting to false will disable all animations on object. |
| animation_play | number | -1 | Setting to a number greater than -1 will play the animation with index X after viewer start. |
| animation_loop | boolean | false | Setting to true will enable the loop-mode for "animation_play" animation. |
Annotations
| Name | Type | Default | Description |
|---|---|---|---|
| annotations | boolean | true | Setting to false will disable all annotations on object. |
| annotations_type | string | 'point' | Setting to 'line' will show the annotations as lines / flags. |
| annotations_show | boolean | false | Setting to true will show all annotations at the same time. |
| annotation_show | number | -1 | Setting to a number greater than 0 will show the annotation with index X after viewer start. |
| annotation_marker_color | string | 'ffffff' | Setting to a hexadecimal color code (without the #) will change the color of the annotation marker. |
| annotation_marker_size | number | 1 | Setting a different size (in centimeter) for annotation marker. Relative to mesh scaling. |
| annotations_auto_duration | number | 2500 | Setting that defines the duration between each iteration from the annotation autopilot. |
| annotations_autoplay | boolean | false | Setting that starts the autopilot. |
Object
| Name | Type | Default | Description |
|---|---|---|---|
| backface | boolean | false | Setting to true will show always the mesh - front and back (double sided). |
| material_sheen | number | 0 | Setting the sheen intensity on material (0 = off / 0...1 = intensity). |
| max_texture_size | number | 8192 | Setting to a positive number will limit all textures to that maximum resolution (longest side in pixels). This should be a "power of 2" value such as 32, 128, 256, 512, etc. |
| mobile_max_texture_size | number | 2048 | Setting to a positive number will limit all textures to that maximum resolution on mobile devices (longest side in pixels). This should be a "power of 2" value such as 32, 128, 256, 512, etc. |
| shadow_plane | boolean | true | Setting to false will disable the shadow plane below the mesh. |
Performance Optimizations
| Name | Type | Default | Description |
|---|---|---|---|
| perf_texture_optimized | boolean | false | Setting to true will load the optimized textures (ktx2) - if file is available and the format is supported on client-browser. |
Augmented Reality
| Name | Type | Default | Description |
|---|---|---|---|
| ar_scale | boolean | true | Setting the scale mode for android and ios devices (fixed = false, auto = true) |
| ar_animated | boolean | true | Setting to false will disable the animations and export the glb as static model |
| ar_placement | string | 'floor' | Setting to "wall" will enable the placement for walls |
| ar_occlusion | boolean | true | Setting to 0 will disable occlusion |
Virtual Reality
| Name | Type | Default | Description |
|---|---|---|---|
| vr_scale | number | 1 | Scale factor of the object in VR |
| vr_floor_height | number | 0 | Set the Y camera position from floor (in meters) |
| vr_camera_distance | number | 1.8 | Set the Z Camera distance from object (in meters) |
Camera
| Name | Type | Default | Description |
|---|---|---|---|
| camera_collision | boolean | true | Setting to false will skip the collider, and you can go through the model. |
| camera_constraint_pitch_down | number | 0 | Setting alpha to [-90 – 90] (in degrees) will define the camera's pitch down rotation limit. Help |
| camera_constraint_pitch_up | number | 0 | Setting alpha to [-90 – 90] (in degrees) will define the camera's pitch up rotation limit. Help |
| camera_constraint_yaw_left | number | 0 | Setting beta to [-180 – 180] (in degrees) will define the camera's yaw left rotation limit. Help |
| camera_constraint_yaw_right | number | 0 | Setting beta to [-180 – 180] (in degrees) will define the camera's yaw right rotation limit. Help |
| camera_limit | boolean | true | Set pitch and yaw rotation limit to default. |
| camera_fov | number | 45 | Sets the field of view for active camera in degrees |
| camera_panning_axis | string | 'xyz' | Setting to '' will prevent to pan the camera (panning axis defined). |
| camera_zoom_auto | boolean | true | Setting to false will skip the automatic scaling from upperRadiusLimit (camera_zoom_max) and lowerRadiusLimit (camera_zoom_min) - Distance. |
| camera_zoom_max | number | 20 | Setting to a positive number will define the camera zoom out limit (maximum distance from the model). |
| camera_zoom_min | number | 0.003 | Setting to a positive number will define the camera zoom in limit (minimum distance from the model). |
| camera_zoom_start | number | 0 | Set the start zoom distance. (0 = optimal radius) |
| camera_wheel_multiplier | number | 1 | Set the wheel speed |
| camera_clipping_auto | boolean | true | Setting to false will skip the automatic scaling from camera minZ und maxZ |
| camera_clipping_min | number | 0.3 | Setting to a positive number will define the camera min clipping limit (near clipping plane) (calculated automatically by default) |
| camera_clipping_max | number | 100 | Setting to a positive number will define the camera max clipping limit (far clipping plane) (calculated automatically by default) |
| camera_target | string | '' | Specify the start camera target x, y, z. |
| camera_pivot | string | 'middle' | Can be 'middle' or 'origin'. Middle means center of the bounding box and origin is the center of the bounding box with y=0. It gets overwritten by camera_target. |
User-Interface
| Name | Type | Default | Description |
|---|---|---|---|
| ui_animations | boolean | true | Setting to false will hide the animation menu, if animations are available. |
| ui_annotations | boolean | true | Setting to false will hide the Annotation menu. |
| ui_ar | boolean | true | Setting to false will hide the View in AR button. |
| ui_ar_link | string | '' | Setting the custom url for the AR screen with qr code. |
| ui_color_primary | string | '' | Setting to a hexadecimal color code (without the #) for primary colors. |
| ui_color_secondary | string | '' | Setting to a hexadecimal color code (without the #) for secondary colors. |
| ui_color_accent | string | '' | Setting to a hexadecimal color code (without the #) for accent colors. |
| ui_text_primary | string | '' | Setting to a hexadecimal color code (without the #) for primary text. |
| ui_text_secondary | string | '' | Setting to a hexadecimal color code (without the #) for secondary text. |
| ui_controls | boolean | true | Setting to false will hide all the viewer controls at the bottom of the viewer (Help, AR, Fullscreen, Annotations and Animations). |
| ui_fullscreen | boolean | true | Setting to false will hide the Fullscreen button. |
| ui_general_controls | boolean | true | Setting to false will hide main control buttons in the bottom right of the viewer (Help, AR, Fullscreen). |
| ui_header_btn_image | string | '' | Setting a link to an image add for the button in the top right corner a icon. |
| ui_header_btn_link | string | '' | Setting a link add a button in the top right corner, as a custom button. |
| ui_help | boolean | true | Setting to false will hide the Help button. |
| ui_hint | number | 1 | Setting to 0 will always hide the viewer hint animation ("click & hold to rotate"). Setting to 1 will show the hint the first time per browser session (using a cookie). Setting to 2 will always show the hint. |
| ui_hint_color | string | '' | Setting a Hex-Color as String of 3 or 6 Chars will alter the text-color of the hint. |
| ui_hint_shadow | boolean | true | Setting to false will not display a small shadow under the hint. |
| ui_infos | boolean | true | Setting to false will hide the model info bar at the top of the viewer. |
| ui_infos_persist | boolean | false | Setting to true will show the model info bar at the top of the viewer in 3d mode too. |
| ui_logo | boolean | true | Setting to false remove the rooom logo. |
| ui_logo_link | boolean | true | Setting to false remove the link from the rooom logo. |
| ui_progress_bg | boolean | true | Setting to false remove the background on loading screen. |
| ui_progress_bg_color | string | '414753e5' | Setting to a hexadecimal color code (without the #, 8-digits with alpha) will change the background color of the viewer while loading. |
| ui_progress_logo | string | '' | Setting to a url will change the image of the viewer loading screen. |
| ui_progress_minimal | boolean | false | Setting to true show only the progressbar in loading screen. |
| ui_scroll_catch | boolean | false | Setting to to true enable scroll in embedded viewer without additional actions. |
| ui_share | boolean | true | Setting to true will show the share button. |
| ui_stats | boolean | false | Setting to true will show the Performance Monitor. |
| ui_stop | boolean | false | Setting to false will hide the "Disable Viewer" button in the top right so that users cannot stop the 3D render once it is started. |
| ui_vr | boolean | true | Setting to false will hide the View in VR button. |
| ui_zoom | boolean | false | Setting to true will show the zoom control buttons. |