Description
The aim of the project is to create a lightweight 3D library with a very low level of complexity — in other words, for dummies. The library provides , , CSS3D and WebGL renderers.
three.js alternatives and similar libraries
Based on the "d3" category.
Alternatively, view three.js alternatives based on common mentions on social networks and blogs.
-
-
echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser -
-
BabylonJS
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework. -
p5.js
p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs — -
-
paper.js
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey -
-
-
-
-
-
-
-
-
mxGraph
DISCONTINUED. Diagramming library that enables interactive graph and charting applications to be quickly created that run natively in any major browser that is supported by its vendor. -
-
-
-
-
-
-
processing.js
DISCONTINUED. Processing.js makes your data visualizations work using web standards and without any plug-ins -
-
-
-
-
-
-
jquery.sparkline
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser -
-
-
-
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of three.js or a related project?
README
three.js
JavaScript 3D library
The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available as addons.
Examples — Docs — Manual — Wiki — Migrating — Questions — Forum — Discord
Usage
This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a WebGL renderer for the scene and camera, and it adds that viewport to the document.body element. Finally, it animates the cube within the scene for the camera.
import * as THREE from 'three';
// init
const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animation );
document.body.appendChild( renderer.domElement );
// animation
function animation( time ) {
mesh.rotation.x = time / 2000;
mesh.rotation.y = time / 1000;
renderer.render( scene, camera );
}
If everything went well, you should see this.
Cloning this repository
Cloning the repo with all its history results in a ~2 GB download. If you don't need the whole history you can use the depth parameter to significantly reduce download size.
git clone --depth=1 https://github.com/mrdoob/three.js.git