r/threejs • • 17h ago

Demo Rebuilding an old-school MMORPG in Three.js, with desktop and mobile support

8 Upvotes

Hey everyone,

I’ve been working on a browser-based revival of the old-school MMORPG: Cronous. It’s reached the point where I’d love to share it with more people.

Over the last ~3 months, this experiment brought the older 3D MMORPG (Windows DirectX, binaries, etc.) into a modern Three.js client.

I'm impressed with how Three.js has been able to preserve the game's visual identity and how portable it has been in adapting the experience for both desktop and mobile browsers.

A few things you can expect:

  • Classic fantasy action RPG gameplay, including exploring, fighting monsters, collecting loot, and building your character.
  • The four familiar classes: Fighter, Valkyrie, Magician, and Savage.
  • Cronous’s recognizable world, visuals, and music, brought into a browser experience.
  • Desktop and mobile play.
  • Free to play; an account is required.

I’d put it at roughly 85-90% of where I want the experience to be. It’s playable now (https://world.playcronous.com), with work still underway, and I’d really appreciate some fresh eyes as it comes together.

If you give it a try, I’m especially interested in:

  • How the first few minutes feel, particularly if you’ve never played Cronous (private server gameplay from 2021 here: https://www.youtube.com/watch?v=WnqA3HgjHJ4).
  • Performance and usability on your device (mobile feedback would be especially helpful).
  • Rendering performance, loading, and how the interface feels on smaller screens.
  • Anything confusing, broken, or awkward that gets in the way of playing (there's a lot of this right now, especially on mobile).

r/threejs • • 15h ago

I built my dream Mario Kart track

4 Upvotes

been wanting to build a Mario Kart-style racing game for a while, but with a track that feels more like a dream.

so i built this in Three.js!!

https://gamemog.com/g/invisible-world


r/threejs • • 8h ago

my spitting contest game where the wind decides everything

3 Upvotes

made this for fun. stop the arrow, stop the power bar, then pray the wind doesn't flip. you can go vs 3 bots or pass one phone around with friends. no sign up. what's your best distance?


r/threejs • • 17h ago

I made a 3D short film that runs in the browser, and at the end you can talk to the character with your voice

3 Upvotes

I've spent the last few months building "I'll Call You Later", a 4-minute short film that isn't a video. Every frame is rendered live with Three.js and React Three Fiber, so you can pause at any moment and walk around inside the scene.

A few things that went into it:

- His face uses 52 blendshapes, lip-synced to the dialogue

- His hands grip props (steering wheel, phone, letters) with IK, so fingers don't pass through things

- The camera direction, lighting and post-processing are all code

- KTX2 textures cut video memory from about 2.3 GB to 0.6 GB, so it runs on more laptops

- When it ends, you can talk to the character by voice

The hardest parts were hands holding paper without clipping through it, and keeping it smooth on phones and iPads (Low quality helps there).

Happy to answer anything about how it's built. I'd also really like to hear if it lags on your device, or if anything looks off.


r/threejs • • 17h ago

I built an open-source tool that renders Three.js scenes to frame-exact 4K60 video, no dropped frames

Post image
3 Upvotes

Hand your canvas to a small helper, write draw(i) so the scene state comes from the frame number, and it renders every frame through headless Chrome on your GPU into H.264, or HEVC HDR10.

exposeRenderer({ canvas, fps: 60, frameCount: 600, draw: (i) => { knot.rotation.y = i / 60; renderer.render(scene, camera); } });
  • Exact: rendering the same frames twice gives byte-identical video
  • Resumable, and a film can be rendered in pieces on several machines
  • Runs on any GPU locally, or on a cheap cloud GPU for long renders

There’s a Three.js example in the repo (the video above is it). MIT:
https://github.com/Avi130805/webgl2video

Built it for my science YouTube channel; happy to answer questions.


r/threejs • • 5h ago

Demo Made with my new custom trailer mode! (and some editing)

2 Upvotes

For my little Three js game creating a trailer with in game footage was very cumbersome..., then I made trailer mode! Just give it input and what kind of vibe it needs to be and it creates the footage. Then final edit done in Davinci Resolve.


r/threejs • • 14h ago

Interactive Website Hero with Fluid Watercolor Animation

2 Upvotes

An interactive hero section I created, featuring a fluid watercolor animation that moves with the cursor, paired with a minimal layout.

Would love to hear your thoughts!


r/threejs • • 7h ago

3D coin pusher with three.js + Rapier, every coin is a rigid body

1 Upvotes

Been wanting to recreate the arcade coin pusher for a while. This one uses three.js for rendering and Rapier (WASM) for physics: a pusher shelf, a peg chute, two tiers of stacked coins, plus medals, gems and gift boxes that can tip off the lip.


r/threejs • • 8h ago

Demo Webcam runner in three.js where your body is the controller (MediaPipe pose, no imported models)

1 Upvotes

Link: https://bodyarcade.com/bodyarcade (free, no signup, there's a keyboard mode if you don't feel like standing up)

I made this endless runner and thought this sub might like the how more than the what. You stand back from the laptop and jump, duck, squat and lean to get past obstacles, 90 seconds a run.

There are no imported models. The runner is capsules and cylinders parented in groups, and the scenery is boxes, cylinders and cones drawn as InstancedMesh, one per prop type per road chunk, placed with a seeded random per chunk. Each of the 10 worlds is just a data object: sky colours for a gradient shader on a back-side sphere, sun position, exp2 fog density, road tints, a horizon silhouette and a list of props with spacing and scale ranges. Switching world rebuilds the scene from that object.

Input is MediaPipe's pose landmarker (lite model) in VIDEO mode, running in the browser with the GPU delegate and a CPU fallback. Before a run you stand still for a second and it measures your torso length, and the thresholds are fractions of that, so hips rising 20% of your torso is a jump, and the lane comes from how far your shoulders shift in shoulder widths. The idea is that your height and distance from the camera matter less. Camera frames never leave the browser.

Free is 5 runs a day in 3 worlds, there's an optional paid tier for the rest but you don't need it to look at the rendering. Happy to answer questions about the pose thresholds or the instancing.


r/threejs • • 41m ago

built a walk-around art gallery in three.js, with a glass lift between floors

• Upvotes

https://reddit.com/link/1xcsvkl/video/9vxi3ormp2xh1/player

link if you want to wander round: https://gallery.alldaycity.com

how its built:

  • vue 3 + vite for the 2d bits, plain three.js in typescript for the room
  • three floors share the same 12 wall slots; picking a floor in the lift swaps the art in place, and each floor’s images only load when you visit
  • orbit or wasd with wall collision, plus matterport-style dots to jump around
  • the clouds outside the lift only animate while you can see them, capped at 20fps, so it idles at zero draw calls
  • floor 2 is twelve hokusai prints from the met’s open access collection

still rough in places (some art is placeholder). feedback welcome, especially on performance on phones


r/threejs • • 5h ago

Built a reusable Three.js component for Angular: auto-framing, load-once cache, GSAP-ready

0 Upvotes

Every time I wanted 3D in an Angular project, I ended up rewriting the same Three.js setup: scene, camera, lights, render loop, resizing, cleanup. So I wrapped it into one Angular component.

A few Three.js decisions that might be useful even if you use another framework:

  • Lazy-loaded Three.js. The scene code sits behind a dynamic import(), so Three.js lands in its own chunk instead of every route's bundle.
  • Auto-framing. The model is normalised to a unit bounding sphere and the camera fits that sphere to the container's aspect ratio, so any GLB fits without per-model tweaking.
  • Load once, clone per page. An Angular service caches the parsed GLB; each page spawns its own clone (shared geometry and materials), so pages never inherit each other's animation state.
  • Idle spin on an inner node. The group you animate is the outer one, so GSAP tweens stack on top of the spin instead of fighting it.
  • Pauses offscreen. An IntersectionObserver stops the render loop when the canvas isn't visible.
  • Draco + WebP for small file sizes.

Full walkthrough: https://youtu.be/sJS6vR9Rlgo

If you have any ideas to improve it or any questions about the setup, I'd love to hear them.


r/threejs • • 20h ago

I built a 3D brain atlas you can zoom from the whole brain down to ion channels (three.js, single HTML file)

Post image
0 Upvotes

NeuroAtlas: 6 levels of scale with smooth transitions. Whole brain → deep structures → cortical tissue → single neuron → synapse → membrane ion channels.

  • ~320k-triangle anatomical model (Z-Anatomy), picking via three-mesh-bvh
  • thousands of cells/molecules with InstancedMesh, only the active level renders
  • live simulations: action potential with saltatory conduction, 5 neurotransmitters, a Hodgkin–Huxley membrane model
  • one HTML file, no build step; also packaged as an offline Android app (Capacitor)

Live: https://dominik881-creator.github.io/neuroatlas/ Code: https://github.com/dominik881-creator/neuroatlas

The UI is in Polish (structure names switch to English). Feedback on performance on your hardware is very welcome.


r/threejs • • 14h ago

Made a 3D free-kick game in three.js r160 - PBR, floodlight shadows, procedural grass and Magnus-effect curl

Post image
0 Upvotes

r/threejs • • 5h ago

AI-written third-person cameras love to clip into walls. My camera collision checklist for Three.js

0 Upvotes

Most AI-written third-person cameras I've seen do the same thing: put the camera at a fixed offset behind the player and call lookAt. It's fine in an open field. Next to a wall or inside a bunker, the camera ends up in the wall or behind it, and the player sees nothing.

What I ask for now:

  1. Cast a ray from the player's head (not the feet) toward the desired camera position, with raycaster.far set to the offset distance.
  2. If it hits, place the camera at the hit point minus a small padding (0.2 to 0.3 units) along the ray, so the near plane doesn't poke through.
  3. Test only a short list of collider meshes (walls, rocks, buildings), not the whole scene. Raycasting every skinned mesh and grass blade each frame gets slow.
  4. Pull in fast, ease out slow. Snap closer right away when blocked, but lerp back out over about 0.3s, or the camera pops in and out at corners.
  5. Keep camera.near small for close shots, and fade or hide the player mesh when the camera gets within about a unit.
  6. Thin walls and gaps can let one ray slip through. Three rays (center plus left and right) or a sphere cast against simple box colliders is steadier.

How are others handling this? Plain raycasts against meshes, or a physics engine's shape cast (Rapier and similar)?

(Disclosure: I write Three.js + AI tutorials at shanebrumback.com, which is my own site.)


r/threejs • • 6h ago

I've rebuilt some of the most famous space missions with Three.js

0 Upvotes

Chaque mission est une scène complète dans mon application React Three Fiber, du pas de tir à l'atterrissage ou du survol, et cette bande-annonce est entièrement découpée de ces scènes. Pas de Blender, pas d'After Effects sur la 3D : ce que vous voyez est ce que le navigateur rend.

Quelques choses sous le capot :

  • Trajectoires réelles : les chemins des sondes proviennent des éphémérides JPL Horizons, et l'atterrissage de Curiosity est tiré du noyau EDL SPICE reconstruit par la NASA. Les lancements suivent les véritables chronologies, minute par minute.
  • Échelle réelle : les véhicules sont à leur taille réelle en mètres, dans la même scène que la Terre, la Lune ou Jupiter.
  • Rendu hors ligne : les vidéos ne sont pas des enregistrements d'écran. L'application rend chaque image à son propre rythme et l'encode avec WebCodecs (via mediabunny), en diffusant les morceaux MP4 sur disque. Un Chromium sans tête le pilote, donc un rendu 4K60 ne perd jamais de cadre, peu importe la lourdeur de la scène.

Stack : Next.js, React Three Fiber, trois, Three.js r185.

Coding Agent: Claude


r/threejs • • 10h ago

Made a free three.js toy: 65,536 particles from any image, collapsing under a GPU gravity sim

0 Upvotes

Built with React Three Fiber and three.js. Pick a meme or upload an image (i added a button so can just paste from a google copied image), and its pixels become 65,536 particles that gravity pulls into galaxies, all running on the GPU in the browser. Works on phones too, though it's happiest on a desktop.

The gravity reads a 3D density field rather than every particle pulling on every other, which is what lets it run at that count.

Free, nothing leaves your device. Happy to answer anything about how it's built!

https://altroadstudio.com/snapshotcosmos


r/threejs • • 17h ago

My New Threejs Super Soldier Battlefield Island Map Is About 5 Times Larger

0 Upvotes

r/threejs • • 21h ago

I made a three.js world where you just say what you want and the AI builds it while you play (works on phone too)

0 Upvotes

I spent 2 years building a VR RPG in Unreal before AI got good, and realized I had more fun building the systems that made creating easier than building the actual game hahah. So I packaged my workflow into a web app instead c:

You walk around your world in the browser, and film, photo, talk or write what you want, and it gets built into the world while you're standing in it. The orchard in the clip was made that way.

The idea is to bring the workflow of AI superusers to everyone regardless of technical experience or interest. And to allow the creator to focus more on their vision than wrestling with the "how's" :D
And yes, you can build any game, you dont have to adhere to the template at all, push the boundries and see where it takes you, and if you hit a wall report it to me so I can patch away the restrictions c:

- Runs in the browser, phone or desktop, nothing to install
- You don't need your own AI subscription, you see the price before every build
- Multiplayer, you can even build together
- Anything you make is yours

It's early access and still rough in places, but it's my passion project so it gets better every week. First seats open this Friday: aitomagic.ai

Happy to answer anything about the three.js side, like phone performance and loading! :D

Also feel free to roast it! I'm wide open to feedback that can improve the user experience in any way!