Object with transparent background for iFrame

Q&A about the latest versions
Post Reply
User avatar
Hopki
Gnome
Posts: 9652
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Object with transparent background for iFrame

Post by Hopki » Sun Nov 17, 2019 4:45 pm

Hi,
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

1.png
1.png (24.41 KiB) Viewed 959 times

Then still in the Settings tab and under Display, deselect background colour.

2.png
2.png (22.34 KiB) Viewed 959 times

Now go to the HTML tab and select Fullscreen.

3.png
3.png (19.63 KiB) Viewed 959 times

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:

4.png
4.png (36.49 KiB) Viewed 959 times

Now edit the tag so it looks like this:

5.png
5.png (57.8 KiB) Viewed 959 times

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.

Code: Select all

<iframe src="assets/object/index.html" width="100%" height="100%" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" frameborder= "0" allowtransparency="true" ></iframe>
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

6.png
6.png (182.1 KiB) Viewed 959 times
Project attached.
Regards,
Hopki
Attachments
ObjectPNG.zip
(2.89 MiB) Downloaded 19 times

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests