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. -
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?
|
Proactively monitor your users' experiences and reduce MTTR with Datadog Synthetics. 14-day free trial.
More from our partner
|
Popular Comparisons
-
three.jsvsp5.js
-
three.jsvsheatmap.js
-
three.jsvsprocessing.js
-
three.jsvsBabylonJS
-
three.jsvsfabric.js
|
SaaSHub - Software Alternatives and Reviews
More from our team
|
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 — Gitter — Slack
Usage
Download the minified library and include it in your HTML, or install and import it as a module, Alternatively, see how to build the library yourself.
<script src="js/three.min.js"></script>
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.
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.