JavaScript Threejs

Open-source JavaScript projects categorized as Threejs | Edit details

Top 23 JavaScript Threej Projects

  • A-Frame

    :a: web framework for building virtual reality experiences.

    Project mention: How to take a screen capture in WebXR | reddit.com/r/WebXR | 2022-05-27

    AFrame is based on threejs so same principle. See https://github.com/aframevr/aframe/blob/master/src/components/scene/screenshot.js

  • AR.js

    Image tracking, Location Based AR, Marker tracking. All on the Web.

    Project mention: Confused, need some answers | reddit.com/r/augmentedreality | 2022-04-12

    My favorite way for something like your need of just image tracking with some effects is usually using AR.js as that’s the cheapest way and no random platform interfering, does require more code than platform based options though.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • vanta

    Animated 3D backgrounds for your website

    Project mention: Animated Website Backgrounds Easily with vantajs | dev.to | 2022-01-10

    View on GitHub

  • drei

    🥉 useful helpers for react-three-fiber

    Project mention: LunchboxJS – Vue 3/Three.js custom renderer | news.ycombinator.com | 2022-05-17

    We used React Three Fiber at my job 2-3 years ago (when it was "early") and it was already amazing then, we could do really cool stuff easily. We wrote our own wrappers to easily do and similar things and published it as OSS[1], but TBH documentation was scarce since it was an internal project and there were virtually no resources dedicated to publish it, just a couple of devs pushing for it. We even published one of the first bridges[2]. We didn't want to totally opt out of the React render loop so we had to do a lot of hacks and optimizations, but it was a great experience overall.

    Nowadays React Three Fiber is very mature and you have the "drei" collection[3], which have all the things I mentioned and a lot more. Though now looking at the source and timing (we published a blog [4] with our solution and their commit few weeks later with almost the same code[5]) it seems they might've copied our solution as part of their package, would've loved a heads up or ack but well happy to make open source better.

    [1] https://www.npmjs.com/package/@standard/view

    [2] https://github.com/facebook/react/issues/13332#issuecomment-...

    [3] https://github.com/pmndrs/drei

    [4] https://standard.ai/blog/introducing-standard-view-and-react...

    [5] https://github.com/pmndrs/drei/pull/137/files

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

  • THREE.MeshLine

    Mesh replacement for THREE.Line

    Project mention: Frameworks/libraries/tools used to create these fancy animated 3d websites | reddit.com/r/webdev | 2021-09-07

    THREE.MeshLine

  • THREE.js-PathTracing-Renderer

    Real-time PathTracing with global illumination and progressive rendering, all on top of the Three.js WebGL framework. Click here for Live Demo: https://erichlof.github.io/THREE.js-PathTracing-Renderer/Geometry_Showcase.html

    Project mention: Can threejs look as good as Octane renders? | reddit.com/r/threejs | 2021-08-03
  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • matcaps

    Huge library of matcap PNG textures organized by color

    Project mention: How to give more "texture" to a material | reddit.com/r/threejs | 2022-04-07
  • three-mesh-bvh

    A BVH implementation to speed up raycasting and enable spatial queries against three.js meshes.

    Project mention: Super Soldier Battle Game - Three.js - AWS Serverless | reddit.com/r/threejs | 2022-03-28

    The game is currently unplayable for me (10fps) and I can run Witcher 3, so I definitely should be able to run this. You need to do some heavy optimizations. Looking at the console, while there is a high amount of time spent on rendering, over half the frame is spent on raycasting. You have to either reduce the amount of raycasters in your game, reduce the number of objects raycast against, divide meshes into smaller chunks (default raycast loops through entire geometry, so highpoly large meshes are really bad for you) and/or use BVH to speed up raycasting https://github.com/gkjohnson/three-mesh-bvh

  • react-planner

    :pencil2: A React Component for plans design. Draw a 2D floorplan and navigate it in 3D mode.

    Project mention: Migrating class components to functional components (with Redux)? | reddit.com/r/reactjs | 2022-01-20

    The file in question if anyone is interested. Has anyone experienced this before?

  • troika

    A JavaScript framework for interactive 3D and 2D visualizations

    Project mention: Frameworks/libraries/tools used to create these fancy animated 3d websites | reddit.com/r/webdev | 2021-09-07

    troika (specifically troika-three-text)

  • mind-ar-js

    Web Augmented Reality. Image Tracking, Face Tracking. Tensorflow.js

    Project mention: using MindAR (JS library) in an automated project and need help for "target images" | reddit.com/r/augmentedreality | 2022-05-10

    I'm working on a project and I need MindAR (link) as the main framework. I wrote some automation on HTML files we deliver to our customers, but as you may know, MindAR requires some sort of compilation on the target images (the compiler is here).

  • aframe-extras

    Add-ons and helpers for A-Frame VR.

  • 3DTilesRendererJS

    Renderer for 3D Tiles in Javascript using three.js

    Project mention: Ayutthaya as 3d tiles in threejs. tile loading is barely visible with a solid 60fps! | reddit.com/r/threejs | 2022-03-29

    Nice, done with https://github.com/NASA-AMMOS/3DTilesRendererJS?

  • react-three-next

    React Three Fiber, Nextjs, Tailwind and Styled-components starter

    Project mention: Using threejs server side? | reddit.com/r/threejs | 2021-12-13

    The team at r3f are doing killer work. Check out this repo for a way to do SSR with their react renderer. https://github.com/pmndrs/react-three-next

  • three-globe

    WebGL Globe Data Visualization as a ThreeJS reusable 3D object

    Project mention: Can someone help me to render my globe? I don't know how to reference it in the template. | reddit.com/r/Angular2 | 2022-02-22
  • hedron

    Perform live shows with your three.js creations (by nudibranchrecords)

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

  • WebXR-emulator-extension

    WebXR emulator extension

    Project mention: Hey. Everyone. Do anyone know the best way to recenter the ar session. When the user moved a distance and we relocated the tracking to 0. Just like it is from the beginning of the session. Thanks very much. | reddit.com/r/WebXR | 2022-03-16

    https://immersive-web.github.io/webxr-samples/teleportation.html

  • xplan

    A rotating earth H5 page with Vue and threejs

    Project mention: A curated list of awesome things related to Vue.js | dev.to | 2021-08-07

    vue-xplan A rotating earth demo page created with Vue and three.js

  • THREE-CSGMesh

    Conversion of a CSG library for use with modern THREE.js

    Project mention: Intersecting Objects Shadow Problem | reddit.com/r/threejs | 2022-03-29

    Currently I'm thinking of trying CSG (https://github.com/manthrax/THREE-CSGMesh) . - It's hard to tell, but from the demo's (like this one: https://manthrax.github.io/THREE-CSGMesh/demos/CSGShinyDemo.html) I don't see the lines where the objects intersect, presumably because the shadow works on them as one object. However can see the same kind of lines I'm having where the cubes intersect the floor. These type of lines are especially noticeable when the shadow is strong. Still, CSG seems like a bit of effort, (and possibly a performance cost) so I'm still hoping there is a more straight forward solution... Thanks again.

  • threejs-mesh-modifiers

    A Three.js mesh morph modifier

    Project mention: A Three.js mesh morph modifier, including nearly ten modifiers | reddit.com/r/threejs | 2022-01-27
  • angular-three

    🧊 THREE.js integration for Angular 🧊

    Project mention: Three.js in Ionic Project | reddit.com/r/ionic | 2022-04-07

    Check out the Angular Three library: https://github.com/nartc/angular-three - might make it easier for you to integrate

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-05-27.

JavaScript Threejs related posts

Index

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

Project Stars
1 A-Frame 14,194
2 AR.js 3,589
3 vanta 3,586
4 drei 3,111
5 jeelizFaceFilter 2,177
6 THREE.MeshLine 1,759
7 THREE.js-PathTracing-Renderer 1,344
8 matcaps 1,315
9 three-mesh-bvh 1,175
10 react-planner 1,004
11 troika 852
12 mind-ar-js 852
13 aframe-extras 831
14 3DTilesRendererJS 791
15 react-three-next 716
16 three-globe 638
17 hedron 426
18 three-stdlib 327
19 WebXR-emulator-extension 317
20 xplan 259
21 THREE-CSGMesh 256
22 threejs-mesh-modifiers 253
23 angular-three 197
Find remote jobs at our new job board 99remotejobs.com. There are 7 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
Static code analysis for 29 languages.
Your projects are multi-language. So is SonarQube analysis. Find Bugs, Vulnerabilities, Security Hotspots, and Code Smells so you can release quality code every time. Get started analyzing your projects today for free.
www.sonarqube.org