TypeScript react-three-fiber

Open-source TypeScript projects categorized as react-three-fiber

Top 14 TypeScript react-three-fiber Projects

  • react-three-flex

    💪📦 Flexbox for react-three-fiber

    Project mention: Ask HN: Frameworks for game-style UI with WebGL? | news.ycombinator.com | 2022-08-12

    I think you can do a lot of this with [React-three-fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/intro...) in combination with [React-three-flex](https://github.com/pmndrs/react-three-flex). React-three-fiber lets you make three.js components in react, and react-three-flex will let you do flexbox style layouts to make interesting UIs. You still get all of the capabilities of three.js with a lot of the plumbing done for you. Check out the examples from react-three-flex for some examples close to what it sounds like you want to achieve.

  • react-xr

    🤳 VR/AR with react-three-fiber

    Project mention: VR - React Library? | reddit.com/r/learnVRdev | 2022-06-22

    I haven’t played with it, but if I was going to I’d start here https://github.com/pmndrs/react-xr

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

  • react-postprocessing

    📬 postprocessing for react-three-fiber

    Project mention: Migrating my Gatsby MDX blog to AstroJS (and why you shouldn't) | dev.to | 2022-10-06

    For the post processing I used @react-three/post-processing components, and to get the look just right I created a debug panel using Leva to adjust some values (like bokeh blur).

  • react-three-a11y

    ♿️ Accessibility tools for React Three Fiber

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

    ♿ R3F A11y

  • caroumesh

    A React component to display 3d models in a carousel-like fashion.

  • hello-worlds

    Virtual javascript worlds at planetary scales for your threejs or react-three-fiber scene 👋🌐 (by kenjinp)

    Project mention: Procedural Planetary System (react/typescript/webgl) | reddit.com/r/proceduralgeneration | 2022-10-05

    I used a Quadtree + webworkers, the code for that is almost entirely lifted from SimonDev's youtube video and github (https://github.com/simondevyoutube/ProceduralTerrain_Part10) but you can see the modifications I did to it here: https://github.com/kenjinp/hello-worlds

  • r3f-spotify-game

    A music game built with react-three-fiber and the Spotify API

    Project mention: I made a rhythm-based game using react-three-fiber and the Spotify API | reddit.com/r/reactjs | 2022-03-16

    You can find the repo here.

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

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

    Project mention: A Three.js 3D world with Character + Movements + Third Person Camera | dev.to | 2022-04-04

    GitHub Repo

  • buzzwords

    A browser based word strategy game featuring frictionless link-based multiplayer. Try it today!

    Project mention: Buzzwords - a word game about using letter tiles to capture territory, single player vs bots and two player | reddit.com/r/WebGames | 2022-08-15
  • R3F-CRA-Starter

    A starter project for React-Three-Fiber bootstrapped with Create-React-App and some useful packages

  • stellar

    🚀 Professional blueprint editor for Spaceflight Simulator (by tresabhi)

    Project mention: This is Tribal Fox Token $ TFOX l Launch Date : March 9 Wednesday 10.00 UTC | reddit.com/r/CryptoMars | 2022-03-07

    🌐 Website : https://coming.soon

  • santorini

    Santorini Board Game Online with boardgame.io and three.js

    Project mention: Tinc Is Not Catan | news.ycombinator.com | 2022-02-09

    I’m currently building a web version of a board game (Scoville, super fun) with a friend. We decided to use bordgame.io as it handles most of the multiplayer state transitions and has a pretty impressive selection of games done with it (https://github.com/philihp/fields-of-arle, https://github.com/hwabis/forbidden-desert, https://github.com/mbrinkl/santorini). A lot of board games have some sort of web version as AFAIK copyright doesn’t extend to the rules and systems, just the names and art (we called ours “Capsaicin” to be cute). Maybe there’s a greater thought about the effectiveness of building and prototyping something that can be constructed from paper and mediated by humans, and only introducing computers once a design is more or less finalized.

  • wikipedia-graph

    Graphically display the connections between different Wikipedia articles (by Louis3797)

    Project mention: 3D Wikipedia Graph Visualizer | reddit.com/r/webdev | 2022-06-16

    (Some screenshots are in the Readme.md)

  • ascent

    Dynamic 3D display for your currently playing song on Last.fm

    Project mention: I made a site to display what you're playing on last.fm. Made with React, TypeScript and React Three Fiber (Three.js) link in comments | reddit.com/r/webdev | 2022-07-09

    Live Site

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

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-10-06.

TypeScript react-three-fiber related posts


What are some of the best open-source react-three-fiber projects in TypeScript? This list will help you:

Project Stars
1 react-three-flex 1,420
2 react-xr 1,363
3 react-postprocessing 706
4 react-three-a11y 396
5 caroumesh 67
6 hello-worlds 41
7 r3f-spotify-game 34
8 r3f-world-with-character 15
9 buzzwords 13
10 R3F-CRA-Starter 12
11 stellar 8
12 santorini 8
13 wikipedia-graph 6
14 ascent 5
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.