All Projects → mrdoob → Three.js

mrdoob / Three.js

Licence: MIT License
JavaScript 3D Library.

Programming Languages

184084 projects - #8 most used programming language
75241 projects
2310 projects
56736 projects

Projects that are alternatives of or similar to Three.js

A lightweight 3D game engine for the web.
Stars: ✭ 345 (-99.56%)
Mutual labels:  3d, webgl, svg, webaudio, html5, canvas, webxr
Future web pattern
Stars: ✭ 141 (-99.82%)
Mutual labels:  3d, webgl, svg, webaudio, html5, canvas
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.
Stars: ✭ 15,479 (-80.22%)
Mutual labels:  3d, webgl, webgl2, webaudio, webxr, webgpu
a fresh & lightweight javascript game engine
Stars: ✭ 3,721 (-95.24%)
Mutual labels:  webgl, webgl2, webaudio, html5, canvas
Create all the [ch]arts by cax or three.js - Cax 和 three.js 创造一切图[表]
Stars: ✭ 152 (-99.81%)
Mutual labels:  3d, webgl, svg, html5, canvas
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.
Stars: ✭ 1,039 (-98.67%)
Mutual labels:  3d, webgl, webgl2, html5, canvas
Unity Webxr Export
Develop and export WebXR experiences using Unity WebGL
Stars: ✭ 130 (-99.83%)
Mutual labels:  webgl, augmented-reality, virtual-reality, webxr
D3 Earth JS
Stars: ✭ 128 (-99.84%)
Mutual labels:  3d, webgl, svg, canvas
A cross platform high-performance graphics system.
Stars: ✭ 4,712 (-93.98%)
Mutual labels:  3d, webgl, webgl2, canvas
React Force Graph
React component for 2D, 3D, VR and AR force directed graphs
Stars: ✭ 589 (-99.25%)
Mutual labels:  3d, webgl, augmented-reality, canvas
Layaair discard
This is old LayaAir veriosn writetten by ActionScript 3.0 ,now LayaAir is using TypeScript as the Engine Script,Please use instead.
Stars: ✭ 1,858 (-97.63%)
Mutual labels:  3d, webgl, html5, canvas
Native VR/AR/XR engine for JavaScript 🦖
Stars: ✭ 809 (-98.97%)
Mutual labels:  webgl, virtual-reality, canvas, webxr
Playcanvas Ar
Fast and Easy Augmented Reality for the Web 🚀
Stars: ✭ 172 (-99.78%)
Mutual labels:  webgl, webgl2, augmented-reality, html5
Fast and lightweight JavaScript game engine built on WebGL and glTF
Stars: ✭ 6,890 (-91.19%)
Mutual labels:  webgl, webgl2, virtual-reality, webxr
Hilo3d, a WebGL Rendering Engine.
Stars: ✭ 123 (-99.84%)
Mutual labels:  3d, webgl, html5, canvas
JavaScript/WebGL glasses virtual try on widget. Real time webcam experience, robust to all lighting conditions, high end 3D PBR rendering, easy to integrate, fallback to server-side rendering
Stars: ✭ 134 (-99.83%)
Mutual labels:  3d, webgl, augmented-reality
Webar Article
WebAR-Article is a responsive and information rich website that is progressively enhanced with Augmented Reality content exposed through experimental web technologies.
Stars: ✭ 225 (-99.71%)
Mutual labels:  webgl, augmented-reality, webxr
Javascript/WebGL lightweight face tracking library designed for augmented reality webcam filters. Features : multiple faces detection, rotation, mouth opening. Various integration examples are provided (Three.js, Babylon.js, FaceSwap, Canvas2D, CSS3D...).
Stars: ✭ 2,042 (-97.39%)
Mutual labels:  3d, webgl, augmented-reality
Simple Webxr Unity
⭐ Bringing WebXR to Unity 3D with 3 files ! B-)
Stars: ✭ 215 (-99.73%)
Mutual labels:  webgl, augmented-reality, webxr
Webxr Polyfill
Use the WebXR Device API today, providing fallbacks to native WebVR 1.1 and Cardboard
Stars: ✭ 251 (-99.68%)
Mutual labels:  augmented-reality, virtual-reality, webxr


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.



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;


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

Change log


Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].