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.
Interfaces
flexipage:availableForAllPageTypes, force:hasRecordId, lightning:availableForFlowScreens
Attributes
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
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
add2DImage
3397dad990af47bbae3cec0687e21ed6
Add a floating image in 3D space
add2DText
3b45cfa95cae4893a7a5fa272b8b6ebc
Add floating 2D text that can be attached to a 3D component/node in the scene
add3DTextToScene
f25a6e15a5864b4886addfaf0bb6b465
Add 3D text to a given Scene
addComponentTransformHandles
1270f2d9da0f424a9e9ce4cd4f965900
Used to add position, rotation and size handles to a set of components by name.
addComponentTransformHandlesToMultipleComponents
408b1389e95b4b7eba647f76841dc53e
Used to add position, rotation and size handles to a set of components by name.
addLight
01af976ae2b24a5bb1f44c8e0083d846
Add a new light to the scene
addModelToScene
648ad3f6ad064fed9f155e96b4ebdce2
Add an additional model to the scene.
addPhotoDome
9bc5ffb251a248c1ae76cbce92de8d5e
Add 360° photo as a sphere where models can be rendered
addVideoPlayer
739c4613d5494e3c817d302f11ac22e8
Add a floating video Player in 3D space
addWidget
cf9ee403020947a3956c5c4cfeb1e6b1
Still in our 'labs' status. Adds a widget to our scene.
aimAndPositionCamera
0186ce7f53d340628cf00811ef5cc896
Position the camera in 3D space and aim at a subject.
aimCamera
fb9bb1a9677d4b1d940ce16b21d6809f
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
d69eb81e16834f24a44622858a60b362
Display related media instead of the 3D drawing
findNode
fca24914e606462ca23e33d3ab45cdfa
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
edf195bcd1d44b1e81e1463a0b021d5e
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
c0d62b29f7d54874b39f4ec714c4fc25
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
5bd7f9f3d51e46cbaa5da693fad8e718
Hide a node in a 3D Scene
highlightComponent
f649dc1575404f939f0f232ee54a03a2
Find a component by name or Id and highlight it with the color provided
highlightMultipleComponents
7acc4fc30b1a4728b7d2b8965de20c5e
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
6905edba1b564b66997b748385340431
Isolate the individual component by hiding all other components in the scene
isolateMultipleComponents
374d59c684624cc297dd452e943bbdf1
Isolate the several components by hiding other components in the scene
loadAndApplyTextureMaterialToModel
49fbbd17b8304c1cbb6664f48f0adabb
Load a diffuse texture and add it to a model.
positionCamera
cbb5aa83a6d04921a1d3254ea35018e4
Position the camera in 3D space.
raiseInteractionEvent
c2dc0864188b4042bff613722b35711e
Used to call actions that were setup within the 'interactions' section of the Scene setup
reintegrateComponent
de56ed80291e424b8dcec71fd7654e63
Re-integrate a component that has been isolated.
reloadToInitialScene
Reload to the initial scene (post initial model load)
removeComponent
46a94697544844139fc7c50b3b9f8f18
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
03fa72e02c374bb898bbbc221ef08541
Reset a custom explosion to its initial position
selectComponent
c121a81830cd43a89c79ecbedb5f71b2
Programmatically select a component node within the 3D model. Raises RDraw:EVT_Renderer_Mesh_Selected on successful selection
setLabelStyling
4a9896d324eb4ac6a367ee715c9fc3c6
Hide label manager to apply styles to labels added to the 3D Scene
setupGround
c2ff3492557f46a9b70456e10978bc03
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
5449bcb2fc7346fc8382cc38fd4cafce
Show label manager to apply styles to labels added to the 3D Scene
showNode
2187d67d424941eea6be3297e3c2ed1a
Show a node that has been hidden in a 3D Scene
showToastNotification
53d9428a164148ab86a7da12474be077
Displays a toast notification to the user
takeSnapshot
6969dd42663f44229c46bb0691674ad8
Take a snapshot of the scene
toggleEnableComponent
a05e7ecbac3d40f0a4e62c491d5f9d00
Enable or disable a given 3D node by passing a uniqueId, name or id
triggerRegisteredExplosion
6f927e61ac8240e7a4a14d7754da511a
Register a custom explosion
updateBackgroundImage
0dc44740a37f45dc9d9fb7bd523453cb
Update background to a image
updateComponentColor
ca55d5ce645b423593d7123f313df582
Update a given 3D component node to the passed hex color code.
updateEnvironmentLightTexture
1b18aa006f704775baf79fcd56ead3c0
Change the lighting texture to use (for refraction)
updateExistingLabel
dfdc2a6e15e24601936e8883fb6b656b
Update an existing Label
updateLight
ae255e86ea744fe687ec4a0e4b970d19
Add a new light to the scene
verifyComponent
0769acf4afd14d7b8472ef06445c2a85
Verify a component exists in the scene, is enabled and visible.
Last updated