Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality. Learn more →
Top 23 react-three-fiber Open-Source Projects
-
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
-
-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
manapotion
🧪 Mana Potion – Toolkit for JavaScript game development and interactive experiences (React, Vue, Svelte, vanilla)
-
-
hello-worlds
Virtual javascript worlds at planetary scales for your threejs or react-three-fiber scene 👋🌐
-
r3f-world-with-character
A 3D world with nature objects and a character that can move around using your keyboard. Let the character walk, run or dance.
-
buzzwords
A browser based word strategy game featuring frictionless link-based multiplayer. Try it today!
-
react-fp-movement
Basic scene with geometries and gLTF models to control a character in first person camera
-
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
Project mention: Show HN: 3D Framework for the Web. Built on Svelte and Three.js | news.ycombinator.com | 2024-04-29I have been using react-three-fiber and react-three-drei - the react version of this project. The examples are over whelming and wonderful
https://docs.pmnd.rs/react-three-fiber/getting-started/examp...
One of my favorites is the image gallery. I modified this so that clicking on an image take you into another room (gallery).
https://github.com/pmndrs/drei is a collection of examples and helpers.
Most impressive to me is the one using a GLTF model, video textures on text, reflections and more. A standalone version is
https://bfplr.csb.app/
But even more impressive is the sandbox showing the not-very-many-lines-of-code at
https://codesandbox.io/p/sandbox/ground-reflections-and-vide...
A lot to putting a layer on top of threejs and I have run a fair number of head scratchers. But still the potential is huge. Using threejs has completely changed the way I look at website development. So if you are a svelte person I would definitely look into this.
ps, you can also try https://github.com/pmndrs/react-three-next where we have abstracted this stuff. it gets 100% lighthouse score for performance, accessibility, best practices and seo.
Project mention: Triplex: Visually Edit React Three Fiber Components | news.ycombinator.com | 2023-10-03
Project mention: Show HN: 3D Framework for the Web. Built on Svelte and Three.js | news.ycombinator.com | 2024-04-29Thanks! Threlte is "just" offering a declarative way to express Three.js. If you know how the `` component and its props and event handlers work, you can use the Three.js documentation for everything else.
Apart from that with Threlte I personally practice documentation-driven-development, so ecosystem packages are exhaustively documented. If you're missing something, let us know via an issue[1] or on Discord[2].
Accessibility is a topic we didn't care enough yet to be perfectly honest. Accessibility doesn't stop at screen readers though, it's about contrast, size, colors, motion, reachability, and so much more that we cannot provide and are a consumer topic. Naturally WebGL apps suffer from being practically invisible to screenreaders. There are workarounds[3] but essentially this has to be solved by consumers of Threlte (devs) and hopefully by browser vendors at some point in the future.
[1] https://github.com/threlte/threlte/issues
[2] http://chat.threlte.xyz
[3] https://github.com/pmndrs/react-three-a11y
Project mention: Mana Potion – JavaScript Gamedev Toolkit (React, Vue, Svelte, Vanilla) | news.ycombinator.com | 2024-03-31
Project mention: Does the 3d in vr feel like a mirror since VR has only one focal length? | /r/virtualreality | 2023-05-09Yea, I mean I do think the technology and computational power exists, but would require current high end hardware that combines eye tracking and something like this link done with webxr. Damn this post has been as thought provoking as the movie Don’t Worry Darling. Seeing is complex… https://github.com/ektogamat/AutoFocusDOF
Project mention: Virtual JavaScript worlds at planetary scales for threejs or react-three-fiber | news.ycombinator.com | 2023-08-15
I made a game with react-three-fiber! It’s a little messy, but overall I think react was a good fit. The url is https://buzzwords.gg, there’s a GitHub link at the top of the sidebar
Here is the GitHub to the deprecated example (https://github.com/nikpundik/react-three-fiber-cloth-example)
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).
react-three-fiber related posts
-
Show HN: 3D Framework for the Web. Built on Svelte and Three.js
-
figured out an outline shader, heres the code (raymarching)
-
React Lazy Loading react-three-fiber component
-
Virtual JavaScript worlds at planetary scales for threejs or react-three-fiber
-
Cannot render glb file in frontend, instead it showing a black image
-
MeshPortalMaterial component from Drei is magic
-
how do you design scrolling "through" a website?
-
A note from our sponsor - InfluxDB
www.influxdata.com | 2 May 2024
Index
What are some of the best open-source react-three-fiber projects? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | drei | 7,370 |
| 2 | react-three-next | 2,206 |
| 3 | react-xr | 1,922 |
| 4 | react-three-flex | 1,602 |
| 5 | react-postprocessing | 1,028 |
| 6 | triplex | 714 |
| 7 | react-three-a11y | 516 |
| 8 | racing-game-cljs | 234 |
| 9 | unknown-pleasures | 179 |
| 10 | manapotion | 176 |
| 11 | react-three-arjs | 158 |
| 12 | AutoFocusDOF | 140 |
| 13 | hello-worlds | 127 |
| 14 | caroumesh | 72 |
| 15 | r3f-spotify-game | 72 |
| 16 | jongleur | 59 |
| 17 | r3f-world-with-character | 48 |
| 18 | death-stranding-ui | 44 |
| 19 | buzzwords | 35 |
| 20 | r3f-terrain | 32 |
| 21 | react-fp-movement | 27 |
| 22 | stellar | 24 |
| 23 | react-three-fiber-cloth-example | 20 |
Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com