3dEye.js, a plugin to create 360 degree 3d panoramic view, works in all major browsers and mobile devices

3dEye 1.0.0 beta, a jquery plugin which is easy to implement, works in all the major browsers, runs smoothly in touch devices without any extra touch plugin has been launched on 24th July 2013. Click on the following links to view demo or to download source code.

live-demo-button download-button

Though there are few more plugins which makes 360 degree panoramic view, but 3dEye is much more different from them.

Key features:

  1. You can move the object with your mouse to see its 3d view.
  2. It supports in all major browsers.
  3. It works fine in Android and iOS mobile devices (touch).
  4. Very easy to use. 

Why 3d Eye is better than other 360 degree panorama plugins:

  1. It is very light weight. 3dEye is one of the smallest plugins with only 1.5KB volume.
  2. Though there are few more plugins who creates a 360 degree panoramic view, but you will hardly find any which works smoothly in touch devices. 3dEye works in all touch devices without any other touch plugin support.
  3. It’s very easy to use. You need not to provide each and every image link. Just provide the link of the folder where you’ve kept the panoramic images and provide the extension of the images and leave rest of the things on 3dEye.
  4. You need not to provide the height width separately; it will automatically take the physical size of your images.

How to use:

It’s one of the very simple plugins to use. Following 4 steps will describe how to use 3dEye.js

Step 1: Capture few consecutive images of the object, whose 3d view you are gonna make. The simplest way to do that is, don’t move the background or camera, just move the object. Place the camera infront of a static background and place the object in between. Now rotate the object by 7 to 10 degree anticlockwise and capture pictures. Also name the pictures accordingly (1.png, 2.png, 3.png and so on). Use command prompt to rename the files, it will be easier. Then put all the images in a single folder.

Step 2: Link the 3deye.min.js file.

<script type="text/javascript" src="js/3deye.min.js"></script>

Step 3: Make a div in your HTML file

</pre>
<div id="myCar"></div>
<pre>

Step 4: Call the vc3dEye() function, with the respective parameters.

$("#myCar").vc3dEye({
	imagePath:"images/",
	totalImages:24,
	imageExtension:"png"
});

imagePath is the location where you’ve put the images.
totalImages is the number of images you have.
imageExtension is the extension of the images. Make sure all the images have same extension.

And, that’s all. Your 3d object viewer is ready.

Download the plugin

CDN Links:

Latest: http://voidcanvas.com/plugins/3deye-latest.min.js

Version 1.0.0: http://voidcanvas.com/plugins/3deye-1.0.0.min.js

Please visit the Official Page of 3dEye.js

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.

  • drvipinlalt

    good plugin… thanks

  • Andy Trần

    Hi Admin,

    This script is work perfect, but I want add 2 3d object in one page, any solutions?

    Thanks,
    Andy

  • Muhammed Karakoyun

    Hi,

    3dEye plugin example, gives error when I want to run

    $(document).ready(function(){
    $(“#myCar”).vc3dEye({
    imagePath: “img/360”,
    totalImages: 16,
    imageExtension: “png”
    });
    });

    jQuery version 1.8.3

    Chrome Console Error “Uncaught TypeError: undefined is not a function”

    How can ı solve this problem

    thank you

    • metalshan

      The library file has not been executed for some reason.
      Probably you have included the library before the jquery library in your html. Can you send me the code?

  • Nirav Raval

    I want to use base64 (encoded string) instead of image, is there any way I can achieve this with 3deye.js ?

  • Oleg Panf

    please, send me a set of images from the demo