This guide will go over the current functionality of the Plattar Viewer and how you can set up and interact with the iframe to create your own 3D experiences in your website.
Adding the iframe to the page
Add the following iframe into your page where you want the embed to appear. You can style it however you want and add a background as the Plattar frame is transparent.
<iframe id='plattar-frame' src="https://app.plattar.com/webgleditor/preview/index.html" width='100%' height='500px' frameborder='0'></iframe>
A Plattar viewer communicator interface is available to use in your website, you will need to add the following script into the page to access it.
<script type="text/javascript" src='https://app.plattar.com/webgleditor/embed/plattar-viewer-1.0.0.min.js'></script>
Sending messages to the Plattar Frame
The following script will initialise the communication interface and show how you can send messages to the iframe.
Send Message function
Send commands to the Plattar Frame
var comms = new PlattarViewerCommunicator(); // comms.init('<plattar-iframe-id>'); comms.init('plattar-frame'); // comms.send('<eventName', <data>); comms.send('initpreview', {});Receiving messages from the Plattar Frame
The following code will create an event listener for any Events coming out of the Plattar Frame.
Creating Plattar Frame Listener
Will react to Plattar Frame events
/* comms.on('<eventName>', function(data){ console.log(data); }); */ comms.on('previewready', function(data){ console.log(data); });Sample Implementation
var comms = new PlattarViewerCommunicator(); comms.init('plattar-frame'); comms.send('initpreview', {}); comms.on('previewready', function(data){ console.log('Frame is ready'); comms.send('loadscene', {sceneId: '538cc270-69b9-11ea-9b42-bff658b66cc6'}); }); comms.on('setLoading', function(data){ if(data.loading === false){ console.log('Scene has Loaded'); } });