20 Best HTML5 3D Scripts and Snippets of 2020

Cristina Green April 25, 2020 0

1. Simple 3D Coverflow

Simple 3D Coverflow is a fully 3D multimedia coverflow slider plugin that allows to display multimedia content with an unique original layout from a 3D perspective. It’s perfect for any kind of presentation, for anyone that wants to deliver a great impact to thier visitors. It runs on all major browsers and mobile devices like iPhone, iPad, IOS, Android and Windows. When a thumbnail is clicked you can choose to do nothing, display multimedia content using our great revolution lightbox or to open a new webpage. The lightbox has support for image, video (mp4), audio (mp3), Vimeo, YouTube, iFrame, Google maps

and flash. Simple 3D Coverflow has high performance using OOP code and the latest CSS techniques, ready for mobile with swipe, very flexible, easy to setup and extremely customizable.

2. FlipBook

3D FlipBook is jQuery plugin that allows to browse images, PDFs or HTMLs as a flipping book. It can be used for demonstration magazines, books, cards,brochures, booklets and much more in natural way. It helps to attract user attention and make more impression on him.

3. dFlip PDF FlipBook jQuery Plugin

dFlip is an easy yet powerful 3D HTML5 flipbook jQuery plugin. Powered by Mozilla’s PDF.js library dFlip jQuery flipbook plugin can create amazing PDF flipbook, just with a PDF link. On top of that, using THREE.js and modern WebGL technology, you get a realistic 3D flipbook right-away with PDF or images. Also, if there is no WebGL support available in the browser or you want rather normal flipbook, dFlip will create capable HTML5 flipbook with just CSS with realistic 2D flip actions. So, in short you have pretty much covered be it – PDF flipbook, 3D flipbook, image flipbook, HTML5 flipbook; all in one plugin. WordPress Version is also available as Wordpress Flipbook Plugin.

4. HTML5 Photo Gallery

The HTML5 Photo Gallery – Resizable Album Grid XML is size flexible or fluid, it will adapt it’s size (width and height) based on the parent container (div or some other html tag) and every piece of the gallery will align and position accordingly, this basically mean that it can be used in any kind of website, it dose not matter if you need a small or large gallery, all you have to do is to add the gallery in a place which you have chosen in your website and the gallery will adapt. Also if you like you can instantiate the gallery to fit the browser’s viewport regardless of the screen resolution.Amazing performance for mobile using css3

5. Real3D FlipBook jQuery Plugin

Real3D Flipbook displays your PDF-s or images as ultra realistic 3D flipbooks inside your website. No flash needed, 100% HTML5. Easy to use. Customizable UI. Customizable flipbooks.. Fully responsive, optimized for mobile. Single page view, deep linking, interactive pages, PDF text search, PDF hyperlinks, unlimited books and pages, lightbox and much more.Real3D Flipbook transforms your documents into ultra realistic 3D flipbooks with page flip animations, lights and shadows. Easy to use and fully customizable. No flash needed, 100% HTML5. No server side conversion, everything is done at runtime, you just set the pdf file url or images. It supports dynamic HTML content on pages, add youtube video, text, image, link, iframe and style it with inline CSS. Pdf flipbook supports internal and external links and text search with keyword highlighting. It comes with multiple view modes : realistic WebGL mode, fast 3D & 2D mode (CSS only) and Swipe mode with horizontal swipe page transitions. You can choose different view mode for mobile and desktop. It is a mature product that offers the best reading experience on all platforms and devices. All future updates are free. Source files and documentation included.

6. Client Side Calendar

Client side calendar is a HTML5 application. It does not require any server side stuff, everything is stored locally in browser’s storage. If you need a simple calendar to track your daily activites, Client side calendar is for you.

Feature:

1. Pure client side application – super easy to install, simply drop the folder to any diretory, then you are ready to go.

2. HTML5 Web SQL Database – no need to setup any server side database, all data are stored in browser itself.

3. Javascript operation – directly interact with Web SQL, no page refresh, great user experience.

7. STL3D Viewer

Printed 3D products marketplace like Shape Ways for instance. This is a point-of-sale plugin for your customers to examine the 3D object before they hit “add to cart”. The STL file and the meta-information come from the server-side. See “Un-intended audience” at the very bottom, for further clarification.

Formats

Supports ASCII and Binary STL files.
Supports OBJ files (beta).

8. InteractiveEarth Globe 3D

Interactive Earth 3D allows to rotate a globe and call actions after clicking on the defined hotspots. This animated globe uses the HTML5 feature called WebGL. No plug-ins (e.g. Flash) are required.

You can add your own hotspots, connect and customize them:

position (longitude and latitude)
color
title
action

These actions are available:

open an image in the build-in lightbox
show a text or html content in the build-in lightbox
open a hyperlink
call a JavaScript callback
call your own JavaScript code

9. HTML5 3D Geolocation

It is not just a HTML5 geolocation! This is a powerful script that allows you to monitorate your visitors’ geolocation, thanks to php – javascript – html5. You can choose among two different types:

A 3D animated version;
A 2D static version;

