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

Paul Shan Wed Jul 24 2013
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. 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. [code language="html"] [/code] Step 3: Make a div in your HTML file [code language="html"]

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

[code language="javascript"]

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
ProjectjqueryVC ProductJavascriptplugin

Written By

Paul Shan


  • E


  • R

    React JS

  • C


    Cascading style sheets only

  • S


    Search engine optimization

  • E


  • C


    wordpress, drupal, jumla, magento and more

Show All


advanced js
Web development
vue css
social share buttons
react datetime picker
jquery chart library
instant search using vue
event loop
best practices

Show All