3dEye.js, a plugin to create 360 degree 3d panoramic view, works in all major browsers and mobile devices
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.
You can move the object with your mouse to see its 3d view.
It supports in all major browsers.
It works fine in Android and iOS mobile devices (touch).
Very easy to use.
Why 3d Eye is better than other 360 degree panorama plugins:
It is very light weight. 3dEye is one of the smallest plugins with only 1.5KB volume.
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.
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.
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.
Step 3: Make a div in your HTML file
Step 4: Call the vc3dEye() function, with the respective parameters.
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
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.
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
Copyright 2022 - www.voidcanvas.com
Authentication using Google's oAuth api with node.js
Thu Mar 10 2016
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