ReadonlyanimationsA dictionary of all animations that are currently present in the parts of the scene tree relevant to this viewport.
The rotation factor that is used when exporting the scene for AR (Augmented Reality). The unit system used by AR is meter.
The scaling factor that is used when exporting the scene for AR (Augmented Reality).
The unit system used by AR is meter, therefore this scaling factor needs to be chosen such that scene coordinates are transformed to meters.
The translation factor that is used when exporting the scene for AR (Augmented Reality). The unit system used by AR is meter.
Option to enable / disable the automatic color space adaption. This converts all color inputs to the chosen outputEncoding. (default: true)
Option to enable / disable the automatic resizing of the viewport to changes of the canvas. (default: true)
The duration used by the beauty rendering to blend in (milliseconds).
The delay after which the beauty rendering starts (milliseconds).
ReadonlycameraThe current [camera]ICameraApi.
ReadonlycamerasThe [cameras]ICameraApi of the viewport.
ReadonlycanvasThe canvas that is used to render the viewport.
The clear alpha value of the viewport. Use this to influence the background appearance of the viewport.
The clear color value of the viewport. Use this to influence the background appearance of the viewport.
The blur amount of the contact shadow. (default: 1.5)
The darkness of the contact shadow. (default: 2.5)
The maximum percentage of height that is still considered for the creation of the contact shadow. (default: 0.25) The maximum height is equal to the width and height of the ground plane.
The opacity of the contact shadow. (default: 1)
Option to enable / disable the contact shadow. (default: false)
ReadonlydefaultThe default line material that is used for line geometry without a specified material. Please use updateDefaultLineMaterial to update the material.
ReadonlydefaultThe default material that is used for geometry without a specified material. Please use updateDefaultMaterial to update the material.
The color that is used when no material is specified. (default: #199b9b)
ReadonlydefaultThe default point material that is used for point geometry without a specified material. Please use updateDefaultPointMaterial to update the material.
Option to enable / disable the AR (Augmented Reality) functionality for this viewport. (default: true) This setting is used purely for UI purposes, it does not have any influence on the viewport itself.
The environment map used by the viewport. You can either use the HDR maps at ENVIRONMENT_MAP or the LDR legacy maps at ENVIRONMENT_MAP_CUBE. Additionally, you can specify your own maps. For HDR maps, provide a link to a .hdr file, for LDR provide the folder where the six cube map images are located.
Option to set the environment map as the background of the viewport. (default: false)
The amount of which the environment map is blurred. (default: 0)
Option to set the environment map for unlit materials. (default: false) For unlit materials, which use the three.js MeshBasicMaterial, per default we don't set the environment map to keep the colors as realistic as possible.
Scales how much the environment map effects the materials. (default: 1)
The environment map resolution that is used for preset cube maps.
The rotation quaternion that is used on the environment map. (default: [0,0,0,1])
The color of the grid.
Option to enable / disable the grid. (default: true)
The color of the ground plane.
The color of the ground plane shadow.
Option to enable / disable the ground plane shadow. (default: false)
Option to enable / disable the ground plane. (default: true)
ReadonlyidThe id of the viewport.
ReadonlyisIf the viewer is currently busy. This is set by the viewer [addFlag]addFlag and [removeFlag]removeFlag methods.
Option to enable / disable lights. (default: true)
ReadonlylightThe current [light scene]ILightSceneApi.
ReadonlylightThe [light scenes]ILightSceneApi of the viewport.
Option to load the default cameras when the viewport is created. (default: true) This will create 6 orthographic cameras (top, bottom, left, right, front, back).
The type of material that is used as an override for all materials in the scene. This can be used to enforce a specific material type for all materials in the scene.
As point and line materials are not supported by all three.js materials, the override will be ignored for these materials.
If no override is set, the materials will be used as they are.
The maximum size of the renderings. The renderings will be upscaled to the actual resolution if these values are lower than the resolution of the canvas. This setting exists, as for higher resolutions the performance can drop due to the rendering effort. (default: { width: 1920, height: 1080 })
The encoding that is used for the output texture. (default: TEXTURE_ENCODING.SRGB) This is the texture that is rendered to the screen.
Option to enable / disable the physically correct lights. (default: true)
The point size that is used for rendering point data.
ReadonlypostThe [post processing api]IPostProcessingApi of the viewport.
Note: The post-processing API is still WIP. Breaking changes are to be expected.
Option to enable / disable rendering of shadows. (default: true)
Option to show / hide the viewport. This will disable rendering, and hide the canvas behind the logo. Using this setting especially makes sense with VISIBILITY_MODE.MANUAL where you can decide at what point you first want to show the scene.
Option to show / hide rendering statistics overlayed to the viewport. (default: false)
Option if the soft shadows should be rendered when the camera is not moving. (default: true)
The encoding that is used for textures. (default: TEXTURE_ENCODING.SRGB)
Some of the three.js core objects so that you are free to use and adjust them yourself.
Please note that the camera will be replaced when you change it via the API. The same goes for the children in the scene tree that are auto-generated and properties of the renderer that are adjusted internally.
The tone mapping that is used. (default: TONE_MAPPING.NONE)
The intensity of the tone mapping.
The type of rendering of this viewport.
A possibility to visualize the attributes of the scene in any way you want. Please have a look at the desk documentation for more information.
Provide a callback that transforms a ISDTFItemData to a ISDTFAttributeVisualizationData. The ISDTFOverview provides general information like min and max values for numbers or the available options for strings.
OptionalpostOptional callback that is called after the rendering of the scene.
OptionalpreOptional callback that is called before the rendering of the scene.
Optional ReadonlysessionOptional identifier of the session to be used for loading / persisting settings of the viewport. This is ignored in case sessionSettingsMode is not SESSION_SETTINGS_MODE.MANUAL.
Optional ReadonlysessionAllows to control which session to use for loading / persisting settings of the viewport. (default: SESSION_SETTINGS_MODE.FIRST).
Add an event listener that receives all canvas events.
The listener that is called when the events occur.
Add a flag for this viewport. Adding/removing flags allows to influence the render loop. If you want to stop this again call removeFlag with the returned token.
Add a token to the list of restricted canvas listener tokens. This can be used to restrict events for a viewport. Only listeners with a token in this list will receive events (if there is at least one item in the list).
Apply the settings of a viewport manually. You can get the settings via getViewportSettings. You can choose which sections will be applied, by default they are all set to false.
Optionalsections: {Closes the viewport and will remove all traces of the canvas element.
Continue the rendering of the scene. Can be used with pauseRendering to continue/pause the rendering at will.
Convert the given 3D position to different 2D coordinates of HTML Elements. If the point is hidden by geometry, the hidden property will be set to true.
The returned coordinates all have their origin in the top left corner of the element. For container, the position is relative to the canvas element. For client, the position is relative to the canvas element, including the results of https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect|getBoundingClientRect. For page, the position is relative to the whole page.
Convert the current visible elements (or just from the node specified) in the viewport into a glTF file.
The ground plane and grid will not be included, as well as additionally added data that was added to the scene other than through a GeometryData property.
Optionalnode: ITreeNodeOptional node to provide to transform into a glTF. (default: scene tree)
OptionalconvertForAR: booleanOption to convert the scene for AR. In this case some specific use cases are target to ensure the best AR performance. (default: false)
Create a link / QRCode that can be opened by mobile devices to display in AR.
As some models might have a different scale then the AR apps (meters), the scaling can be chosen freely arScale.
Internally, the scene will first be converted into a glTF. This glTF will be uploaded to our backend and converted into a USDZ to be able to start AR on iOS and Android.
Optionalnode: ITreeNodeOptional node to display in AR. (default: scene tree)
OptionalqrCode: booleanOption to receive a QR Code instead of a link (default: true)
OptionalfallbackUrl: stringOptional fallback url if the link was opened by an unsupported device or an error occurred. If none was provided, the user will be redirected to shapediver.com/app
Create a new light scene. An id can be provided. If not, a unique id will be created. If the standard option is chosen, the default lights will be added from the start.
Optionalproperties: { name?: string; standard?: boolean }Optionalname?: stringOptionalstandard?: booleanThe option to add the standard lights.
Create an orthographic camera. An id can be provided. If not, a unique id will be created.
Optionalid: stringThe id of the camera.
Create a perspective camera. An id can be provided. If not, a unique id will be created.
Optionalid: stringThe id of the camera.
Create the ISDTFOverview for the provided node. If no node was provided, the scene root is used instead.
The node for which the overview is created.
Display an error message on the canvas.
The message to display.
Get the complete URL of the current environment map, if it is a single file. This can be used in case environmentMap is set to a preset environment map.
Create a screenshot for the requested type and options.
Optionaltype: stringThe type as string, default is 'image/png'.
Optionalquality: numberThe quality of the screenshot, default is 1.
Create a screenshot for the requested type and options.
Optionaltype: stringThe type as string, default is 'image/png'.
Optionalquality: numberThe quality of the screenshot, default is 1.
Optionalresolution: { height: number; width: number }The resolution of the screenshot, default is the current canvas size.
Optionalcamera: OrthographicCameraProperties | PerspectiveCameraPropertiesThe camera that should be used for the screenshot, default is the current camera.
Get the current settings object of this viewport. Can be re-applied at a later point with applyViewportSettings.
Determines if the current device is a mobile device (or tablet) but still doesn't support to view the content in AR.
Can be used in combination with viewableInAR to display a warning to use a different browser if viewableInAR is false and isMobileDeviceWithoutBrowserARSupport is true.
Reasons for that can be:
Pause the rendering of the scene. Can be used with continueRendering to continue/pause the rendering at will.
Calculate the ray that is created by the pointer event and the camera.
From the provided origin and direction, trace the ray through the scene. The intersections with GeometryData will be returned including the corresponding nodes, sorted by their smallest distance.
If you want to raytrace the scene from an interaction with the the canvas, please use pointerEventToRay to create a ray first.
The origin of the ray.
The direction of the ray.
OptionalfilterCriteria: IIntersectionFilter[]Optional filter criteria to filter the intersections.
Remove the camera with the specified id and destroys it. If you remove the current active camera, the rendering will be stopped until a new camera is assigned.
The id of the camera.
Remove an event listener that received all canvas events.
The token that was returned by addCanvasEventListener.
Removes the registered flag. Adding/removing flags allows to influence the render loop.
The token that was returned by addFlag.
Remove the light scene with the specified id. If you remove the current active light scene, no lights will be shown.
The id of the light scene.
Remove the token from the list of restricted canvas listener tokens. Only listeners with a token in this list will receive events (if there is at least one item in the list).
Manual call to render the scene.
Delete all current cameras and create our 7 default cameras.
A perspective one (default) and 6 orthographic ones (top, bottom, left, right, front, back).
If the automaticResizing is option is set to false, this function resizes the Viewport.
The new width of the Viewport.
The new height of the Viewport.
Restrict events. This can be used to disable events for a viewport.
Example use case: If you don't want to allow mouse wheel events for a specific viewport so that users can scroll past the viewport.
Be aware that this might cause some issues with the the camera controls if the pointer events are disabled only partially.
Update the viewport with the current changes of the complete scene tree. This carries out preparations for rendering. Call it after doing direct changes to the scene tree.
Update the default line material of the viewport.
The new default line material.
Update the default materials of the viewport.
The new default material.
Update the default point material of the viewport.
The new default point material.
Update the position of the environment geometry (grid, groundplane, etc) to the current viewport bounding box. Internally, this functions is called whenever a session is customized, but if you manually change parts of the scene, it might get necessary to call this function. Make sure to call update before, to apply the last changes.
Update the material of the given geometry data on the GPU without triggering a full scene tree reconversion. Use this instead of calling IGeometryData.updateVersion when only the effect material has changed, e.g. during hover interactions, to avoid the overhead of reconstructing Three.js objects.
The geometry data whose material should be updated.
Update the viewport with the current changes of given scene tree node and its descendants. This carries out preparations for rendering. Call it after doing direct changes to the scene tree.
The node to update.
Update the viewport with the current changes in transformation of given scene tree node and its descendants. This carries out preparations for rendering. Call it after doing direct changes to the scene tree transformations.
The node to update.
Determines if the current device supports viewing in AR.
Can be used in combination with isMobileDeviceWithoutBrowserARSupport to display a warning to use a different browser if viewableInAR is false and isMobileDeviceWithoutBrowserARSupport is true.
View the current scene in AR.
Please check first if the device supports the viewing of models in AR, see viewableInAR. As some models might have a different scale then the AR apps (meters), the scaling can be chosen freely arScale.
Internally, the scene will first be converted into a glTF. This glTF will be uploaded to our backend to be able to start AR.
Optionalnode: ITreeNodeOptional node to display in AR. (default: scene tree)
The api for viewports.
Viewports are created by calling the createViewport method.
Each viewport has corresponding [cameras]ICameraApi and [lights]ILightApi.
Additionally, there are various other settings to adjust the behavior and rendering of the viewport.
By default a new viewport displays the complete scene tree. Viewports can be excluded from displaying geometry for specific sessions by using the excludeViewports property of ISessionApi.