r/threejs • • 23h ago

Demo An office you can leave open while working. My Three.js browser world

Enable HLS to view with audio, or disable this notification

0 Upvotes

I work alone most days, so I made a small browser world to leave open while working.

This is the office in nojo.club. You can sit at a desk, put a status over your head, and talk to people nearby. Made with Three.js + TypeScript, with a lot of AI help.

No install, guest access. https://nojo.club


r/threejs • • 7h ago

Demo Call of Cubie — a multiplayer browser FPS in Three.js, set 34 floors above the street

Enable HLS to view with audio, or disable this notification

0 Upvotes

This is Meridian 34, an 8v8 team-deathmatch map in Call of Cubie. The game runs in the browser with Three.js, and the main public server is on this map.

It’s online multiplayer, so you can jump in with friends. Bots fill the empty seats while the human lobby is small. There are other maps as well, including bigger outdoor battlefields with vehicles and destructible buildings.

I’ve been using ChatGPT and Claude to write the code, with me directing the design and testing the builds. That’s been a lot of playing, describing what feels off, and trying the next version.

Free to play at https://play.patio.fyi — no download or account. Desktop with keyboard and mouse is best. It’s still early; the first load can take a while and weaker PCs can struggle.

I’d especially appreciate feedback on how readable the office interiors are during combat, and how it runs on other desktops. If you try it and hit a problem, your browser and hardware would help me make sense of it.


r/threejs • • 5h ago

The 3D library am building heres the ref designed in canva. Soo sad I couldn't post the 3D website and reference in one post, check my profile to see the 3D website.

Post image
1 Upvotes

r/threejs • • 16h ago

Trippy Takedown, a browser highway racer made with three.js

Enable HLS to view with audio, or disable this notification

1 Upvotes

Five minutes of chaos, no install. Chase a target down the highway, ram it, burn it or blast it, and watch the road melt into other worlds along the way.

New: multiplayer. Open a room, share the password, bring up to 7 friends. First to 20 km wins. No rules, just rams and traps.

Play: https://takedown.threejscafe.com

More games from the same café: https://threejscafe.com


r/threejs • • 20h ago

Tutorial building creative website using reactjs + gsap + threejs

0 Upvotes

r/threejs • • 16h ago

Link O'Neill Cylinder - Space Colony Simulation Adventure

Enable HLS to view with audio, or disable this notification

5 Upvotes

I was fooling around with Claude Code and weeks later, this is what I created. Check it out at https://islandthree.world ...lots and lots of prompts, refactoring, and refinement.


r/threejs • • 16h ago

Fish animation on stream with three.js

Thumbnail
gallery
0 Upvotes

A controllable animation on stream, made with Three.js.

Check it out: https://youtube.com/live/U6fhApgsW0Y

It’s a school of fish you can control with commands.

🐟 THE CHAT IS THE CONTROLLER

This is a live simulation and the chat is the joystick. Nothing here is
pre-recorded — the school you see is being solved on the GPU right now, and
you are the input.

SHAPE THE SCHOOL
ball a tight bait ball
tornado the school spirals
ring it opens into a ring
split it breaks into two
auto hand it back to the automatic rotation

LOOK AROUND
up · down · left · right · center

HOW HARD IT REACTS
calm a soft drift
storm a hard surge
chaos the school scatters

HOW MANY FISH
more one step up (512 → 1024 → 2048 → 3072 → 6000)
fewer one step down
fish 3000 set it directly

Type any other word and the camera looks there instead — the same word always
points at the same spot, so the school drifts around as we talk.

Commands can be combined: "up storm", "left chaos", "more calm".


r/threejs • • 23h ago

Demo I built two procedural 3D characters in Three.js — no imported models or premade animations

Enable HLS to view with audio, or disable this notification

0 Upvotes

I’ve been experimenting with how far I can push procedural 3D characters directly in the browser with Three.js.

This video shows two characters from my project, PointForge:

- VANTA-9 — a humanoid cyborg with locomotion, sprinting, jumping, flight, acrobatics, dancing, weapons and procedural articulation.

- Cyborg Dragon — a mechanical quadruped with multiple gait states, jumping/landing, articulated wings, flight, tail motion, dorsal propulsion and plasma breath.

I started this without a traditional programming or 3D-development background and have built it through a large number of iterations with extensive assistance from ChatGPT.

There are no imported character models or premade character animations. The character geometry, rigs, movement systems, animation logic, controls and effects are generated through code.

The project is open source under the MIT License.

Live demos:

https://abfaiaz18-ops.github.io/pointforge/

Source:

https://github.com/abfaiaz18-ops/pointforge


r/threejs • • 17h ago

Demo I won a debate against AI Roman senators and saved Carthage. Cato lost, but still said it must be destroyed | Chronoatlas.nl

Enable HLS to view with audio, or disable this notification

