RenderDraw docs

Simply Render your 3D models in Salesforce

Simple Renderer was designed to allow for the use and interaction of 3D models within Salesforce, without having to create and maintain custom components that encapsulate a 3D rendering engine. SimpleRenderer requires the minimal amount of information to get started rendering 3D in Salesforce. Using either a URL to a 3D file, a recordId or a contentVersionId, we can download the file and render it. Once rendered, we can interact with the model, take screenshots, explode the diagram or debug the 3D scene.

Usage of the SimpleRenderer requires either passing a URL of a 3D model, or setting up metadata relationships for the underlying record type to derive the appropriate URL for a given record. SimpleRenderer can be used within Lightning Flow, on record pages, or as a Quick Action. Simply pass a Salesforce recordId, or add the component to a record page and SimpleRenderer will handle the rest

SimpleRenderer

SimpleRenderer Component API

Sets the Vertical size of the component, either Small, Medium, Large, Jumbo. The default is "Medium" and values are equate to the following values:

Small:  25vh,  Medium:50vh,  Large:75vh, Jumbo:90vh

Where vh is the vertical height of the encapsulating window

 

Size

size

Attributes

Sets the absolute URL of the 3D model from a remote resource. Once set, the SimpleRenderer will make an HTTP call to the URL to retrieve either a GLTF, GLB, OBJ, or STL file from the remote resource. This is commonly utilized during custom development scenarios where the 3D models reside outside of the Salesforce org.

Rendering URL

overrideURL

Sets the associated Salesforce record for a given Id. A metadata relationship must be setup to utilize this, as we have to determine a destination URL to fetch the 3D model from. Enable the RenderDraw Settings app, create a Relationship between your object and a destination URL through metadata, and pass that recordId (of the underlying type you just created a relationship for) to the component or directly add the component to your record page. The id is passed to the component, and derived based on the metadata and path.

 

Salesforce Record Id

recordId

Id of the Salesforce Content Version where the binary rendering is stored. These are the underlying records for a Salesforce File that was uploaded to an associated record. There is no requirement to setup a metadata record prior to utilizing this attribute, as we are using the binary file uploaded to Salesforce servers.

 

Content Version Id

contentVersionId

Check this if you are using this component within a community. This is required regardless of where the component is hosted (Lightning flow, quick action, record page etc).

Use Communities

useCommunities

Read-Only attribute that is set to true when a user drags, points, scrolls or clicks on the rendering

Has User Interacted?

userInteracted

Debug View

SimpleRenderer Features

Explode meshes with ease. Select "Show Explosion Bar" from the ActionMenu, and use the slider to explode your drawings to gain more perspective on your products / materials

Exploded diagrams

After you pan, zoom and explode you can take a screenshot of the rendering to include in your Sales or Service scenario. Select "Take Screenshot" from the ActionMenu, and a HD image

Screenshots

Break Down the complexities of a 3D scene with ease- Explore layers, lighting and effects applied to your drawings.  Select "Show Debug Menu" from the ActionMenu to display the Scene Explorer and Inspector. From there, Nodes, Materials, Textures can be expanded and inspected.

 

Display and render related 3D files hosted in Salesforce

FileSelector was created to display related 3D files that were uploaded via the "Files" feature within Salesforce. Utilizing either the File Upload option of FileSelector, or the standard file functionality of each record type within Salesforce. To use, add the component to your record page, and upload 3D files to the record. FileSelector will display the listing of files, and when one is selected, a modal dialog will be displayed with a SimpleRenderer for the Salesforce hosted 3D file.

Usage of the FileSelector does not require setting up Metadata relationships, and can be used within Lightning Flow, on record pages, or as a Quick Action. Simply pass a Salesforce recordId, or add the component to a record page and FileSelector will do the rest

FileSelector

FileSelector Component API

Attributes

Sets the associated Salesforce record for a given Id. Based on this recordId, the FileSelector component will fetch the latest related 3D files for the given record, and display them in a scrolling list.

Salesforce Record Id

recordId

Display the file upload button as part of this component to allow users to upload 3D files. This is defaulted to true.

 

Show File Upload

showFileUpload

Quick Setup of RenderDraw

Setting up RenderDraw is simple. Follow these steps and you'll be ready experience 3D anywhere in Salesforce.

1

Install and Setup CSP

Play video

Installing the RenderDraw package and a review of RenderDraw settings

2

Setup your endpoint for use with RenderDraw

RenderDraw requests images from your server using HTTPS and CORS. This video breaks down using these with Google Cloud Platform as an example.

3

Initial RenderDraw Relationship and viewing 3D Renderings on  records

RenderDraw allows you to use any Salesforce Object to display your 3D renderings natively. This video covers how to add the needed 3D Components to a screen, with the default settings on the Product object in Salesforce.

4

In-depth setup RenderDraw Relationships and view 3D Renderings on  records

Create relationships based on a schema (either defined in Salesforce fields or as overrides) that allow for reliable fetching of Renderings based on objects- Even on custom objects!

Play video