3D Advanced Renderer (Aura)

Background Information

The Advanced Renderer was created for more complex development and interaction scenarios than the SimpleRenderer component. SimpleRenderer was created for displaying 3D drawings and allowing interaction without events or selection of components within the drawing itself.

Advanced Renderer was created to allow for the manipulation of a 3D scene within the context of a Salesforce interaction. This can be displayed using our Slot UI framework which is detailed below.

The Advanced Renderer is used throughout the RenderDraw suite, namely inside of the 3D Scene Director.

Usage Notes

Advanced Renderer should be used in any custom development scenario. This component was created to allow for the contextual interaction with other data within Salesforce. If you need a custom interaction beyond 3D visualization, this component is likely what you will be using. AdvancedRenderer can be utilized in simple rendering scenarios as well, with the option of utilizing slots.

Slots

AdvancedRenderer was designed for extensibility, with that in mind, solving for every use case isn't really possible without knowing how each implementation and custom project needs to display 3D within Salesforce. Salesforce Lightning components are composable, and the AdvancedRenderer has prebuilt slots for you to pass custom components into.

A common interaction flow is searching for a detail record from record set, and displaying a 3D drawing or 2D image based on that selection. in the diagram below, we walk through displaying a list of order items, fetching the details of an item, displaying the appropriate drawing and if selected the related actions to its subcomponents. These can lead to the user attempting to either re-order an item or create a service order based on a warranty claim.

The interaction follows a pattern events that can be triggered by the user, or by the 3D drawing / rendering itself. Displaying these details alongside the 3D drawing in a repeatable way are why we created the Slot UI Layout. Slots can be used to express any interaction within Salesforce, and the AdvancedRenderer provides the capability to display these as you see fit.

Lets break down each Slot and its intended purpose.

These slots were meant to be used as needed, and data surrounding what we are rendering is supposed to flow from left to right, starting with ContextContent (1) and concluding on the Sidebar Content (4) with some interaction in between.

Context Content (1)

The ContextContent slot is meant to provide high-level information to the user regarding what the 3D model is supposed to represent. Some examples of what has been used in the ContextContent Slot in past projects include

• Lists of Salesforce Objects that, once selected, update what rendering is displayed

• Configuration options for a product to modify the 3D object/scene

Because of the recurring theme of searching for details that reside in a list of information, we have created the ContextContentDetails slot as well, which is displayed in the same area (1) that the ContextContent component is displayed, the only difference is an additional back button (that raises EVT_Renderer_Context_Details_Closed), and displayed header text to provide your user some context (attribute contextDetailHeaderText).

Action Information Pane (3)

The horizontal slot available above the 3D model, which is typically used for Actions related to what is being rendered (e.g. Create a Case). Using attribute displayActionInformationPaneOnSelection will automatically display the ActionInformationPane when a user selects a component using ComponentTouch.

We suggest limiting the height of components passed into this slot to approximately ⅓ of the parents components overall height, as the ActionInformationPane shares vertical space with the rendered content, and the 3D element is typically the star of the show in a user's eyes.

Sidebar Content (4)

The Sidebar content slot provides space for additional information that is to be displayed based on an interaction in the 3D content pane.

Passing components into a slot

Passing components into slots are as simple as using the aura:set tag with the name of the slot you would like to use.

<RDraw:AdvancedRenderer aura:id="renderer" displayContext="true"  loadingImage="{!v.loadingImage}"
 displaySidebar="{!v.showSidebar}" displayActionInformationPane="{!v.displayActions}"
 spitShine="True" allowSelection="true" recordId="{!v.recordId}">
    <aura:set attribute="contextContent">
           //your component goes here for the context menu (1) 
    </aura:set>
    <aura:set attribute="actionInformationPane">
          //your component goes here for the ActionInformationPane (3)
    </aura:set> v
    <aura:set attribute="sidebarContent">
         //your component goes here for the Sidebar content (4)
    </aura:set>
 </RDraw:AdvancedRenderer>

Interfaces

flexipage:availableForAllPageTypes, force:hasRecordId, lightning:availableForFlowScreens