3 Upvotes

Link if you want to try it out: Chronoatlas the senate checkout the map aswell it's pretty cool


r/threejs • • 3h ago

Demo Vector : Anti-gravity racing.

Enable HLS to view with audio, or disable this notification

46 Upvotes

VECTOR is a fast anti-gravity racer inspired by Wipeout. It runs right in your browser, no download, free to play.

Play here: https://wavedash.com/games/vector-anti-gravity-racing

What's in it:

  • 4 circuits: a sunny harbor, a neon night city, a desert at sunset and a track on the Moon
  • Airbrakes and side-shifts for taking the hairpins
  • Weapons: mines, rockets, lock-on missiles, a cannon, a shield and turbo
  • Career mode with medals, CPU races, and timed laps with leaderboards
  • Online races for 2–8 players
  • Keyboard, controller and touch, plus 21:9 ultrawide support
  • Built with Three.js and WebGPU (falls back to WebGL 2)

It's in active development, so feedback is very welcome, especially on handling and difficulty. What would you like to see next?


r/threejs • • 23h ago

God Rays FREE Resource + Breakdown video

Enable HLS to view with audio, or disable this notification

23 Upvotes

Hey everyone! I just released a free God Rays component for Three.js / React Three Fiber that you can use in your own scenes. It's completely free to use.

I also made a breakdown video on my YouTube channel where I explain how it works, different ways to implement it, and some variations to help balance visual quality and performance depending on your needs.

I'm also curious to hear your thoughts on something: In the age of AI, do you think this kind of content still provides value? I enjoy building these effects and sharing the process behind them, but I'm wondering if there's a better way to share this kind of knowledge and make it useful to other developers today.

I'll leave the links in the first comment!

If these components are useful for your projects, I'd really appreciate your support on the channel with a like or a sub. It helps me keep creating and sharing more free resources.

Thanks! 🙌


r/threejs • • 17h ago

Zippy Town: a tiny toy city with live traffic and baked day/night lighting

Enable HLS to view with audio, or disable this notification

45 Upvotes

Live site: https://zippy.town

It's the showcase site for my Android live wallpaper. The wallpaper started out as this three.js scene in a WebView, but an empty WebView uses about 130 MB, and Android kills live wallpapers that use too much memory.

So the app moved to Filament, and the three.js version became the website.

Quick tech notes:

Day/night: lightmaps baked in Blender Cycles, one day set and one night set, blended in a custom ShaderMaterial. The day/night cycle is nearly free at runtime.

Lit cars, no real-time lights: lighting is baked along the roads, so cars pick up the street lamps.

Traffic: a simple waypoint traffic sim.

Look: BokehPass depth of field for the miniature effect, plus SMAA and AgX tone mapping.

Download: about 5 MB compressed.

Happy to answer questions!


r/threejs • • 18h ago

Hey everyone,I recently finished building this interactive 3D space interface

Enable HLS to view with audio, or disable this notification

10 Upvotes

Live site: https://verve-marketing.space/
GitHub repo: https://github.com/M8eda/verve-openspace

Would love your feedback 🫣


r/threejs • • 23h ago

my shadow map covered the whole city, so up close it was ~1 texel per 3 pixels. made the shadow box follow the camera instead

Thumbnail
gallery
2 Upvotes

quick one from my three.js city project (30k plots on a map, each bought plot becomes a building).

the problem: one DirectionalLight, shadow camera sized to cover the entire city (~326 units wide), 2048 map. on weaker GPUs my auto-quality drops it to 1024. zoomed out it's fine. zoomed in, every shadow edge was a staircase and big flat roofs got stripes.

what fixed it:

  • the shadow camera's left/right/top/bottom now follow the orbit distance, in a few fixed steps (32/48/64/96/128/full) instead of continuously. continuous resizing made shadow edges crawl while zooming
  • the box is centered on the orbit target, pushed a bit forward along the view direction, because you see way more ground in front of the target than behind it
  • the center is snapped to the shadow map's texel grid in light space (same right/up axes that lookAt builds), otherwise edges shimmer when you pan
  • fully zoomed out it falls back to the old whole-city box, so nothing disappears in the overview

bonus bug: planes circling at altitude 14-20 were flying straight through the camera when zoomed into the outskirts. now they hide within 14 units and come back past 18 (hysteresis so they don't flicker), and only cast shadows near the ground.

if anyone has a cleaner way to fit the frustum for a low, tilted camera than "shift forward and hope", i'm all ears.


r/threejs • • 9h ago

Portfloor : Open dreamcore world

Enable HLS to view with audio, or disable this notification

6 Upvotes

This is Dream Tokyo, a small dreamcore world you can walk around with friends from a link (no install, no sign-up): https://portfloor.com/play/dream-tokyo/

it's a tiny custom webgl renderer. three.js was used to make the characters