JavaScript 3D

Open-source JavaScript projects categorized as 3D

Top 23 JavaScript 3D Projects

  • three.js

    JavaScript 3D Library.

    Project mention: 3d models in html? | reddit.com/r/learnjavascript | 2022-11-24

    A well established library you could both try is three.js, a quick google search seems to show a bunch of tutorials for using three.js with blender too

  • A-Frame

    :a: Web framework for building virtual reality experiences.

    Project mention: A-Frame | news.ycombinator.com | 2022-11-13
  • Scout APM

    Truly a developer’s best friend. Scout APM is great for developers who want to find and fix performance issues in their applications. With Scout, we'll take care of the bugs so you can focus on building great things 🚀.

  • Cesium

    An open-source JavaScript library for world-class 3D globes and maps :earth_americas:

    Project mention: CesiumJS - a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It uses WebGL for hardware-accelerated graphics, and is cross-platform, cross-browser, and tuned for dynamic-data visualization | reddit.com/r/javascript | 2022-10-11
  • zdog

    Flat, round, designer-friendly pseudo-3D engine for canvas & SVG

    Project mention: Web Scraping GitHub Page | dev.to | 2022-09-27
  • vanta

    Animated 3D backgrounds for your website

    Project mention: Has anyone used Vanta.js for dynamic backgrounds? | reddit.com/r/react | 2022-08-13
  • isometric-contributions

    Browser extension for rendering an isometric pixel art version of your GitHub contribution graph.

    Project mention: Add Your Git Commits to Your Website | dev.to | 2022-05-04

    Thanks to people such as Jason Long and people on StackOverflow, there are countless of answers! Jason uses obelisk.js, which is a a JavaScript library for building isometric pixel objects. You can create bricks, cube, pyramids, etc. within the HTML5 canvas.

  • jeelizFaceFilter

    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...).

    Project mention: Adding AR Filters in a 100ms Video Call - Part 1 | dev.to | 2022-03-08

    Ikr! That's what I was thinking when I came across Jeeliz. Now I have worked with tensorflow.js based libraries in the past but they're usually quite CPU intensive for a live video use case. Jeeliz looked promising as it's designed for this use case. So I thought why not try it out by adding some 3d AR filters to our video calls. Well! that is what we're going to do.

  • InfluxDB

    Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Data Platform where developers build real-time applications for analytics, IoT and cloud-native services in less time with less code.

  • blockbench

    Blockbench - A low poly 3D model editor

    Project mention: Does anyone know how to install blockbench on a raspberry pi 4B+ ? | reddit.com/r/Blockbench | 2022-04-13
  • curtainsjs

    curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.

    Project mention: How to recreate this animated background with distortion effect? | reddit.com/r/webdev | 2022-04-24

    If you're purely wanting to add a shader effect then as a newcomer to the shader world I'd recommend curtainsjs as an easy way to add custom shaders without the hassle of having to deal with low level WebGL setup stuff. They even have a similar example with the mouse distortion effect where the code is much more readable and well commented with another codepen by the creator of curtains which has a more similar mouse flow effect that could be repurposed to be a post effect shader and distort the output of a gradient shader.

  • GithubCity

    Create a 3D city from your GitHub contributions 🏙

    Project mention: A 3D city where you can see how developers are building the open source world | reddit.com/r/webdev | 2022-09-13

    Yes, we are inspired by honzaap's GitHub City. It uses threeJS.

  • taro

    A lightweight 3D game engine for the web. (by Cloud9c)

  • alien.js

    👽 Future web pattern

    Project mention: How split project in ES6 modules with threejs | reddit.com/r/threejs | 2022-02-12

    Great question. Have a look at the alien.js framework and see how they are doing it, might give you ideas https://github.com/pschroen/alien.js

  • three-stdlib

    📚 Stand-alone library of threejs examples designed to run without transpilation in node & browser

    Project mention: React Three Fiber and NextJS Starter Template | dev.to | 2022-05-19

    React Three Fiber has been a fantastic way to quickly prototype 3D apps and games, and even efficient enough to carry them through to production. The problem? It’s can be a lot of setup. Just from that last paragraph, you see the string of dependencies R3F uses, and it gets even more complicated from there when you familiarize yourself with the current ThreeJS ecosystem (see: three-stdlib).

  • 3d-bat

    3D Bounding Box Annotation Tool (3D-BAT) Point cloud and Image Labeling

    Project mention: how to label 3d object for segmentation task ? | reddit.com/r/computervision | 2022-05-12

    Take a look at 3d-bat (https://github.com/walzimmer/3d-bat) or segments.ai

  • react-tilt

    👓 Parallax tilt hover effect for React JS - tilt.js

  • angular-three

    🧊 THREE.js integration for Angular 🧊

    Project mention: Create a First Person Movement in React Three Fiber - Part 1 | dev.to | 2022-09-23

    Because of this, many libraries emerged with the aim of using Three.js inside a framework. I have tried Angular Three and Trois.js for Vue but I prefer React Three Fiber because of its large community, examples and documentation but feel free to give a try to the other ones.

  • vis-graph3d

    📊 Create interactive, animated 3d graphs. Surfaces, lines, dots and block styling out of the box.

  • model_viewer.dart

    A Flutter widget for rendering interactive 3D models in the glTF and GLB formats.

  • three-forcegraph

    Force-directed graph as a ThreeJS 3d object

    Project mention: Using `react-forcegraph` or `three-forcegraph` with `react-three-drei`? | reddit.com/r/threejs | 2022-11-15

    Thanks so much! There's something called three-forcegraph which might be related to what you mention. Here's an example of its implementation: https://github.com/vasturiano/three-forcegraph/blob/master/example/basic/index.html

  • RayCastingTutorial

    A simple RayCasting rendering tutorial for game development

    Project mention: Ask HN: What do you code when learning a new language/framework | news.ycombinator.com | 2022-07-14
  • react-native-gcanvas

    react native canvas based on gpu opengl glsl GCanvas -- A lightweight cross-platform graphics rendering engine. (超轻量的跨平台图形引擎)

  • voxelmetaverse

    playing with voxel.js

  • 3D-Web-Roadmap

    :star2: 3D web roadmap and resources

    Project mention: 3D Web Roadmap | reddit.com/r/developers | 2022-11-27
  • Zigi

    The context switching struggle is real. Zigi makes context switching a thing of the past. It monitors Jira and GitHub updates, pings you when PRs need approval and lets you take fast actions - all directly from Slack!

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2022-11-27.

JavaScript 3D related posts

Index

What are some of the best open-source 3D projects in JavaScript? This list will help you:

Project Stars
1 three.js 87,034
2 A-Frame 14,773
3 Cesium 9,573
4 zdog 9,462
5 vanta 4,102
6 isometric-contributions 3,255
7 jeelizFaceFilter 2,280
8 blockbench 1,430
9 curtainsjs 1,363
10 GithubCity 905
11 taro 658
12 alien.js 592
13 three-stdlib 415
14 3d-bat 414
15 react-tilt 337
16 angular-three 273
17 vis-graph3d 244
18 model_viewer.dart 189
19 three-forcegraph 157
20 RayCastingTutorial 130
21 react-native-gcanvas 128
22 voxelmetaverse 71
23 3D-Web-Roadmap 70
Write Clean JavaScript Code. Always.
Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
www.sonarsource.com