Simply3D™ makes it easy for you to add 3D elements and augmented reality content to any of your websites easily.
This introductory guide will teach you everything you need to know about uploading your 3D files and making them ready for your customers to experience.
Quicklinks
- Logging in to Simply3D™
- Adding 3D models
- Sharing your 3D content
- Embedding 3D content on your website
- Public Link for Sharing
- Embedding a 360 spinning model on your site
- Embed a QR Code and SMS Modal
We’ll cover all the basic topics here but first let’s talk about what Simply3D™ actually does.
Simply3D™ is a 3D content management system
Sharing 3D files around the web can be a complicated task and we try to make it easy to embed 3D files on your website and allow users to transfer them to their mobile device so they can view products in their room and try them out before they buy,
Like popular video sharing platforms Simply3d™ seeks to take the coding out of the process of adding 360 spinning 3D to your websites or linking customers through to AR on iOS and Android devices.
Log in to Simply3D™
Click here to set up an account on Simply3D™. Once you are signed up to a workgroup you will be able to add 3D models and share those 3D models with team members and collaborators.
Adding 3D models
Adding models to the Simply3D™ environment is easy. Select the Upload button on the main page and do the following.
- Choose a name for your model
- Add a 500 x 500 pixel thumbnail (JPG or PNG)
- Add your GLB file (AR for Android)
- Add your USDZ file (AR for iOS)
Sharing your 3D content
Once your 3D files are up on Simply3D™ we make it really easy for you to link through to AR, share your content via URL or embed on your website.
Click on the 3d model image and a pop-up screen will allow you to spin around the model in 360. Use your mouse to zoom in on the object to see detail.
You will also see a unique QR Code that will link you directly to an augmented reality experience if you are on an iOS or Android device.
Point your phone’s camera a the QR code and it will automatically recognize the device and take you into the model viewer (Android) or Quick Look AR (iOS). This QR code and can be downloaded and saved to be used as an image on the web or in print.
Embedding 3D on your website
You’ll notice and EMBED button located in the upper right of the 360 view page. Click on the embed to revel code for placing your content on the web.
Public Link for Sharing
This link is the main URL for sharing, Copy this link and send it via email or post it on your website. This will take you to a website that will simply display your content to your customer and allow them to scan the QR code and spin the 3D model.
This is the fastest and easiest way to share your content with your audience.
Embedding a 360 spinning model on your site
Another thing you can do with Simply3D™ is embed 360 spinning content on your site.
Grab the following code from the Embed Code: 360 Spinner section and add it to the body of your HTML file as an iframe.
<iframe width=”560″ height=”560″ src=”https://simply3d.io/#/embed/LEnusg5cBggJGOloRzbF” frameborder=”0″></iframe>
This will embed the 3D model alone on your website and enable your clients to rotate the entire model in 360 or zoom in to look at more detail.
Embed a QR Code and SMS Modal
You can also embed some code into your website that allows you to link a button through to a pop-up modal that gives your users the option to scan a QR code or text themselves a link.
In the body of your HTML document add the following lines of code.
<!– jQuery –>
<script src=’https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js’></script>
<!– jQuery Modal –>
<script src=’https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js’></script> <link rel=’stylesheet’ href=’https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css’ />
<!– Modal HTML embedded –>
<div id=’embed’ class=’modal’ style=’height: 600px;’>
<iframe id=’iframe’ width=’100%’ height=’570px;’ frameborder=’0′ scrolling=’no’ src=”></iframe>
</div>
For the button, you will implement the follow code in the HTML Body.
<!– Button to open the modal –>
<div align=’center’>
<a id=’showModal’ style=’cursor:pointer;font:14px Arial;background-color: #333333;text-decoration: none;color: #ffffff;padding: 14px 26px 14px 26px;’>SHOW MODAL</a>
<script>$(‘#showModal’).click(function(event) {$(“#iframe”).attr(“src”,”https://simply3d.io/#/embedqr/LEnusg5cBggJGOloRzbF”); $(‘#embed’).modal({showClose: false});});</script>
</div>
After you add the button the pop-up should look something like this.
0 Likes
