I am trying to create a 360/3D view of a product(s).
To accomplish this, I started by using 3dEye. With this jQuery plug-in, all I have to do is dump regular photos into a folder. Ej, photos/cup-1/, photos/cup-2/ and photos/car/
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>3D Products</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="3deye.min.js"></script>
<script>
$(document).ready(function(){
$("#cup-1").vc3dEye({
imagePath: "photos/cup-1/",
totalImages: 7,
imageExtension: "jpg"
});
$("#cup-2").vc3dEye({
imagePath: "photos/cup-2/",
totalImages: 13,
imageExtension: "jpg"
});
$("#car").vc3dEye({
imagePath: "photos/car/",
totalImages: 51,
imageExtension: "png"
});
});
</script>
</head>
<body>
<h1>Sample of 360-view products</h1>
<h2>Move the object with the mouse</h2>
<br /><br />
<div id="cup-1"></div>
<div id="cup-2"></div>
<div id="car"></div>
</body>
</html>
Live sample: http://stackoverflow.juvera.co/360-view/
However, 3dEye has a lot of drawbacks.
- I can only have one object on the same page. If I add more pages, it covers the other objects with a green overlay and the loading label remains.
- It has no zoom option
- No controls for movement (like autoplay, move left button, move right button)
- etc.
Do you know of a really good jQuery plugin (or other solution) I could use to accomplish this?
It has to be mobile friendly and allow screen swiping (with the finger)
PS. It would be great if I could use the same solution for panorama and virtual tours...but if not is OK
