• Stars
    star
    121
  • Rank 284,326 (Top 6 %)
  • Language
    JavaScript
  • Created over 4 years ago
  • Updated over 1 year ago

Reviews

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

Repository Details

Learn how to use theejs in react using react-three-fiber πŸŽ‰

Live version: https://learnwithjason.surge.sh (wait a little for the assets to load)

git clone https://github.com/drcmda/learnwithjason
cd learnwithjason
yarn
yarn start

What's this?

This is a demo Jason Lengstorf (@jlengstorf) and I (@0xca0a) were building together in a learn-with-jason episode on Twitch. We go into threejs a little, how to install three-fiber, what it is, how to create a simple scene, interaction, animation, game-loop fundamentals, lights, shadows, fog and how to load models.

Links

learn-with-jason: https://www.youtube.com/watch?v=1rP3nNY2hTo

threejs: https://threejs.org

react-three-fiber: https://github.com/react-spring/react-three-fiber

threejs fundamentals: https://threejsfundamentals.org

sketchfab: http://sketchfab.com

blender: https://www.blender.org

blender 2.8 intro: https://www.youtube.com/watch?v=jBqYTgaFDxU

Attributions

3d asset by Andrey Lukashov (@overlaps)/sketchfab: https://sketchfab.com/3d-models/space-exploration-wlp-series-8-91964c1ce1a34c3985b6257441efa500 GLTF data was compressed to draco via gltf-pipeline.

More Repositories

1

react-springy-parallax

🌊 A springy, composable parallax-scroller for React - deprecated
JavaScript
1,328
star
2

mauerwerk

βš’ A react-spring driven masonry-like grid with enter/exit and shared element transitions
JavaScript
831
star
3

react-animated-tree

🌲Simple to use, configurable tree view with full support for drop-in animations
JavaScript
815
star
4

react-contextual

πŸš€ react-contextual is a small (less than 1KB) helper around React 16s new context api
JavaScript
643
star
5

the-substance

Scroll, Refraction and Shader Effects in Three.js and React
JavaScript
371
star
6

poimandres-theme

⚫️ poimandres vsc theme
JavaScript
218
star
7

floating-shoe

JavaScript
169
star
8

immer-wieder

✨ React 16 context wrap with redux semantics powered by immer
JavaScript
167
star
9

reactanoid

JavaScript
98
star
10

testlighting

JavaScript
93
star
11

scheduler-test

JavaScript
56
star
12

r3fv4

Created with CodeSandbox
JavaScript
34
star
13

r3f-aesop

JavaScript
21
star
14

nft-gallery

Created with CodeSandbox
JavaScript
17
star
15

react-higher-order

β˜”οΈ Maps render props to a higher order component
JavaScript
16
star
16

untitled-game

Created with CodeSandbox
JavaScript
14
star
17

splats

TypeScript
13
star
18

arc-x-pmndrs

JavaScript
12
star
19

projects

projects
JavaScript
7
star
20

react-spring-numerical

πŸ™Œ React-springs leaner doppelgΓ₯nger
JavaScript
7
star
21

awv3node-homepage

JavaScript
5
star
22

scroll-template

JavaScript
4
star
23

dom-resize

JavaScript
3
star
24

threeparcel

JavaScript
3
star
25

reacteurope

JavaScript
3
star
26

testsvg

2
star
27

plugs-draft

JavaScript
1
star
28

meshtransmissionmaterial

JavaScript
1
star
29

vite-three-js

JavaScript
1
star
30

zustand-website

CSS
1
star