Loading video...
Video Failed to Load
Hey there new #threejs devs, vibe coders, and creative tinkerers 🎮✨ I’m the guy who made Mario Kart in JS... and yeah, it was terrible. 😂 But I learned a lot since, so here are 5 lessons I wish I knew before: 🧵👇
111,662 views • 1 year ago •via X (Twitter)
10 Comments

1. Use lerp, always. Linear interpolation is your best friend for smooth movement. Don’t just add numbers to rotation or position. It’s the secret sauce for natural transitions, especially for car turning, camera follow, and anything that moves.

2. R3F is awesome but know its limits. React Three Fiber is powerful, and I still love it. But keep React out of your 3D rendering logic. Seriously. Use React for UI only. React-re render doesn't do well with Three.js frame loops. use Ref object.

3. Keep an eye on your draw calls. 👀 Every draw call hits your performance, and they add up fast. At first, you won’t notice. Then suddenly your scene’s lagging and you’re wondering why your 30 cubes are killing the FPS. (Hi @levelsio) Batch stuff. Merge geometries. and...

4. Use Instances! With three.ez/instanced-mesh and InstancedMesh2, adding, updating, and modifying instances in real time is super smooth and super easy. You can go really far even give each instance its own shader. 🔗

5. Have fun. Game dev is so much fun. I’ve lost hours just tweaking things... or honestly, just playing my own game. It's so cool to do !

The tweet is doing Numbers ! Might do a part two 👀

There you go

I guess this is where I will learn more about doing Mario Kart in three.js

Ohhh this is so cool !! The old graphics with modern VFX matches so well ! Good job !

It does something right ? 👀


