Blog

Tips, news, and next Events about the KeyShot Community

How To Host a KeyShotVR on Google Drive or Dropbox

by KeyShot | Apr 8, 2015 | Tips | 2 Comments

Both Dropbox and Google Drive have ended support for hosting static web pages. Therefore, hosting a KeyShotVR on either of those platforms is no longer possible. However, outside of hosting it yourself, there is a better, easier way to host a KeyShotVR than either of these.

When you render a KeyShotVR, KeyShot produces all the images, the html file and javascript needed for viewing an interactive visual in a web browser. However, you need a place to host the files so others can view it on the web. Typically, you would upload the folder to your website host server through FTP. If you don't have your own web host, you may be wondering what the best option is to share your KeyShotVR's. You can easily do this using Google Drive. Here's how.

By default, when you render a KeyShotVR, KeyShot adds the KeyShotVR folder (inlcuding files and images) to your KeyShot resources /Animation/ folder. After you have rendered the KeyShotVR, follow the following instructions to host the KeyShotVR on Google Drive or Dropbox.

Host a KeyShotVR on Google Drive

Because Google Drive doesn't give you the link directly, this method is a little more involved. The Dropbox solution below is much faster. However, here's how to host a KeyShotVR (or any webpage for that matter) on Google Drive.

  1. Upload the KeyShotVR folder to Google Drive.
  2. Right-click on the folder and select Share...
  3. Click Advanced in the lower right corner.
  4. Select Change... and set the option On - Public on the web.
  5. Click Save, then click Done to close the Share Settings.
  6. Right-click the folder and select Get Link...
  7. Copy the ID (the string of numbers and letters), e.g. the highlighted red text here https://drive.google.com/open?id=0B4X51_CdVPwcdXZUc2pwWlBfS1k&authuser=0.
  8. Add the ID to the end of the URL, https://www.googledrive.com/host/, e.g. https://www.googledrive.com/host/0B4X51_CdVPwcdXZUc2pwWlBfS1k, hit Enter and you'll see the KeyShotVR appear in the browser.

Note: If your KeyShotVR html file is not named index.html, you will need to add that to the end of the url as well, e.g. https://www.googledrive.com/host/0B4X51_CdVPwcdXZUc2pwWlBfS1k/Skeletool_VR.html.

Host a KeyShotVR on Dropbox

If you have a Dropbox account, this is by far the easiest method for hosting a KeyShotVR. Just follow these three steps. Note: if you don't have a Public folder, you will need a Pro or Business account, then select this link https://www.dropbox.com/enable_public_folder to enable your Public folder.

  1. Upload the KeyShotVR folder to your ..\Dropbox\Public\ folder.
  2. Right-click on the KeyShotVR html file, e.g. Skeletool_VR.html, and select Copy Public Link.
  3. Paste this into the browser and you'll see the KeyShotVR appear.

Embed a Responsive KeyShotVR on a Webpage

The instructions.html produced when rendering a KeyShotVR includes directions on how to embed a KeyShotVR and make it responsive (fit the width of a browser or div), but we'll include how to do it here as well. To embed a KeyShotVR, copy the following code to your website page and replace the red highlighted text (the source url) with the url of your own KeyShotVR. When creating the VR from KeyShot, the highlighted blue text will be automatically generated by KeyShot, but you can adjust this to match the aspect ratio of your KeyShotVR, i.e. 100% for 1:1, 75% for 4:3, 56.25% for 16:9, and so on.

<div style="left:0px; width:100%; height:0px; position:relative; padding-bottom:75%;">
<iframe src=" https://dl.dropboxusercontent.com/u/2182915/KeyShotVR/Skeletool_VR/Skeletool_VR.html" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;"></iframe>
</div>

Here's the example KeyShotVR using the code above. Go ahead, give it a spin, and if you have some of your own, share them here or on the KeyShot forum.

Previous Article
How To Use Depth of Field in KeyShot
Next Article
Animation of the Week: KeyShot Caustics