Top 23 JavaScript Threej Projects
-
AFrame is based on threejs so same principle. See https://github.com/aframevr/aframe/blob/master/src/components/scene/screenshot.js
-
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!
-
View on GitHub
-
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...
-
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...).
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.
-
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
-
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.
-
-
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-28The 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-20The file in question if anyone is interested. Has anyone experienced this before?
-
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)
-
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).
-
-
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?
-
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
-
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
-
-
three-stdlib
📚 Stand-alone library of threejs examples designed to run without transpilation in node & browser
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).
-
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
-
vue-xplan A rotating earth demo page created with Vue and three.js
-
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.
-
Project mention: A Three.js mesh morph modifier, including nearly ten modifiers | reddit.com/r/threejs | 2022-01-27
-
Check out the Angular Three library: https://github.com/nartc/angular-three - might make it easier for you to integrate
JavaScript Threejs related posts
- How to take a screen capture in WebXR
- The Rocinante Galley, a 3D model by me. Made in Blender. A huge thank you to everybody who helped me find brands and models of objects, I shot to be as accurate as possible, and I hope I did the Roci justice!
- Very simple test in VR with vuejs. i maked a simple movie theater and watch Dragon Ball Z
- LunchboxJS – Vue 3/Three.js custom renderer
- using MindAR (JS library) in an automated project and need help for "target images"
- Show HN: I made a site where you can travel in space in the browser
- Where do I even start...
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 |
Are you hiring? Post a new remote job listing for free.