Features

It is supported by all major browsers, and also by IE 7
Easy to custom, thanks to the offline documentation and to the offline generator code;
You can change: background color, map appareance, mark icon and speed too;
The package includes also two .psd files to custom even more it;
Possibility of edit the mark icon just uploading the mark icon which you prefer on your site!
You can set as maximum (suggested) height 600 px, and as width 1200 px.
Map images from NASA.

10. Space fill image gallery

Eye catching WebGL image gallery, perfect to embed on any site, perhaps with your own Instagram photos.

Features:

Your own photos: Put your own photos in the gallery easily.
WebGL: It uses blazing fast, hardware accelerated WebGL on the graphics card, and will make your site stay responsive.
Animation: Eye-catchy & good looking transitions between photos.
Navigation: The user can choose to transition to the next or previous photo in your collection.
Easy to use: There is no magic knowledge required to use this item. Take a look at the example on the demo page.
Multiplatform: WebGL is supported by all major modern browsers, and you can easily add a fallback for unsupported platforms.

11. Vertical Ultimate 3D Carousel

Vertical Ultimate 3D Carousel is a fully 3D multimedia carousel slider plugin that allows to display multimedia content with an unique original layout from a 3D perspective. It’s perfect for any kind of presentation,

for anyone that wants to deliver a great impact to thier visitors. It runs on all

major browsers and mobile devices like iPhone, iPad, IOS, Android

and Windows. When a thumbnailis clicked you can choose to do nothing,display multimedia content using our great revolution or to open a new webpage.The lightbox has support for image, video (mp4), audio (mp3), Vimeo, YouTube,

iFrame, Google maps and flash. Vertical Ultimate 3D Carousel has high performance using OOP code and the latest CSS techniques, ready for mobile with swipe, very flexible, easy to setup and extremely customizable.

12. 3D WebGL Billiards Pool 8

View Details

Features:

3D Webgl graphics
3D Physics
All Modern Browers support
Android, IPhone, IPad Support
Full weight – 5.9 mb, load about 4mb (depends on the device)
Play with friend
Play with computer
Easy installation and configuration
WordPress plugin provided
FullScren mode

13. 3D WebGL Puzzle

Features

3D Webgl graphics
All Modern Browers support
Android, IPhone, IPad Support
Light-weight – 1.5 mb
Uploud any picture
Easy installation and configuration
WordPress plugin included

14. Simple BG

Simple BG gives you opportunity to insert videos in your website background with very simple way. This script has function to pick best quality of video to show in your background and also have video control functions.

Features:

Youtube and native video support HTML5 with Flash fallback or other way around by option One simple Javascript call Fixed positioning (follows page scrolling) Absolute positioning (inside a div) Control functions such as pause, play, mute toggle, and more Works in every major browser

15. Clouds - jQuery 3D Animation

Clouds Animation – jQuery Plugin is the only animation that uses WebGL to create realistic 3D moving clouds that will blow your viewers away. It is easy to use, fully customizable and works everywhere that WebGL works.

Feature List

Realistic 3D graphics made with WebGL + Three.js
Easy to use and setup

16. 3D Quiz Girl - WebGL Game

The interface is in HTML so you can style it using regular CSS. The 3D models can be recoloured by editing texture images. The 3D geometry is in glTF format.

17. EASY FlipBook

EASY FlipBook uses 3D effects, sounds, usability UI. Our main task is to provide a high-quality flipbook with the necessary and sufficient set of realistic effects, observing the rule: a lightweight product that protects the battery of your client’s phone, because you don’t want to talk to a client whose phone’s battery is suddenly dead when using your site. The plugin visualizes a very realistic 3D model of the book, the leaves are bent, the corner is wrapped, you hear the rustle of paper due to sound effects. You can rotate the book and see that it has volume. The plugin is fully adapted for use on touch screen devices. You can scale the book, move it, rotate and all this, just by tapping the screen of the device with your finger.

18. 3D Webgl Connect4

Features:

3D Webgl graphics
All Modern Browers support
Android, IPhone, IPad Support
All Weight – 6 mb
Play with friend
Easy installation and configuration
WordPress plugin provided
FullScren mode

19. 3D Mall/Airport/Cruiseship Directory

3D Mall/Airport/Cruiseship Directory Website Template. In movie Star Wars, robot R2-D2 showed Jedi the 3D path to the top of the battle space ship to rescue Senator Palpatine. In this website app, we did the same thing. If you give R2-D2 a browser and add the store name into the URL. R2-D2 will show you the path to the store in a browser! If R2-D2 can search according to your words like Siri, then R2-D2 can automatically create a URL and show you the path in a browser. This 3D Mall/Airport/Cruiseship Directory Website is for customers to find their way to the expected store in a multi-floor building. Blender is used to create the 3D model of the mall. Three.js is used to move the 3D model.

20. 3D Earth HTML5 Canvas HTML5 Website

HTML5 Canvas Javascript 3D Earth.

Features:

HTML5
CSS3
Javascript
Including Source code
Fast Support

No comments

Subscribe to: Post Comments ( Atom )