• Stars
    star
    171
  • Rank 222,266 (Top 5 %)
  • Language
    JavaScript
  • Created almost 4 years ago
  • Updated almost 4 years ago

Reviews

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

Repository Details

npm install
npm start

This is a small primer on how to use GLTF models on the web, specifically how to use them as dynamic assets.

Tutorial: https://www.youtube.com/watch?v=xy_tbV4pC54

Live demo: https://codesandbox.io/s/floating-shoe-forked-qxjoj

How to compress assets and turn them into JSX components

  1. npx gltf-pipeline -i model.gltf -o model.glb --draco.compressionLevel=7
  2. npx gltfjsx model.glb

How to include them in your project

  1. Set up react-three-fiber
  2. Put model.glb into /public
  3. Put Model.js (the output of gltfjsx) anywhere inside /src

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

immer-wieder

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

learnwithjason

Learn how to use theejs in react using react-three-fiber 🎉
JavaScript
121
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

splats

TypeScript
15
star
17

untitled-game

Created with CodeSandbox
JavaScript
14
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