This is what the result will look like: Object in Panorama
Firstly all your input images need to be PNG with the background cut out.
The attached project images started out as JPEG's and took me about 20 minutes to cut out the background using Photoshop.
Once you have all your PNG files open Object2VR and add the images to the light table or use the Select Input button.
Add an HTML5 output.
Under the settings tab select images Format: PNG
Then still in the Settings tab and under Display, deselect background colour.
Now go to the HTML tab and select Fullscreen.
Do not use multi-resolution, at the moment this will not work so keep it a single resolution project.
Create the output.
When you are happy with the Object and you will not make any more outputs you need to set the body colour to transparent.
Open the HTML page in the output folder with a plain text editor.
Look for the body tag found under the head sections, it will look like this:
Now edit the tag so it looks like this:
The code is:
Code: Select all
<body style="background-color: transparent;">
An iframe is used to display the object but needs the allowtransparency="true" attribute.
This said in one test, I did not include this attribute and it still worked.
To add this to another Object2VR project or to a Pano2VR project, just add a text box to the skin and paste in the iframe.
In this example using Pano2VR, I have added the text box to a point hotspot and used 3D distortion.
Currently, Object2VR does not support 3D distorted point hotspots.
Please see the Pano2VR forum post to see how this is done.
Example of the iframe with the allowtransparency="true" attribute.
Here is a screenshot of the object in a panorama. But you can also have an Object in an Object, a Panorama in an Object as well as Object in a Panorama
Code: Select all
<iframe src="assets/object/index.html" width="100%" height="100%" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" frameborder= "0" allowtransparency="true" ></iframe>