Whether building a catalogue for your next launch or creating a team workspace to manage your 3D assets and their real world counterparts, the VNTANA Canva App makes it a snap to embed your 3D right into your Canva workspace. Simply grab the share link from your 3D asset on the VNTANA Platform and pop it into the Canva App to generate a 3D viewer.
Installation
Installation is trivial and completely handled from within your Canva workspace. Simply open the Apps directory on the left side bar, search for VNTANA, and select the VNTANA App. There is no connection necessary and the App will not access your VNTANA accounts.
Alternatively, if you are starting from the homepage without a design open, click the Apps button on the left and search for VNTANA. Click the VNTANA app and the below frame will pop-up. You can either click to use it in an existing design or start a new one with the App pre-installed. Note: you need to be working with a presentation design.
Using the VNTANA App
The VNTANA App for Canva is designed to ingest a valid VNTANA Product’s share link and generates an interactable 3D viewer within the current Canva workspace. Simply enter your share link into the URL field of the App panel and press the ‘Embed 3D‘ button.
Retrieving a Share Link
To retrieve a Product’s share link, simply access the Product on the VNTANA Platform, navigate to the Embed Code section located under the Viewer, and press the arrow icon to copy the Share Link (see image below).
Important: There are two icons shown in the Embed Code section of a Product. One corresponds to the full iFrame code used to embed the viewer in a website while the other is simply the Share Link used to view the 3D viewer and Product in a full webpage. You must enter the Share Link (arrow icon), not the iFrame.
Interacting with the 3D Viewer
The 3D viewers embedded into your Canva workspace allow some manipulation. You can resize the viewer (it is locked to a 1:1 aspect ratio) as well as reposition it. Additionally, you can directly interact with the contents of the viewer by double-clicking on the viewer. This gives you control over the camera and can rotate the 3D model, zoom in, and pan. The full screen button can also be utilized if you need to view the product more closely without needing to resize the component.
The viewer will also retain the settings you apply on the Platform in terms of the environment, lighting, background, as well as show any Hotspots you’ve applied.
The Canva app will accept share links for both a single Product as well as a Variant Group / Simple Configurator. For more info on what a Variant Group / Simple Configurator is, see this guide.
Limitations
- The App is contained within an iFrame generated by Canva. This means certain control over its contents is limited, as well as control over the component generated by the App. When handling presentation mode or downloading a PNG of the workspace, Canva will reload the page causing the 3D viewers to have to reload as well. This can cause two issues:
- WebGL Context is Lost: if this occurs, a message will be displayed in the viewer indicating this, and you will have to reload the page.
- PNG Shows Loading Bar: When downloading a PNG, if too many viewers need to be loaded in the page there’s a chance some may not load fast enough and the PNG will show the loading graphic.