using and customizing widget instructions
To place 3D-panoramas on your site, follow three easy steps
1
If you plan to place on the page several windows with a panoramic view place the widget "Connecting the JS" before first pan - so this WebGL library will be loaded only once and load speed will be improved.
2
Place in the right place on your page widget "3D view" and make its setting. Detailed description of all widget settings are located below.
3
For each 3D photos place the "widget-button" to create a 3D gallery.
Depending on the desired design you can choose a widget "Text button", "Picture button" or both options concurrently.
widget settings description
3D panorama
- 3d image - file with a 3D photo
- Alternative 2d Image - showing, when browser is not supported WebGL or JavaScript
- GIF preloader - GIF animation, which will playing while panorama are loading
- JavaScript library - WebGL library file
- Auto rotate speed - sets the speed of autorotation panorama. A negative value sets the pan rotation in the opposite direction.
- Hand rotate speed - sets the sensitivity to the movements of the mouse. A negative value sets the pan rotation in the opposite direction.
- Enable zoom - adds the ability to zoom in and out the panorama, however, this function takes the action of the mouse wheel while scrolling the page in the browser. Do not use this option if the panorama takes more than 70% of the width of the page!
- Panorama ID - connects the button that performs change of 3d photos and panoramic window.
Text-button
- 3d image - file with a 3D photo
- Button text - text on the button. Use the standard Adobe Muse software tools to customize the text style, alignment, and other necessary parameters, are not available in the widget's settings.
- Panorama view ID - It indicates a window for which the button will work
Because Adobe Muse is not possible to change the style for the different "states" of widgets, some fields are added:
- Background Color - sets the color of the button
- Background color on Hover - sets the color of the button on mouse over
- Background color on Active - button color while pressing the left mouse button
- Shadow color - sets the color of the shadow
- Shadow color on Hover - specifies the shadow color on mouse over
- Shadow color on Active - sets the color of the shadow by clicking the button
Image-button
- 3d image - file with a 3D photo
- Panorama view ID - It indicates a window for which the button will work
Use the standard Adobe Muse software tools to customize the background image and other necessary parameters are not available in the widget's settings
Connect the JavaScript player
- JavaScript library - WebGL library file
This widget has no visual display on the page, so it can be placed anywhere!
buttons connections Examples
1
One panorama with image buttons
- Place the "image button" widget on your page
- Set a 3D photo in widget settings
- Set a background image using a standard Adobe Muse tools
- Repeat this steps for each 3D photo
2
Two panoramas - the first with text buttons, second - with image buttons
3
3D tour
For create 3D tour like that, follow three simple steps:
- Place a translucent rectangle over your panorama
- Place over the rectangle the PNG plan-scheme of house.
- In places Stitch Assist place the "image button" widgets and asset to them 3D photos
subtleties of optimization 3d pictures
3D image restrictions:
- The ratio of width and height must be strictly 2 to 1. If for some reasons you have decided to use the photo with incomplete panoramic view you need to increase the height of the picture to 1 / 2 of its width in any graphics program ( in the panorama should get a white / black region above and below).
- Image resolution shall not exceed 10,000 x 5,000 pixels ( especially WebGL )
- An image that is larger than 4 MB is not recommended to use because large photos will significantly reduce the speed of loading your site.
- Your site mobile version must have 3D photo with size less than 2000 x 1000 or more than 3500 x 1750 pixels. This is due to the fact that the drop-down period permissions correctly displayed on some versions of iPhone. (Linked to the implementation of WebGL support on iPhones)
It is established experimentally that the best balance of image quality and download speed is achieved when the size of the 3D file photo
- In computer version- from 1 to 2 MB and the resolution of 4000 x 2000 pixels
- In mobile version - about 500 KB and the resolution of 2000 x 1000 pixels
To quickly and easily create thumbnails from 3D photo open your panorama in a browser, set a good camera angle and select right click - "save image as"
all needed files has been included in archive with widget
for all questions and suggestions please contact us by e-mail urglokki@gmail.com