How To Use
Which panorama image you can use?
Horizontal and vertical 360° images with 1:2 ratio
Images with 1:6 ratio, easy for ceiling, floor, tripod retouch.
A circle panorama without top and floor
Information:
For better compatibility, please use images that have power-of-two resolution (4096x2048, 2048x1024 and etc), because some old GPUs only support power-of-two textures.
Setup your config
If you want to create a config quickly and easily, without having to worry about manual changes, use our builder. The builder is a web-based designing app and it's included in the package. It enables users to create a virtual tour in a short period. This saves you so much in terms of time and resources. The following video tutorial will show you how to build a simple config using the builder and publish a virtual tour on your site. This video is a quick overview of using the builder. Please use our contact form if you have any further questions.
Create a simple HTML file
1. Load jQuery.js, Three.js and jquery.ipanorama.min.js in the head section for your html document
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/jquery.ipanorama.min.js"></script>
2. Load the CSS theme file that styles the plugin
<script type="text/css" src="css/ipanorama.css" rel="stylesheet" media="all"></script>
<script type="text/css" src="css/ipanorama.theme.default.css" rel="stylesheet" media="all"></script>
3. Create a DIV with unique ID:
<div id="panorama"></div>
4. Finally just call the plugin with your ID as parameter
4.1 Simple example
$("#panorama").ipanorama();
4.2 Advanced example with two different type of scenes and virtual tour support
$("#panorama").ipanorama({
sceneId: "main",
scenes: {
main: {
type: "cube",
image: {
left: "assets/images/left.png",
right: "assets/images/right.png",
top: "assets/images/top.png",
bottom: "assets/images/bottom.png",
front: "assets/images/front.png",
back: "assets/images/back.png",
},
hotSpots: [
{
pitch: 0,
yaw: 0,
sceneId: "second",
},
],
},
second: {
type: "sphere",
image: "assets/images/sphere.jpg",
hotSpots: [
{
pitch: 0,
yaw: 0,
sceneId: "main",
}
],
}
},
});