Attributes

NAME	TYPE	DEFAULT	DESCRIPTION
actionInformationPane	component[]		The horizontal slot available above the 3D model. This is typically used for Actions related to what is being rendered (e.g. Create a Case)
allowSelection	boolean		Allow the selection of subcomponents either by ComponentTouch(Click) or programmatically using the selectComponent method
availableActions	string[]		Inherited from lightning:availableForFlowScreensThe navigation actions available for this screen. Valid actions are NEXT, PREVIOUS, FINISH, and PAUSE.
body	component[]		Inherited from aura:componentThe body of the component. In markup, this is everything in the body of the tag.
brandImageURL	string		The branded logo image displayed in the bottom right corner of the rendering components. Pass an empty string if no branding is desired.
childComponentPrefixToFilter	string[]	[]	A list of strings to ignore if they follow the name value, e.g. a value of ['_ASM'] passed along with the 'name' parameter of IceCream would successfully return a 3D node named 'IceCream_ASM'
childComponentSuffixToFilter	string[]	[]	A list of strings to ignore if they precede the name value, e.g. a value of ['ASD_'] passed along with the 'name' parameter of IceCream would successfully return a 3D node named 'ASD_IceCream'
contentVersionId	string		The content version to render (if rendering from Salesforce servers/files). Using contentversionid will bypass the standard recordId and the overrideURL
contextContent	component[]		The Salesforce Lightning components to be displayed on the context pane (left side slot, representing context to what is being rendererd.)
contextDetailContent	component[]		The Salesforce Lightning components to be displayed on the context detail pane (left side slot, representing details to the context of what is being rendererd.) This is typically displayed based on some action that happened within the contextContent componets, e.g. list order items, then dive into the details of a particular line.
contextDetailHeaderText	string	Details	The header text that is displayed next to the back button on the contextDetail facet. This describes the content that is passed via contextDetailsContent, typically the name of a line item or detail item within a list presented in the contextContent
contextSize	integer	4	The size in units, up to 12, for how wide the Context and Context Details slots are
displayActionInformationPane	boolean	false	Whether or not to display the Action information pane slot (top slot) and components passed into actionInformationPane parameter
displayActionInformationPaneOnSelection	boolean	false	Whether or not to display the Action information pane slot (top slot) when a selection is made via ComponentTouch or programmatically
displayContext	boolean	false	Whether or not to display the context slot (left side slot) and components passed into contextContent parameter
displayContextDetails	boolean	false	Whether or not to display the context slot details and components passed into contextDetailContent parameter. Use this for displaying detail components related to contextContent, e.g. Line item details for for an order item listed in contextContent. This cannot be used at the same time as displayContext
displaySidebar	boolean	false	Whether or not to display the sidebar slot (right side slot) and components passed into sidebarContent parameter
environmentColor	string	#E6F1F4	The background color of the 3D environment. Use Hex code format, such as #ffffff
loadingImage	string		The image URL to display while the 3D model is loading
nodeIgnoreList	string[]	[]	A list of strings that contain names of nodes to ignore when traversing the 3D structure during ComponentTouch or Finding a component by name
overrideURL	string		The absolute URL to render.
playground	boolean	false	Setup a renderer without loading a model for custom interactions
recordId	string		Inherited from force:hasRecordIdThe record Id
relatedRecordBusy	boolean	false	Whether or not the system is busy searching for the related record.
selectedComponentName	string		The node name of the selected component in the 3D model
showUserMessages	boolean	false	Show rendering related messages to the user. This is typically used in debug scenarios
sidebarContent	component[]		The vertical slot avalable to the right of the 3D model. This is typically used for Detailed information related to the result of a ComponentTouch on a model (e.g. selection of a subcomponent within a model for checking on warranty information).
sidebarSize	integer	4	The size in units, up to 12, for how wide the Context and Context Details slots are
size	string		Size of the component, either Stretch, Small, Medium, Large, Jumbo
spitShine	boolean	false	Add a shine to your model, even if the materials loaded have no reflection
useCommunities	boolean		Fixes the fetching of files and metadata when utilizing a Community
userInteracted	boolean	false	Whether or not a user has interacted with the drawing

