☄︎
@0xca0a
Followers
46,542
Following
931
Media
1,387
Statuses
11,828
Explore trending content on Musk Viewer
CHASING THE SUN
• 381167 Tweets
billie
• 351849 Tweets
Alito
• 275089 Tweets
Scottie
• 168343 Tweets
Crockett
• 124768 Tweets
Diddy
• 97276 Tweets
Diddy
• 97276 Tweets
Fauci
• 84169 Tweets
#النصر_الهلال
• 71575 Tweets
RPWP TRACKLIST
• 54050 Tweets
#วอลเลย์บอลหญิง
• 51147 Tweets
Juventus
• 46069 Tweets
Louisville
• 45711 Tweets
कन्हैया कुमार
• 44694 Tweets
Barron
• 43370 Tweets
NCAA
• 39808 Tweets
أبو عبيدة
• 36089 Tweets
ابو عبيده
• 35930 Tweets
#عزالدين_سليم_المفكر_الشهيد
• 30133 Tweets
Homofobia
• 29326 Tweets
ジュラシックワールド
• 29147 Tweets
Shani Louk
• 28949 Tweets
Amit Buskila
• 27306 Tweets
LOST IS COMING
• 23847 Tweets
Madden
• 17994 Tweets
Tabilo
• 17328 Tweets
المنطقه الشرقيه
• 16521 Tweets
$BASED
• 11483 Tweets
Kinds of Kindness
• 10680 Tweets
Sean Combs
• 10303 Tweets
للنصر
• 10232 Tweets
drei/meshportalmaterial can now be entered with a single prop, "blend". it will have lots of creative potential, for spatial UI and the meaning of "routes".
made a small showcase using models from my fav designer on sketchfab
@FaruqTawsif
sandbox
57
601
5K
first time im trying react-refresh and the experience is crazy. notice how all components stay safely mounted, counter keeps on ticking, threejs stuff just stays put. not a single page refresh i could see. hmr never felt that safe and fast. 2 lines added to my build config. 👏
31
500
3K
still crazy to me that this is considered a react application nowadays. these are all declarative components, driven by a state model, mixed with regular dom content. saw it on reddit i love seeing this stuff creeping into frontend, and accessible to all.
33
458
3K
this is what happens when you run a website through a lens — refraction, chroma and all. 🫠
live:
51
264
2K
threejs has a market, today we release 🎉
🔎 free minified/ready-to-use CC0 models/textures/hdris
🚥 starters for threejs and react-three-fiber
👤 accounts
📬 request assets
🥇 favorites
🔌 api endpoint
☁️ CDN with caching
📦 npm install assets soon
33
309
2K
how to have URL routes inside your scene, as well as bind webgl text to html to that it's accessible, selectable, and webgl gets to refract it.
26
179
2K
learn how to mix html and webgl with shared animations and transitions.
fullscreen →
sandbox →
24
196
2K
pmndrs/uikit by
@BelaBohlender
is fully responsive via flexbox, built on the yoga layout engine. making UI in webgl opens up interesting possibilities: effects, 2.5D & 3D navigation, perspective shift, parallax, more to come ...
very early dev preview
52
142
1K
i have some news to share, end of march i will join
@vercel
. i continue to work independently on open source
@pmndrs
tools and react cad
@buerli_io
. this means more resources for making creative dev a feasible (and fun) part of our daily routine.
88
72
1K
i've been solving other peoples problems again 🫠 in a thread of some boxes that have accumulated.
how to make a chess board look good
odd question but ok.
18
132
1K
here's some thing i've been dedicating 1 hour each evening for the last week: a game written in react and threejs (react-three-fiber) wanted to see if i can pull it off but waste too much time on it so i'll abandon it: it's still missing damage/collision
50
224
1K
soft shadows, runtime caustics, refraction and transmission in one, all but the shadows gifts from
@N8Programs
crazy how it was unreachable a year back, hoarded by agencies, or buried in dissertations. now it's just
<Caustics> ...
18
171
1K
more work on dreis new transmissionmaterial as a direct replacement for THREE.MeshPhysicalMaterial
@N8Programs
added white noise roughness/blur to it today, it looks so much better than physicals chonk pixel blur! 🤩
16
169
1K
released react-three-fiber v4 today bunch of new features, all the new react features (concurrent, suspense, etc), html overlays, new targets (svg, css, ...), new TS types 🤖
18
256
1K
i've been searching for a solution to this for at least a year, still can't believe i found it today: canvas + html is in sync, must keep browser scrollbars, html remains accessible/selectable, as well as canvas contents. position: sticky; top: 0; 🤯
17
160
1K
published a gltfjsx patch, finetuning compression. it can now reduce meshes and merge vertices (using gltf-transform/simplyfy+weld). the original sketchfab example below is 94.6MB and npx gltfjsx model.glb --transform --simplify turned it into 406KB. 🤏
26
146
1K
simplest magic/impossible box ever?
i remember when stuff like that was so complex, tutorials spanning dozens of pages using tricky stencil operations. now it's just ... react ✨
<MeshPortalMaterial>
{children}
</MeshPortalMaterial>
18
144
1K
this is the first time i see a company open source their landing page magic. thanks
@rauchg
,
@evilrabbit_
and
@vercel
for being so cool about it!
the article teaches you how we made the nextjs conf page from start to finish with
@reactjs
,
@threejs
and
@pmndrs
⭐️ Interactive code sandboxes are now on the
@vercel
blog. Try them out to build the 3D prism game from the Next.js Conf registration.
Sidenote: First time ever working with WebGL and 🤯
18
150
966
23
153
1K
from reddit: how do i load any image, place it over my model, adjust position, rotation, scale
about 30 loc in react 🫠, sandbox:
8
130
1K
weekly hints: the awwwards magnifier thing. it's fairly easy now but in this annotated sandbox you learn how to apply it performantly to a scroll website. this one came from
@bruno_simon
's journey discord.
sandbox:
GH sponsors 🙏
16
116
1K
new in drei <MeshTransmissionMaterial> for more convincing glass/gelatin/epoxy transmission w/ RGB shift & noise. based on a material that was open sourced by
@ore_ukonpower
and
@junni_jp
, w/ some extras added.
<mesh>
<MeshTransmissionMaterial />
demo:
22
119
1K
the more the merrier, this is a react based 3d engine whose foundation is not webgl but html via css transform/translate3d. these are all divs and img's. 🍻
"Overreact", the open-source React/HTML/CSS game engine I'm building now supports basic 3D stuff.
It's still very alpha, and pretty light on documentation, but I'm liking where it's heading! :-D
#reactjs
#webdevelopment
#html
#javascript
#js
#gamedev
75
215
2K
13
99
1K
this the most ⚛️ threejs experiment so far:
each letter contains a self contained world, a demo i've made in the past. they remain fully interactive. may not seem special but look into the code, this kind of interop is why react's making such a difference
17
114
1K
react-three-fiber comes along nicely, made some progress and through the power of hooks even things like effects can be managed and combined with the react eco system. The demo below: , codesandbox:
11
191
1K
mixing html+webgl couldn't be any easier, there's literally no code, just declaration. they share the same graph & state. the example uses antd UI components, dropped into a threejs scene like it's nothing. silly demo, but imagine the possibilities.
24
120
1K
ray marched <Caustics> new in drei 💫
beautiful swirls and patterns that appear when light passes through transmissive surfaces. 😍 this was a huge effort by
@N8Programs
! react + threejs users just have to type:
<Caustics {...config}>
<Model />
demo:
16
115
979
crazy how far has progressed since i last checked it out. remember
@bruno_simon
's website? you can do this in react w/ so little code. 🤩
@StockHuman
made this demo.
fullscreen:
sandbox:
13
146
957
threes new instancedmesh is crazy, i've tried sth like a swarm before without gpu or pointcloud, just objects, and it could maybe do 2000. this is the same config: dodecahedron + expensive standardmaterial + lights, but now it's 20.000 and runs 60fps 🤯
12
142
947
my second attempt at making a mini-game in my free time, every day half an hour or so for a couple of days. it's using react-three-fiber ofc, use-cannon has support of collisions finally, and zustand for state. you can play it here/see the full code:
25
122
914
weekly hints,
how to have frosted glass/blur in threejs, as well as html transitions using framer-motion.
<mesh>
<planeGeometry />
<meshTransmissionMaterial roughness={0.5} />
sandbox:
gh sponsors:
9
77
902
this is an old example i found by digging through my old codesandboxes, never published it i think. 🤔 you learn how to tie scroll offset to shaders, and how to make a draggable minimap.
fullscreen →
sandbox →
15
105
895
releasing today. render your r3f app in a worker/offscreen canvas and unblock the main thread. most of the pain with workers has been taken care of, your apps will just work, events, controls, gltf, drei, physics and all.
try it:
24
106
869
"how to make spheres fill up the screen responsively" sourced from
codesandbox
5
88
850
"how to tie a blender animation to scroll"
deployed:
codesandbox:
gh sponsors:
16
83
851
Hey
@0xca0a
, is MeshPortalMaterial able to have an element goes through like these panels ? I'm not sure it is really achievable with fbo, it is maybe a stencil effect no ?
In between worlds elements would be insanely immersive.
1
2
27
10
75
850
In recent years, a recurring question has emerged regarding the React framework and its ability to foster ecosystems compared to imperative platforms. Specifically, this observation applies to React's integration with Three.js, although it can be generalized to other platforms
9
74
817
the magic of react has always been that: if you eliminate the technical hinderances, then you can transfer an idea to the screen directly, you can worry about the things that actually matter, be it design or otherwise.
15
89
807
getting quite close to real time ssgi with
@0beqz
realism-effects (the v2 branch).
Particle effect inspiration from your team.
Is this achieveable with R3F?
2
4
76
19
72
805
i love how this is developing, react bringing together fields that before were quite separated. driving both layout and gpu driven visuals using components and reactive patterns will help the web get over the slowish dom
Our (ueno) latest work using react-three-fiber, huge props to
@davidarnarsson
,
@einarbirgir
,
@jeremywoons
and
@pollur
, and last
@0xca0a
for his amazing work on the renderer
6
40
250
10
132
795
first time i've managed to embed html where canvas stuff is both behind and above it while both are accessible. i thought that's impossible but it's using drei's new stencil feature to do that, the phone-screen punches a hole into the canvas, html is behind.
13
73
798
Crossing into layout territory now with react-three-fiber, mixing html and webgl. Before you click the live demo try guessing much much code you think would be needed for something like this ✨. And here's the sandbox:
18
161
767
Since React 18 is coming i'm compiling some tweets exploring suspense, a groundbreaking new feature.
Suspense allows components to handle async tasks, while the parent control loading, errors and fallbacks. It essentially solves async in front end.
Here are some use cases →
3
132
770
in preparation of spatial UI i've begun to add pass-through to drei/MeshPortalMaterial. not finished but it will be so easy to use.
the demo uses real URL routes. vision pro will redefine what we understand as a route today, having your fav router within the scene will help.
16
78
757
someone asked on reddit how you'd get something like google maps or rather self-made maps in general going in react. most of it has been abstracted in plain threejs already, svg-loader, map-controls, touch, all there and scaleable. 🙂
14
72
752
was sick n tired handling GLTF files, so i made a tool that's shipping in the next react-three-fiber major. it can turn GLTFs into real JSX! 😀 1 export from blender, 2 run tool, 3 import component, 4 et voila-you can make changes, hot reload, all there.
16
132
741
Mini tutorial on making WebGL look ✨ good ✨. One of the hardest—easiest tasks. These are often ignored:
🔑 SRGB, Gamma & tonemapping
🔐 Env maps and good lighting
Deployed:
Sandbox:
GH Sponsors:
↓
12
82
740
from reddit, "how can I arrange my images in circular manner just like clouarchitects dot com"
it's a 10 minutes draft, just a couple of lines, but could be extended and optimized further
21
86
714
happy to announce that react-three-fiber FINALLY has docs 🥳 tutorials, api, examples. still in the making but thanks so much
@ggsimm
for doing the groundwork
@NikkitaFTW
for all the content
@codesandbox
for sandboxed examples and
@vercel
for hosting it!
17
95
702
splats will change everything, it's like entering a live photograph. nobody modelled this in blender. it was shot with a handheld. reflections, lights etc aren't post pro render effects, it's all just in there. using drei/<Splat src="scene.splat" />, literally all it takes.
20
90
700
something that
@Andersonmancini
and i made in 2022. he did the UI, i the canvas. we wanted to make it a tutorial, but open source it due to time constraints.
using threejs, react, three-fiber, framer-motion, valtio
deploy:
demo:
17
86
683
making a ticker in threejs, the ⚛️ way. solving problems with composition can be a powerful tool. there's (almost) no math, you break a task up into units and orchestrate.
in the upcoming tutorial i'll go into the thought process of getting there.
7
52
673
Draggable list in ~30 lines using a new hook (currently 7.2.5-beta.0) that will be out next minor: useSprings(length, index => config), for arrays of springs, similar to a trail, but with distinct data that can be given each spring.
7
94
661
you can slowly check out alpha by
@nkSaraf98
could be the first editor of its kind. just add a plugin to vite, it AST analyses your code runtime, builds a UI for all the components, changes you make while editing GET FED BACK INTO YOUR CODE and persist.
19
77
665
always wanted to give
@bstsrvdbld
a shot — when i saw it 2018 i thought no way, too hard. i tried last evening and got closer with a few loc, very little math and struggle. good to see how far the tools have come. 👀
demo:
15
57
655
gaussian-splatting coming to r3f soon 😶🌫️
2
2
17
18
59
653
drei/<Cloud> is finally published and documented 🎉
it's particle based and instanced. you can glob cloud formations into components for re-use or full interop with 3rd party, physics etc.
try the sandbox below ↓
15
69
642
"how to place canvas on top of dom contents without loosing accessibility and selection to either text or meshes." + frameloop="demand" to make canvas not take a drop of performance or energy.
6
69
640
we have reflow 🎉
@giuliozausa
figured out a way to inform yoga/flexbox in react-three-flex of size changes down the nested tree. trying out his changes: next phase: optimizing it for better performance. then we'll release officially.
9
96
637
congrats zustand, 2 million npm hits/week, used in 1 out of 10 react projects. 🫣🎉
15
35
622
this sandbox teaches you how to animate colors and movement with react (r3f) and threejs
fullscreen:
sandbox:
5
83
627
Made a new hook today, useGesture. Pretty useful for any type of low-level gesture access, tracks mouse/touch and deltas. The whole thing down there is roughly 10 lines of code, interaction and all.
5
108
618
we (
@pmndrs
, well, mostly
@NikkitaFTW
and recently
@lewy_blue
) have been working on laying the groundwork for what will become a dev-first CC0 asset market: models, textures, hdris, matcaps, shaders, ..., you'll be able to dl, access by end-point, also npm install statically →
13
82
601
drei/
+ Clouds
+ MeshTransmissionMaterial
+ RoundedBox
+ Float
+ ContactShadows
+ CameraShake
+ PerspectiveCamera
+ Environment
+ OrbitControls
maath/
+ random.FlashGen
→
16
59
601
Here's a small react-spring driven fit-space/masonry grid: It teaches you how to calculate a grid (in 3 lines) and how to set up a transition for it (which is prepared for shuffle & animated adds/removes). Bonus: useMeasure and useMedia.
10
93
599
new in drei: <Orthographic & <PerspectiveCamera> can directly film into a render target, which then can be used for shading.
<PerspectiveCamera>
{texture => ...
the shader in this demo is by
@ore_ukonpower
@junni_jp
@MaximeHeckel
demo:
3
67
594
this was a problem someone faced on threejs discourse, how do you make a clump of objects being attracted to center-point.
body.applyForce(
position.normalize().multiplyScalar(-force)
)
codesandbox:
gh sponsors: 🙏
6
65
589
never really enjoyed workers because of syncing between main and worker thread. but
@chaimaoyuan
's r3f offscreen canvas example solved that. your entire canvas would just run on the worker, events and all, and driven by react.
it could be official ...
🫠
15
59
591
this goes into my
@threejs
trick bag: you shouldn't normally use many lights, this uses 5 with /tiny/ shadowmaps, random off positions around the main light, creates some nice depth and fake AO, then the main light and a reflector. it's like a cheap cycles, runs at 120 fps. 🤭
9
64
585
threejs is a forward renderer, since lights are expensive it can't have more than 4-8 lights max. or can it, how about 100.000 point lights. 🤔
14
47
588
trying out ideas for shopping, this is all getting too easy. shouldn't be able to do something like this with this little code.
i'm thinking about making this a full scale paid-for tutorial similar to the banana thing last year—lots of interesting concepts in this to teach. 🤔
26
50
583
we've been waiting 4 years for react to fix the cross renderer context problem. you can't use redux, tailwind, styled-components, or any foreign context in fiber ootb.
@Cody_J_Bennett
and its-fine fix it today.
styled-components styling a threejs blob:
3
54
571
trying to figure out a fisheye implementation. the math is still all warped and orbit controls steer upside down. but looks cool 😶🌫️
the scene i'm trying this with is from of course.
14
39
564
this box teaches you how to tie model animation to scroll. but the issue is damping—you need to make sure that the animation doesn't go haywire if you scroll fast. drei/scrollcontrols maxSpeed takes care of that.
deploy:
sandbox:
12
52
558
Haven't done this for a while: had this small sandbox lying around teaching gestures in Threejs. We have pointer-events, so you can pick any spec-compatible library, in this case react-use-gesture — the same way you'd attach drag and drop to divs and spans
6
45
558
added some recent examples to
🔴 132 sandboxes
🟠 100% open source
🟡 showcasing simple ideas & features
🟢 most are tiny
🔵 react + threejs
12
73
554
Some more react-with-gesture () inspirations. Playful version: And a super simple 10-liner: This could be made into tinder-like accept/dismiss stacks or anything that has the user flick stuff away.
15
107
549
fastest possible reflections landed in drei today. can be baked or live, but w/o any trouble at all, a tiny hook & it's done. thx to a gist that
@0beqz
made and the help of
@Andersonmancini
. the demo below ran easy 120fps, lights are not even baked yet.
14
59
555
two new drei components are out: Image and ScrollControls.
☑️ real scrollbar
☑️ webgl & html are accessible/selectable
☑️ trivial to react to offsets/deltas
make sites that would normally be reserved to high profile agencies, with near zero effort. ✨
7
51
549
react-three-fiber 2.0 is out today. 🍻 a lot of work went into this release. Pointer events + touch, event bubbling & capturing, on demand rendering (saves battery), api refinements, better performance, new hooks, proper docs (github readme) Enjoy! 🙏
10
110
545
drei/MeshTransmissionMaterial is complete 🎉 thx to
@N8Programs
taking over!
acts like MeshPhysicalMaterial (transmission, thickness, IOR, roughness, etc) but has chromatic aberration, noise roughness, anisotropy, DISTORTION.
compare it w/ the original
10
64
549
concurrent mode is kind of crazy. at work we build a cad system in react. we struggled with a huge part, one sketch alone has over 600 elements + constraints. always froze the tab. we updated to react
@experimental
and just like that it freaking goes ...
11
68
545
had little time this week but have been on/off working on drei/<Cloud> in the evenings. anyone wants to beta test? (sandbox ↓)
- all instanced (1 draw call)
- clouds fade when cam is near
- react to light
- puffy pseudo volumetric or bg planes
- fully configurable (colors etc)
16
48
546
i was aiming for a low level primitive <RenderCubeTexture> but this morning i woke up to
@garrettkjohnson
fixing pointer event raycast, which made a <Fisheye> feasible and self contained without downsides. so drei has that now. 🍻
<Fisheye>
<Scene />
</Fisheye>
demos below ↓
10
46
537
"Daily" hints: How to mix HTML & WebGL w/ occlusion:
This would otherwise be hard, but it's trivial in r3f. Just drop a Html component into your scene. It transforms and occludes automatically!
Help me keeping these going: 🍉🍴
7
45
528
small teaser for react-three/uikit by
@BelaBohlender
full ui component kit with nested scroll, buttons, inputs, dropdowns, tabs, checkboxes etc. it is not dom based but webgl/threejs. will be perfect for games, xr/vr/ar and of course apple vision and spatial apps.
18
65
525
landing page made in react, three💕fiber and drei for helpers and utils. + code, so you can make things like this yourself.
demo:
code:
11
46
522
now it's getting serious, you can profile and build ⚛️🥉🌾 scenes in framer 🥰✨ framer motion for animation, events and gestures.
Framer Motion 3D 🔵🔴 has arrived!
It's easier than ever to add beautiful and interactive animations to 3D scenes, with this new animation library for React Three Fiber.
Get started:
Sandbox:
30
297
2K
9
43
515