thr

three

JavaScript 3D Library.

Showing:

Popularity

Downloads/wk

393K

GitHub Stars

75.2K

Maintenance

Last Commit

13hrs ago

Contributors

1,810

Reviews

Average Rating

4.6/5355
Read All Reviews
KamrulSh
sneha-subramannian
parimalyeole1
rohittp0
johncoco12
Codereapers
jayankb770

Top Feedback

34Great Documentation
28Easy to Use
26Performant
25Highly Customizable
14Bleeding Edge
9Responsive Maintainers

Readme

three.js

NPM Package Build Size NPM Downloads Language Grade

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 in the examples.

ExamplesDocumentationWikiMigratingQuestionsForumSlackDiscord

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';

let camera, scene, renderer;
let geometry, material, mesh;

init();

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 );
    renderer.setAnimationLoop( animation );
    document.body.appendChild( renderer.domElement );

}

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

Change log

Releases

Rate & Review

Great Documentation34
Easy to Use28
Performant26
Highly Customizable25
Bleeding Edge14
Responsive Maintainers9
Poor Documentation4
Hard to Use3
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
Kamrul Islam ShahinChittagong, Bangladesh73 Ratings53 Reviews
B.Sc in Computer Science and Engineering @ CUET 🌱 Educator 💻 Programmer 🌐 Developer
10 months ago
Easy to Use
Great Documentation
Performant
Highly Customizable

If you want an immersive 3D design environment in your applications then this library is for you. Creating 3D objects without using the library is a nightmare. It makes it possible to create 3D graphics by using plugins and that offers a vast amount of features for creating and displaying realistic looking 3D computer graphics on a web browser. You can also create animation and moving objects through a 3D scene. I just love it.


4
riginoommen
johncoco12
monsieurpigeon
cabbage9
sneha v24 Ratings28 Reviews
Computer science passionate
24 days ago

its a great library for playing with 3D and any graphics. Other choice is that to use WebGL but it will be great headache but three make a abstraction above t. If you have proper understating with the 3D concepts including the lighting and camera it wont be very difficult to start with but it require some time to get used. Th documentation includes many simple and complex projects using three going through that we get a idea about all


3
crazyankit2470
ankitiv
vaniakaashvani
Parimal YeolePune73 Ratings81 Reviews
Lang :Node[TS,JS] | Dart | Go | Haskell DB: Mongo | Postgres | Redis | DynamoDb | ElasticSearch Acrhitecture: Micro-service | Serverless AWS Certified
7 months ago
Great Documentation
Easy to Use

I used this library for my intern project where I use it for adding 3d objects in my web application. This library works excellent for my web app with great performance with WebGL support and also works excellent with Vue and Angular. Very easy to use if you're a beginner on the web. Helped me a lot and saved my development time. I recommend you if you are looking for 3d object library for JS. Use this. Also, this library has a great community so you will get the best resource out there.


2
movila
monsieurpigeon
RohitPayyanur, Kannur, Kerala, India35 Ratings35 Reviews
I am a second year computer science student.
2 months ago
Great Documentation
Highly Customizable
Bleeding Edge

One of the only options out there if you want to take full advantage of WebGL without writing the shaders yourself. The learning curve is pretty steep but still when you consider the learning curve and complexity of WebGL it is a good choice.


2
monsieurpigeon
riginoommen
Jason Jesse HuberGermany11 Ratings16 Reviews
Trainee at Kobold IT Management.
1 month ago
Highly Customizable
Bleeding Edge
Responsive Maintainers
Great Documentation
Performant
Hard to Use

I Used Threejs in many of my Javascript Game Projects and it's hard to use in the beginning but after a while, it's very easy to create good-looking scenes. and the Performance is just outstanding I can Recommend this library fully.


2
abhijithvijayan
katharinbenson