Below is your KeyShotVR. To view the KeyShotVR by itself open the 3DRENDERFINAL.216.html file in the 3DRENDERFINAL.216 folder.
<iframe>
tag in the <body>
section of the html file and update the <src>
attribute to reflect the location of the VR on the webserver. Example: <iframe src="3DRENDERFINAL.216.html" width="1074" height="721" frameborder="0" scrolling="no"></iframe>
If you are sharing via email. You will need to send the entire zipped 3DRENDERFINAL.216 folder to the end recipient.
Open 3DRENDERFINAL.216.html in a code editor and modify the value var downScaleToBrowser
to be set to true
, if this was not enabled inside of KeyShot. This will allow the VR to downscale with the browser when resized to mobile resolution.
If you're embedding the VR within an iframe
and wish for the iframe
to be fluid, it is important you add the below JS snippet to your website at the botttom of the page just above the closing body
tag. This script will enable all iframe
tags to be fluid on the page.
var vrIframe=document.getElementsByTagName("iframe");var pNode=[];for(var i=0;i<vrIframe.length;i++){vrIframe[i].dataset.aspectRatio=vrIframe[i].height/vrIframe[i].width;vrIframe[i].dataset.maxHeight=vrIframe[i].height;vrIframe[i].dataset.maxWidth=vrIframe[i].width;pNode[i]=vrIframe[i].parentNode} window.addEventListener("resize",function(){for(var e=0;e<vrIframe.length;e++){var t=pNode[e].clientWidth;if(t<vrIframe[e].dataset.maxWidth){vrIframe[e].height=t*vrIframe[e].dataset.aspectRatio;vrIframe[e].width=t}}});var evt=document.createEvent("UIEvents");evt.initUIEvent("resize",true,false,window,0);window.dispatchEvent(evt)