Methods

NAME	ARGUMENTS	DESCRIPTION
add2DImage	NAME TYPE DESCRIPTION id string The id of the image player to add imageURL string The URL to the image width double The width of the image height double The height of the image positionX number The x-coordinate position to add the image to positionY number The y-coordinate position to add the image to positionZ number The z-coordinate position to add the image to	Add a floating image in 3D space
add2DText	NAME TYPE DESCRIPTION id string The id of the text to add text string The text to add size number The size of the text to add color string The color of the text to add componentName string The component to attach showOnlyOnHover boolean Auto-hide this text if the user isnt hovering over the named component. This is ignored if there isnt a component passed	Add floating 2D text that can be attached to a 3D component/node in the scene
add3DTextToScene	NAME TYPE DESCRIPTION id string The id of the text to add to the scene text string The text to add to the scene font string What font is to be used, either comic, helvetica, or arial anchor string position of the text to anchor itself to- either left, center, right letterHeight number How tall the letters are (y-axis) letterThickness number How thick the letters are (depth, in three dimensions the Z axis) color string The hex color code of the text secondaryColor string The hex color code of the accent color on the text positionX number The x-coordinate position to add the text to positionY number The y-coordinate position to add the text to positionZ number The z-coordinate position to add the text to	Add 3D text to a given Scene
addComponentTransformHandles	NAME TYPE DESCRIPTION componentName string The name of the 3D node to add the handles to enableSizeHandles boolean Whether or not to allow for the resizing of the underlying element enableRotationHandles boolean Whether or not to allow for the rotation of the underlying element enablePositionHandles boolean Whether or not to allow for the position of the underlying element usePointerToAttachHandles boolean Whether or not to attach the selected handles when you click on an added component (named above) clearHandlesOnEmptyPointerEvent boolean Whether or not to detach the handles when you click away from an added component (named above)	Used to add position, rotation and size handles to a set of components by name.
addComponentTransformHandlesToMultipleComponents	NAME TYPE DESCRIPTION componentNames list The names of the 3D nodes to add the handles to componentIds list The Ids of the 3D nodes to add the handles to componentUniqueIds list The UniqueIds of the 3D nodes to add the handles to enableSizeHandles boolean Whether or not to allow for the resizing of the underlying element enableRotationHandles boolean Whether or not to allow for the rotation of the underlying element enablePositionHandles boolean Whether or not to allow for the position of the underlying element usePointerToAttachHandles boolean Whether or not to attach the selected handles when you click on an added component (named above) clearHandlesOnEmptyPointerEvent boolean Whether or not to detach the handles when you click away from an added component (named above)	Used to add position, rotation and size handles to a set of components by name.
addLight	NAME TYPE DESCRIPTION name string The name of the light to add lightType string The type of light to add to the scene, must be one of 'point','spot','directional','hemispheric' positionX double The x-coordinate position on the scene to add the light (only used for point, spot, and hemispheric lights) positionY double The y-coordinate position on the scene to add the light (only used for point, spot, and hemispheric lights) positionZ double The z-coordinate position on the scene to add the light (only used for point, spot, and hemispheric lights) lightIntensity double The strength of the light diffuseColor string The hex code (starting with #) of the basic color of the light specularColor string The hex code (starting with #) of the light that produces a highlight color on an object directionX double The x-coordinate direction to point the light at (only used for directional, and spot lights) directionY double The y-coordinate direction to point the light at (only used for directional, and spot lights) directionZ double The z-coordinate direction to point the light at (only used for directional, and spot lights)	Add a new light to the scene
addModelToScene	NAME TYPE DESCRIPTION nodeName string The name of the node of the 3D node after loading URL string The URL of the of the 3D model to load fileName string The file name and extension of the of the 3D model being loaded parentNodeUniqueId string The name of the parent node of the 3D node after loading positionX double The x-coordinate position to load the model in positionY double The y-coordinate position to load the model in positionZ double The z-coordinate position to load the model in rotationX double The rotation (Euler Angles) on the X axis of the model to load rotationY double The rotation (Euler Angles) on the Y axis of the model to load rotationZ double The rotation (Euler Angles) on the Z axis of the model to load scaleX double The scale on the X axis of the model to load scaleY double The scale on the Y axis of the model to load scaleZ double The scale on the Z axis of the model to load transaction string	Add an additional model to the scene.
addPhotoDome	NAME TYPE DESCRIPTION name string The component to attach photoURL string The URL to the photo size string The size of the sphere (defaults to 15) limitCamera boolean Limit the Camera Zoom to within the dome x number The X-Position of the Photodome in 3D space. y number The Y-Position of the Photodome in 3D space. z number The Z-Position of the Photodome in 3D space. infiniteDistance boolean Enable infinite distance on the photodome	Add 360° photo as a sphere where models can be rendered
addVideoPlayer	NAME TYPE DESCRIPTION id string The id of the video player to add videoURL string The URL to the video width double The width of the player height double The height of the player positionX number The x-coordinate position to add the video to positionY number The y-coordinate position to add the video to positionZ number The z-coordinate position to add the video to placeholderImageURL string The URL to the image to display before playing the video	Add a floating video Player in 3D space
addWidget	NAME TYPE DESCRIPTION name string type string positionX string positionY string positionZ string rotationX double The rotation (Euler Angles) on the X axis of the Widget rotationY double The rotation (Euler Angles) on the Y axis of the Widget rotationZ double The rotation (Euler Angles) on the Z axis of the Widget scaleX double The scale on the X axis of the Widget scaleY double The scale on the Y axis of the Widget scaleZ double The scale on the Z axis of the Widget	Still in our 'labs' status. Adds a widget to our scene.
aimAndPositionCamera	NAME TYPE DESCRIPTION positionx double The cameras position on the X-Axis positiony double The cameras position on the Y-Axis positionz double The cameras position on the Z-Axis positionalpha double Defines the camera rotation along the logitudinal axis positionbeta double Defines the camera rotation along the latitudinal axis aimx double The cameras focus on the X-Axis aimy double The cameras focus on the Y-Axis aimz double The cameras focus on the Z-Axis nodeName string The name of the 3D node to focus on	Position the camera in 3D space and aim at a subject.
aimCamera	NAME TYPE DESCRIPTION x double The cameras focus on the X-Axis y double The cameras focus on the Y-Axis z double The cameras focus on the Z-Axis nodeName string The name of the 3D node to focus on	Aim the camera in 3D space either at a component or some coordinates.
autoLabelComponents		Automatically add labels to components
clearAllHighlights		Clear all highlights from the Scene.
clearSelections		Clear all selections from the Scene.
displayMedia	NAME TYPE DESCRIPTION imageURL string The fully qualified url of the image to display, e.g. https://files.renderdraw.us/public/images/2020RDLogo.png allowClose boolean Allow for users to close the displayed media	Display related media instead of the 3D drawing
findNode	NAME TYPE DESCRIPTION name string The name of the node prefixesToIgnore string[] A list of strings to ignore if they preceed the name value, e.g. a value of ['ASD_'] passed along with the 'name' parameter of IceCream would successfully return a 3D node named 'ASD_IceCream' suffixesToIgnore string[] A list of strings to ignore if they follow the name value, e.g. a value of ['_ASM'] passed along with the 'name' parameter of IceCream would successfully return a 3D node named 'IceCream_ASM'	Returns an object containing the Node information from the 3D scene. If no node is found, ths returns nothing
getCameraPositionandTarget		Fetch the camera's current position and where it is aiming.
getFixedComponentName	NAME TYPE DESCRIPTION name string	Retrieves fixed component name based on prefix and suffixes
getHierarchy		Fetch the 3D model's hierarchy. Must subscribe to RDraw:EVT_Renderer_Get_Hierarchy for response
getListOfComponentNames		Fetch a flat list of all of the names of each 3D Node in the scene
getRenderContextForId	NAME TYPE DESCRIPTION recordId string	Retrieves RenderContext from server for a given recordId
hideAllLabels		Hide all labels added to the 3D Scene
hideAllNodes		Hide all nodes in a 3D Scene
hideLabelManager		Hide label manager to apply styles to labels added to the 3D Scene
hideMedia		Hide displayed related media that is presented in the content area of this component
hideNode	NAME TYPE DESCRIPTION componentName string The name of the 3D node to hide	Hide a node in a 3D Scene
highlightComponent	NAME TYPE DESCRIPTION nodeId string The uniqueId of the component to highlight name string The name of the component to highlight enabled boolean Whether or not to highlight the component (remove highlight if false) color string The hex code (starting with #) to use for the highlight- defaults to orange zoomAndFocusOnElement boolean Zoom the camera to the highlighted element	Find a component by name or Id and highlight it with the color provided
highlightMultipleComponents	NAME TYPE DESCRIPTION names string[] A list of strings of component names to highlight color string The hex code (starting with #) to use for the highlight- defaults to orange enabled boolean Whether or not to highlight the component (remove highlight if false)	Highlight several components in the scene
is3DSceneDisplayed		Check if a 3D scene is displayed in the Main Content of this component
isMediaDisplayed		Check if media is displayed instead of a 3D scene in the Main Content of this component
isolateComponent	NAME TYPE DESCRIPTION componentName string The name of the 3D node to isolate	Isolate the individual component by hiding all other components in the scene
isolateMultipleComponents	NAME TYPE DESCRIPTION componentNames list The names of the 3D node to isolate componentIds list The ids of the 3D node to isolate componentUniqueIds list The Unique Ids of the 3D node to isolate	Isolate the several components by hiding other components in the scene
loadAndApplyTextureMaterialToModel	NAME TYPE DESCRIPTION textureImageURL string The URL of the of the 3D model to load nodeUniqueId string The uniqueId of the Model to apply the texture to materialName string The name of the material you want to replace the texture of the material you are loading	Load a diffuse texture and add it to a model.
positionCamera	NAME TYPE DESCRIPTION x double The cameras position on the X-Axis y double The cameras position on the Y-Axis z double The cameras position on the Z-Axis alpha double Defines the camera rotation along the logitudinal axis beta double Defines the camera rotation along the latitudinal axis	Position the camera in 3D space.
raiseInteractionEvent	NAME TYPE DESCRIPTION name string The name of the action type string The type of the action, one of change,focus,focuslost label string A label used from the interaction (typically an Input element on configuration) value object The updated value from the interaction metadata object Additional information for the event	Used to call actions that were setup within the 'interactions' section of the Scene setup
reintegrateComponent	NAME TYPE DESCRIPTION componentName string The name of the 3D node to isolate	Re-integrate a component that has been isolated.
reloadToInitialScene		Reload to the initial scene (post initial model load)
removeComponent	NAME TYPE DESCRIPTION uniqueId string The uniqueId to find and remove. name string The node name to find and remove.	Removes the given component from a scene
removeComponentHandles		Used to remove position, rotation and size handles to a set of components by name.
resetCamera		Reset the camera to it's initial position in the scene
resetExplosion	NAME TYPE DESCRIPTION name string The name of the explosion to reset	Reset a custom explosion to its initial position
selectComponent	NAME TYPE DESCRIPTION name string The name of the node to select. Use only one of name, id, uniqueId (uniqueId being most specific) id string The id of the node to select. Use only one of name, id, uniqueId (uniqueId being most specific) uniqueId string The uniqueId of the node to select. Use only one of name, id, uniqueId (uniqueId being most specific) context object ignoreList string[] The list of node names to skip when traversing the 3D model to find the node	Programmatically select a component node within the 3D model. Raises RDraw:EVT_Renderer_Mesh_Selected on successful selection
setLabelStyling	NAME TYPE DESCRIPTION lineThickness number The width of both the border around the label as well as the line that connects the component to the label. color string The color of the label text as well as the line that connects the component to the label. bold boolean Whether the text of the label is bold or not. align string The alignment of the labels around the 3D model.	Hide label manager to apply styles to labels added to the 3D Scene
setupGround	NAME TYPE DESCRIPTION imageURL string The URL to the texture image heightMapURL string The URL to the heightmap image width double The width of the ground height double The height of the ground maxheight double The max height of the ground minheight double The minimum height of the ground subdivisions number The number of subdivisions for the ground, this defaults to 10 groundY number The height on the y axis to render this ground, this defaults to 00	Add a ground for your 3D scene, with or without a heightmap
showAllLabels		Show all labels added to the 3D Scene
showAllNodes		Show all nodes that have been hidden in a 3D Scene
showLabelManager	NAME TYPE DESCRIPTION admin boolean	Show label manager to apply styles to labels added to the 3D Scene
showNode	NAME TYPE DESCRIPTION componentName string The name of the 3D node to show	Show a node that has been hidden in a 3D Scene
showToastNotification	NAME TYPE DESCRIPTION title string Specifies the title for a message to display. The title is shown above the message in a slightly larger mode string The toast mode, which controls how users can dismiss the toast. Valid values are 'pester', 'dismissable' and 'sticky'. The default is 'dismissible', which displays the close button. message string The message to display in the toast. messageTemplate string Overwrites message string with the specified message. Requires messageTemplateData. iconName string Icon to use when toast type is 'other'. Icon keys are available at the Lightning Design System Icons page. type string The toast type, which can be 'error', 'warning', 'success', or 'info'. The default is 'other', which is styled like an 'info' toast and doesn’t display an icon, unless specified by the key attribute. duration integer Length of time the toast is visible for, in milliseconds. Applies to 'dismissible' or 'pester' toast modes. The default is 5000ms if the provided value is less than 5000ms. messageTemplateData object[] An array of text and actions to be used in messageTemplate.	Displays a toast notification to the user
takeSnapshot	NAME TYPE DESCRIPTION download boolean If true, the screenshot will be downloaded directly to the user, otherwise, the snapshot will be returned in an event response	Take a snapshot of the scene
toggleEnableComponent	NAME TYPE DESCRIPTION name string The name to enable/disable. Use only one of name, id, uniqueId (uniqueId being most specific) id string The id to enable/disable. Use only one of name, id, uniqueId (uniqueId being most specific) uniqueId string The uniqueId to enable/disable. Use only one of name, id, uniqueId (uniqueId being most specific) isEnabled boolean Ensure the component is enabled regardless of its current state	Enable or disable a given 3D node by passing a uniqueId, name or id
triggerRegisteredExplosion	NAME TYPE DESCRIPTION explosionName string The name of the registered explosion step string Which step of explosion to move to includePriorSteps boolean Include steps leading up to this step (e.g. call steps 0-4 if the 5th step is called)	Register a custom explosion
updateBackgroundImage	NAME TYPE DESCRIPTION imageURL string The URL to the image	Update background to a image
updateComponentColor	NAME TYPE DESCRIPTION name string The name of the node to update. Use only one of name, id, uniqueId (uniqueId being most specific) id string The id of the node to update. Use only one of name, id, uniqueId (uniqueId being most specific) uniqueId string The uniqueId of the node to update. Use only one of name, id, uniqueId (uniqueId being most specific) colorHex string The hex color to update the node with	Update a given 3D component node to the passed hex color code.
updateEnvironmentLightTexture	NAME TYPE DESCRIPTION includedTextureName string The name of the included texture to use, must be one of photoStudio, dusk, emptyWarehouse, partlycloudy, country	Change the lighting texture to use (for refraction)
updateExistingLabel	NAME TYPE DESCRIPTION labelId string labelText string	Update an existing Label
updateLight	NAME TYPE DESCRIPTION name string The name of the light to update enable boolean Whether or not the light is enabled (turned on) intensity double The intensity of the light diffuseColor string The hex code (starting with #) of the basic color of the light specularColor string The hex code (starting with #) of the light that produces a highlight color on an object	Add a new light to the scene
verifyComponent	NAME TYPE DESCRIPTION componentName string The name of the 3D node to verify	Verify a component exists in the scene, is enabled and visible.