20 Interactive 3D Javascript Libraries & Frameworks

Modern browsers have evolved drastically. And one of the new exiting possibilities is the rendering of interactive 3D graphics within the browser. So here we present 20 Interactive 3D Javascript Libraries & Frameworks for creating 3D graphics on the web.



Three.js

Three.js is a high-level cross-browser 3D Javascript graphics library and API that allows you to render 3D computer graphics on your browser, established by Ricardo Cabello in 2010 and now supported by a wide community.

Three.js


Aframe

A-Frame is an open source javascript framework for building VR on the web. WebGL originally made it possible to build VR for the web, but it took many lines of code to setup a simple scene. With A-frame, a lot of the grunt-work is simplified.

Aframe


Babylon.js

Babylon is a javascript framework that is built above the Web Graphics Library. WebGL API is used for rendering graphics within a web browser. BabylonJS takes away a lot of the complexity involved with programming in WebGL.

Babylon.js


Zdog

Zdog is a 3D JavaScript engine for canvas and SVG. With Zdog, you can design and render simple 3D models on the Web. Zdog is a pseudo-3D engine. Its geometries exist in 3D space, but are rendered as flat shapes. This makes Zdog special.

Zdog


PlayCanvas

PlayCanvas is an open-source game engine. It uses HTML5 and WebGL to run games and other interactive 3D content in all modern browsers without the need for a plugin.

Engine


WhitestormJS

It is a javascript game engine. It wraps physics, lighting, surfaces, textures in a yet simple and powerful API.

Whs.js


Xeogl

A WebGL-based 3D engine for technical visualization.

Xeogl


Cesium

CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It uses WebGL for hardware-accelerated graphics, and is cross-platform, cross-browser, and tuned for dynamic-data visualization.

Cesium


Claygl

A WebGL graphic library for building scalable Web3D applications.

Claygl


Turbulenz_engine

Turbulenz is a modular 3D and 2D game framework for making HTML5 powered games for browsers, desktops and mobile devices.

Turbulenz_engine


Voxel

The goal of this project is to provide a lightweight 3D CSS library with very simple implementation.

Voxel


Photon

Photon is a JavaScript library that adds simple lighting effects to DOM elements in 3D space. It’s rather processor-intensive, so please use responsibly.

Photon


Svg Mesh-3d

A high-level module to convert a SVG path string into a 3D triangulated mesh. Best suited for silhouettes, like font icon SVGs.

Svg Mesh-3d


Interactive 3d

jQuery Interactive 3D let you create a 3D interactive object using several images as frames allowing the user to drag around and manipulate the image. This plugin is perfect for showcasing your product on the web.

Interactive_3d


Phoria.js

JavaScript library for simple 3D graphics and visualisation on a HTML5 canvas 2D renderer. It does not use WebGL. Works on all HTML5 browsers, including desktop, iOS and Android.

Phoria.js


Divsugar

DivSugar is a CSS-based 3D graphics library, which provides a 3D scene graph, an animation system, and geometry classes. Each node of the scene graph is an extended div element, so it is very easy to integrate 3D animations into existing web pages.

Divsugar


Cannon.js

Inspired by three.js and ammo.js, and driven by the fact that the web lacks a physics engine, here comes cannon.js. The rigid body physics engine includes simple collision detection, various body shapes, contacts, friction and constraints.

Cannon.js


Vanilla Tilt.js

A smooth 3D tilt javascript library.

Vanilla Tilt.js


Voodoo.js

Voodoo lets 3D WebGL objects be placed anywhere on a standard HTML page. Above. Below. Side-by-side. The goal is to make designing for 3D on the web as natural as 2D. Behind the scenes, Voodoo maps its 3D space onto the 2D landscape, allowing 3D objects to scroll and resize automatically with the rest.

Voodoo.js


Svg 3d-builder

This framework aims at creating 3d models with SVG and to provide a concise API. It is purely developed with concepts of two-dimensions. One of its essential implementations is Bezier in both curve and surface.

Svg 3d-builder


Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.