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
-
p5.js
p5.js is a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing. -
mxGraph
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
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.
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest. Visit our partner's website for more details.
Do you think we are missing an alternative of three.js or a related project?
Popular Comparisons
-
three.jsvsp5.js
-
three.jsvsheatmap.js
-
three.jsvsprocessing.js
-
three.jsvsfabric.js
-
three.jsvsBabylonJS
|
SaaSHub - Software Alternatives and Reviews
View more from us
|
README
three.js
JavaScript 3D library
The aim of the project is to create an easy to use, lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples.
Examples — Documentation — Wiki — Migrating — Questions — Forum — Slack — 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 'js/three.module.js';
var camera, scene, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
scene = new THREE.Scene();
geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render( scene, camera );
}
If everything went well you should see this.