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

Wed Jul 24 2013

Paul Shan

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"]
[/code]

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

[code language="javascript"]
$("#myCar").vc3dEye({
	imagePath:"images/",
	totalImages:24,
	imageExtension:"png"
});
[/code]

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

SHARE THIS ARTICLE

Today everyone knows the importance of a lightning-fast website and how the speed impacts the conversion rate of a business. Today, everyone wants the site to be a PWA so that the mobile users can have an app-like experience with the website because, for the majority of the merchants, the customers come through mobile devices.
Tue Apr 20 2021
Here we are going to see how you can manage backup and restore of Postgres database with docker.
Thu Sep 03 2020
Image sliders or carousels always have increased the UI attraction of websites and they are pretty useful for reflecting the major roles/products too. In case, I am having a website that sells tee-shirts,
Mon Apr 30 2018

About VoidCanvas

This blog was created out of hobby and talks mostly about technology, web development, JavaScript, NodeJS and related topics. Thank you for reading my blog.

Copyright 2022 - www.voidcanvas.com

Popular Articles

Authentication using Google's oAuth api with node.js

Thu Mar 10 2016

OAuth authentications are pretty popular now a days and another thing which is popular is JavaScript. This article shows how to plugin google’s oAuth api for authentication in your own node application.

CSS3 Loader Snippet Collection: (Part 2 - Squares)

Sat Mar 01 2014

This is a continuation of my CSS3 loader snippet collection series. I've provided spinning css3 animation loader in the part 1 of this series and here in part 2, I'm providing various square type loading