• Stars
    star
    685
  • Rank 63,405 (Top 2 %)
  • Language
    TypeScript
  • Created over 2 years ago
  • Updated about 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

⚛️ Bruno Simons journey demos in React

Stage 1

👉 Visit examples at https://journey.pmnd.rs/

A community driven collection of lesson-examples from Bruno Simons threejs-journey ported to React. Threejs-journey is one of the best resources available for learning Threejs.

The goal is to ease the learning curve by moving from OOP to components, which reduce code and encourage clean separation. You will progress much quicker since each primitive is a separate unit that can be studied as such, as opposed to something that is connected to practically everything else across the project.

At the moment the focus is on structural patterns and the experience, these examples are reduced and will use eco-system spare parts where possible.

Examples

Basics

Textures

Materials

3D Text

Classic Techniques

Lights

Haunted House

Particles

Particles Animated

Galaxy Generator

Raycaster

Scroll Based Animation

Advanced Techniques

Physics

Shaders

Shader Patterns

Raging Sea

Animated Galaxy

Modified Material

Extra

Post Processing

Loading

Mixing Html and Webgl

Portal

Levels

Level 1

More Repositories

1

zustand

🐻 Bear necessities for state management in React
TypeScript
40,808
star
2

react-spring

✌️ A spring physics based React animation library
TypeScript
27,160
star
3

react-three-fiber

🇨🇭 A React renderer for Three.js
TypeScript
25,320
star
4

jotai

👻 Primitive and flexible state management for React
TypeScript
16,893
star
5

use-gesture

👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript.
TypeScript
8,537
star
6

valtio

💊 Valtio makes proxy-state simple for React and Vanilla
TypeScript
8,257
star
7

drei

🥉 useful helpers for react-three-fiber
JavaScript
7,122
star
8

leva

🌋 React-first components GUI
TypeScript
4,528
star
9

gltfjsx

🎮 Turns GLTFs into JSX components
JavaScript
3,949
star
10

use-cannon

👋💣 physics based hooks for @react-three/fiber
TypeScript
2,654
star
11

react-three-next

React Three Fiber, Threejs, Nextjs starter
JavaScript
2,140
star
12

postprocessing

A post processing library for three.js.
JavaScript
2,100
star
13

racing-game

🏎 Open source racing game developed by everyone willing
TypeScript
2,094
star
14

react-xr

🤳 VR/AR with react-three-fiber
TypeScript
1,890
star
15

react-three-flex

💪📦 Flexbox for react-three-fiber
TypeScript
1,606
star
16

suspend-react

🚥 Async/await for React components
TypeScript
1,308
star
17

react-postprocessing

📬 postprocessing for react-three-fiber
JavaScript
1,009
star
18

detect-gpu

Classifies GPUs based on their 3D rendering benchmark score allowing the developer to provide sensible default settings for graphically intensive applications.
TypeScript
979
star
19

lamina

🍰 An extensible, layer based shader material for ThreeJS
TypeScript
976
star
20

its-fine

🐶🔥 A collection of escape hatches for React.
TypeScript
891
star
21

react-use-measure

🙌 Utility to measure view bounds
TypeScript
799
star
22

react-nil

⃝ A react null renderer
TypeScript
772
star
23

react-three-rapier

🤺 Rapier physics in React
TypeScript
765
star
24

maath

🪶 Math helpers for the rest of us
TypeScript
755
star
25

three-stdlib

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

react-three-editor

🔌 A one of a kind scene editor that writes changes back into your code
TypeScript
602
star
27

react-three-a11y

♿️ Accessibility tools for React Three Fiber
TypeScript
507
star
28

react-zdog

⚡️🐶 React bindings for zdog
JavaScript
441
star
29

use-asset

📦 A promise caching strategy for React Suspense
TypeScript
414
star
30

react-three-offscreen

📺 Offscreen worker canvas for react-three-fiber
TypeScript
397
star
31

drei-vanilla

🍦 drei-inspired helpers for threejs
TypeScript
364
star
32

ecctrl

🕹️ A floating rigibody character controller
TypeScript
349
star
33

tunnel-rat

🐀 Non gratum anus rodentum
TypeScript
287
star
34

react-three-lgl

🔆 A React abstraction for the LGL Raycaster
TypeScript
260
star
35

market

📦 Download CC0 assets ready to use in your next 3D Project
JavaScript
249
star
36

react-three-csg

🚧 Constructive solid geometry for React
TypeScript
242
star
37

gltf-react-three

Convert GLTF files to React Three Fiber Components
JavaScript
230
star
38

component-material

🧩 Compose modular materials in React
TypeScript
161
star
39

env

💄 An app to create, edit, and preview HDR environment maps in the browser
TypeScript
143
star
40

use-p2

👋💣 2d physics hooks for @react-three/fiber
TypeScript
141
star
41

react-ogl

🦴 A barebones react renderer for ogl.
TypeScript
139
star
42

react-spring-examples

JavaScript
138
star
43

react-three-gpu-pathtracer

⚡️ A React abstraction for the popular three-gpu-pathtracer
TypeScript
125
star
44

react-three-lightmap

In-browser lightmap/AO baker for react-three-fiber and ThreeJS
TypeScript
123
star
45

cannon-es-debugger

Wireframe debugger for use with cannon-es https://github.com/react-spring/cannon-es
HTML
103
star
46

rafz

💍 One loop to frame them all.
TypeScript
96
star
47

website

Poimandres developer collective website
JavaScript
87
star
48

swc-jotai

Rust
85
star
49

assets

📦 Importable base64 encoded CC0 assets
Makefile
84
star
50

react-three-scissor

✂ Multiple scenes, one canvas! WebGL Scissoring implementation for React Three Fiber.
TypeScript
81
star
51

eslint-plugin-valtio

An eslint plugin for better valtio experience
JavaScript
69
star
52

react-spring.io

✌️ A spring physics based React animation library
TypeScript
56
star
53

react-three-babel

🛍 A Babel plugin that automatically builds the extend catalogue of known native Three.js elements
TypeScript
53
star
54

r3f-website

Website for React Three Fiber
JavaScript
26
star
55

market-assets

JavaScript
19
star
56

react-three-8thwall

JavaScript
17
star
57

drei-assets

JavaScript
16
star
58

discord

🤖 Poimandres Discord Bot
TypeScript
10
star
59

react-three-jolt

⚡ Jolt physics in React
CSS
10
star
60

branding

TypeScript
7
star
61

market-assets-do

JavaScript
5
star
62

envinfo

Easily collect useful information for bug reports
JavaScript
4
star
63

leva-wg

1
star