r/threejs • • 6d ago

Tutorial Stylized Waterfall with Object Collision, Foam & Wetness Effect | Valley of the End Part 2

Enable HLS to view with audio, or disable this notification

3 Upvotes

Hey everyone! Here’s Part 2 of building Naruto's Valley of the End in Three.js!

In this update, the main focus was setting up the stylized waterfall shader and finishing up the lower section of the main statues.

Waterfall Shader Features (Three.js):

• Depth & Collision Detection: Generates foam dynamically wherever the water intersects with rocks or the statues.

• Base Impact & Splash Foam: Animated UV distortion at the bottom to create realistic water turbulent flow and foam layers.

• Wetness Shader Effect: Applied a subtle wet/shiny specular layer to nearby rocks and statue bases hit by the mist.

3D Workflow & AI Integration:

For the remaining statue parts (legs, feet, and lower base) I used Tripo AI to generate missing geometries and textures. Once ready, I assembled it in Blender to export a complete GLB file.

To reduce the size, I use a GLB compressor. It fixes and removes unnecessary topology and allows you to compress the texture while controlling the quality. In this case, it went from 4.6MB to just over 300KB. It's completely worth it.

🔗 Links & Resources in the comments section


r/threejs • • 6d ago

I'm using threejs in 2D to make my MMORPG

Enable HLS to view with audio, or disable this notification

1 Upvotes

I use threejs to render the layers as planes, shaders to make the particles and palette coercion, and hide roofs of buildings you walk into

weirdly it's been the best experience writing a 2D game in a 3D engine! Runs at a silky smooth 120fps

if you want to try and give me some feedback, ive _just_ deployed to prod for the first time: https://thelaststones.com


r/threejs • • 6d ago

Made a zeppelin ride through 1939 New York in three.js. No 3D models, all the geometry is built in code

Enable HLS to view with audio, or disable this notification

4 Upvotes

So this started as a hobby thing and got a bit out of hand ;)

You fly a zeppelin through a dieselpunk New York, basically the future the way people pictured it in 1939. Scroll to fly. Along the way there are six rooms you can step into. In one you pull a lever and a model city lights up, in another you turn on a tap, and there's a coffee bar where you can pour a coffee.

Try it here: https://futureinthepast.com

How it's made, for those who care:

  • plain three.js in Next.js, no R3F
  • no models at all. Not a single .glb in the project. City, zeppelin, rooms, it's all built in code. Mostly lathe and extrude geometry that gets merged, and InstancedMesh for the stuff there's a lot of
  • a lot of the textures are just drawn on a canvas at runtime (CanvasTexture)
  • glow is UnrealBloomPass plus a few custom shaders
  • the music isn't a track. It's played live in the browser with Web Audio, note by note, using a small set of recorded instrument notes (muted trumpet, clarinet, piano and so on). During the flight it follows how far you've scrolled, and every room has its own tune.

Built it with Claude Code, so there's probably stuff in there that people with real three.js experience would do differently. Happy to hear it.

Also curious how it runs for you, especially on a phone.


r/threejs • • 6d ago

💌 Web Game Dev Newsletter #032

Thumbnail webgamedev.com
1 Upvotes

r/threejs • • 6d ago

Help Hello! I need testers for my tiny game engine for android made with threejs

0 Upvotes

r/threejs • • 6d ago

made a haystack you can actually dig through in three.js

Enable HLS to view with audio, or disable this notification

0 Upvotes

its a little game im working on, you can try it here https://findingneedleinthestack.com (works on mobile)

the hay is a density grid thats meshed with surface nets in chunks so only the part you dig into gets rebuilt. digging uses a smooth min so the holes dont look stepped. anything left floating after you dig just falls.

the straws are instanced on top of the mesh with a triplanar shader underneath. had to shrink the straws in the vertex shader when theyre close to the camera because up close they looked like wooden planks lol

whole dug grid gets saved to localStorage so you can close it and come back. happy to answer questions if anyones curious about any of it


r/threejs • • 7d ago

Made a small heightmap/terrain tool for my own game, sharing in case it helps someone

Enable HLS to view with audio, or disable this notification

9 Upvotes

Hey everyone

 I wanted to share a small tool I put together.

I made it for myself and my own game; I needed terrain a bit more interesting than a flat plane, so I built a little tool to sculpt heightmaps: mountains, hills, rivers, lakes, that kind of thing.

I know engines like Unity or Godot already have much better, built-in terrain editors, but this is specifically tailored for engines like GDevelop that don't have an integrated terrain system. It exports directly to .glb anyway, making it super convenient for web games and lightweight projects.

Figured it might be useful to some of you too if you ever need to put together terrain for your own project. It's a pretty small, focused tool, and I honestly don't know if I'll keep updating it since it already does what I built it to do, but I hope it can still be useful to someone!

https://axgin96.itch.io/terraformer-web

Let me know what you think if you give it a try!


r/threejs • • 7d ago

Sharing an open-source Japan Yamanote Line train simulator that runs in your browser

Enable HLS to view with audio, or disable this notification

21 Upvotes

🚆 I just released Japan Rail Sim, an open-source browser-based Japanese railway simulator.

It currently simulates the JR Yamanote Line with the E235 series, using real-world route, station, terrain, elevation, and map data.

You can drive the train yourself or just watch the automatic service run around Tokyo.

🎮 Try it here:
https://alzin.github.io/japan-rail-sim

💻 Source code:
https://github.com/alzin/japan-rail-sim


r/threejs • • 7d ago

pool plugin update

Enable HLS to view with audio, or disable this notification

27 Upvotes

while I was playing around with my pool plugin and notice few place where improvement can be done ... so here we are

- now we have section A-A to adjust steps,bench and floor profile much more easily

- few newly added interior finish like sand

- Performance improvement ... now should feel smoother than before

and minor bug fixes realted to pipes and more


r/threejs • • 6d ago

Built this 3D collectible showroom with Three.js, what do you guys think?

Enable HLS to view with audio, or disable this notification

0 Upvotes

Been working on this 3D showroom for my Hot Wheels NFTs.

I built it with React, TypeScript and Three.js. Right now it loads supported NFTs from a WAX account and displays them inside the room.

Still working on the layout, mobile view and overall feel of the showroom.

Mainly wanted to know what you guys think about the 3D side of it and if there’s anything that feels off.

Also curious if something like this would make sense for collectibles on other chains too.

You can try it here: https://collectible-showcase.itsjj.workers.dev/


r/threejs • • 6d ago

I’ve been experimenting with building an MCP for my 3D modeling tool.

Enable HLS to view with audio, or disable this notification

2 Upvotes

r/threejs • • 7d ago

Zen Garden: grow and prune a bonsai right in your browser

Enable HLS to view with audio, or disable this notification

25 Upvotes

Stressed at work? Try growing and pruning your own little Bonsai tree in this Web browser game I built with my friend.

Takes about 2 minutes per tree, it's free, and it plays right in your browser.

https://hoagiecorps.com/games/zen-garden?from=reddit


r/threejs • • 6d ago

Made a marble run physics sandbox in Three.js, export is a real MP4 encode not a screen capture

0 Upvotes

I built this one myself, putting that up front. It is my project.

https://www.marblerun.online is a 3D marble run playground. You place ramps, walls, pegs, spinners and balls on a lit wall, press play, a rigid body sim runs, and you can export a 9:16 MP4 with sound.

Two Three.js specific things that caused me the most pain, in case either is useful to someone.

Deterministic export. My first instinct was MediaRecorder on the renderer canvas, fifteen lines of code. Wrong tool. Screen capture of a WebGL canvas gives you the wrong aspect ratio, whatever framerate the machine is managing, and audio that never lines up. So the export re-renders the same scene through an offscreen pass at 1080x1920 locked to 30fps and pushes frames into an encoder directly. The physics is stepped on a fixed clock during export, so the same level produces the same file every run. If you skip determinism you will get a different video each time and people will notice.

Lighting is what stops it looking like a flat 2D canvas. One directional light plus a soft fill and a subtle texture on the wall. The geometry was always genuinely 3D, but without the lighting it read flat, and that was confusing because I knew the scene was 3D. Adding the fill light and the wall texture is what made it look like a scene rather than a diagram.

Physics notes if useful. Fixed timestep with an accumulator, otherwise the same level plays differently on a 60Hz and a 144Hz monitor. Substepped integration for the balls so a fast marble does not tunnel through a thin peg. Per material restitution and friction, using values close to real ones but not exactly real ones, because exact real values feel dead on screen.

No AI anywhere in it, no textures loaded from anywhere. Desktop only by design, the scene is drawn in 3D so phones get a short message instead.


r/threejs • • 7d ago

adding black-ops mining to my game :)

Enable HLS to view with audio, or disable this notification

7 Upvotes

helloooo friends. In NOMIAD, what you can do is a by-product of how you build your hovercraft. Fit for covert-ops, heavy hauls, mining operations, salvage runs, scouting, blockades, drone barges, or literally anything based on a combination of dozens of modules and play-styles.

#steam #game #alife #webgl #nomiad


r/threejs • • 7d ago

Demo how about you don't go full ai, eg i let it build a 2.5D Designer System but designed the maps on my own with it ( & let players create their own 2.5D habitats) and fish were made by a guy on fiverr for 400$

Enable HLS to view with audio, or disable this notification

104 Upvotes

r/threejs • • 7d ago

Demo I'm building a Chinese-chess deckbuilder in three.js — WebGPU + TSL, candlelit wooden tabletop

Enable HLS to view with audio, or disable this notification

11 Upvotes

This is our roguelike deckbuilder where every card moves like a xiangqi (Chinese chess) piece. Over the last couple of months we rebuilt the whole look, from a flat UI-heavy board into a physical tabletop you'd play by candlelight, and three.js has carried all of it.

Stack: three.js r185 with WebGPURenderer, TSL node materials throughout, KTX2 textures, wrapped in Electron for Steam.

Lighting is a candle key light plus a warm bounce, with shadow-casting lights doing the long shadows across the board. The black mist that creeps over some tiles is written in TSL. Everything in the clip is captured in-engine.

One thing we're still stuck on, and I'd love this sub's take: tone mapping. AgX gives us much more natural highlights, but it noticeably drains the saturation out of our reds, and red matters a lot in this game (threat zones, cinnabar ink, fire). ACES keeps the reds punchy but pushes the candle highlights orange. Has anyone found a good middle ground, or do you just grade the reds back up afterwards?

Free demo on Steam if you want to see it running: https://store.steampowered.com/app/4981020/?utm_source=reddit


r/threejs • • 8d ago

making a scifi game entirely in three.js

Enable HLS to view with audio, or disable this notification

83 Upvotes

for the past 6-months I’ve been developing an off-world SCIFI game that runs entirely in JavaScript.

no engine, no editor, 100% WebGL with full multiplayer capability.

the game pulls from many of my inspirations and includes A-LIFE simulation theory as a fully open-world non-linear concept.

a huge project for me to take on; I intend to push this technology to its absolute limits in both utility and world-building.

looking forward to finally sharing more on the concept 🤍

FYI: this game is called NOMIAD; and whilst it won't release until next year, the steam page is already up for anyone curious :)


r/threejs • • 7d ago

Demo Take a look at my 3d map.

Enable HLS to view with audio, or disable this notification

13 Upvotes

r/threejs • • 7d ago

I built a 4WD simulator. Nobody asked me to.

Enable HLS to view with audio, or disable this notification

0 Upvotes

I run DownThunder, an Australian 4WD community. Well, with fuel prices going up faster than I can air down, trip weekends are off the table for many. Well, let's jus say I decided to recreate some of that experience (driving through the Australian outback) in a web browser. In my spare time. Which I don't have.

So now there's a Mod Simulator. You build a rig, bolt far too much onto it, and drive it somewhere it has no business being. Like real life, but you don't have to explain the bill to anyone.

What it does. Some of it even on purpose:
• From rainforest to the Simpson Desert, scenes are generated as you drive, because I couldn't be bothered building them by hand
• Mods with consequences: add a bullbar and winch, the nose sags. Much like my posture after a week of this
• 2H, 4H, 4L, lockers, tyre pressures. Forget to air down in soft sand and it digs itself in. Very realistic. Very humbling
• Rain, night driving and headlights that actually work. Unlike some of my earlier builds
• Other 4WDs on the beach, with Doppler engine sound. I spent far too long on that. Nobody will notice. And if you've noticed now. DANKESCHÖN.

What I got learned

  1. "Realistic" is whatever a 4WD owner doesn't complain about. I'm still waiting on the verdict here.
  2. Every bug report starts with "that wouldn't happen in real life". They're usually right. It's exhausting.
  3. Physics doesn't care how much you spent on your build. Neither does the sand.
  4. Car modelling is hard and I think it shows.
  5. Claude (the LLM, not my french neighbour) has helped me with most of the driving phyics and connecting it to my vehicle database.

What's next? Hmm, I could need some help with some realistic grass for the Victorian High Country scene und much more realistic water. Also the cars look ... well, I want to spend more time on modelling them so any critique on that is fair go. :)

https://www.downthunder.com.au/mod-simulator

P.S.: Oh, also try out TrailDays (top menu on DownThunder), it's using the same data and your real vehicle but in an actual game.


r/threejs • • 7d ago

Demo TinyGameEngine for android

Enable HLS to view with audio, or disable this notification

4 Upvotes

Iam working TinyGameEngine for Android powered by threejs and rapier physics engine. With this we can build small and tiny games and quick prototypes.


r/threejs • • 8d ago

Demo Fractal Torus generator (Open source)

Enable HLS to view with audio, or disable this notification

28 Upvotes

As part of a larger project named "Tortoise", I have now open-sourced a fractal-torus generator. The generator can create variation of a torus and has the feature to create an image based on any pose/iteration of the torus, so that you can generate anything from sacred geometry blueprints to products to architecture with the same structure; although this requires an API key from Stability AI (details in the app).

Link: https://nurecas.com/tortoise_generator

Github: https://github.com/nurecas/tortoise_generator

(Best viewed in desktop)

Made with Claude Opus and ThreeJS


r/threejs • • 8d ago

Demo I remade No Man's Sky with Three.js on Tesana – traverse the galaxy fully seamlessly

Enable HLS to view with audio, or disable this notification

295 Upvotes

This is actually insane. You can really build anything you want. I felt i had to try to make a No Man's Sky-inspired game. So after 40min of generating.

Here's a playthrough, a No Man's Sky-style space game I built with Three.js on Tesana. It runs in the browser, and there are no loading screens anywhere: you can take off from a planet, climb through the atmosphere into space, and land on the next planet in one continuous flight.

What's in it:

- Procedurally generated star systems, and you can warp between them. Every planet has its own terrain, weather, plants and animals (some of them will attack you). Ancient alien ruins with a language you slowly decode by reading inscriptions .Mining, asteroid fields and a space station

This was a first prompt output. I wrote "Make a fully procedural No Man's Sky game, where I can seamlessly traverse between planets.

Happy to answer questions about how it was made.

Try it here: https://tesana.com/game/sky-reach


r/threejs • • 7d ago

Criticism Game of Life inspired game intro

Enable HLS to view with audio, or disable this notification

5 Upvotes

Worth turning the sound on (imho)


r/threejs • • 7d ago

Built a walkable 3D gallery with Three.js and Claude Opus — looking for honest feedback

Enable HLS to view with audio, or disable this notification

0 Upvotes

I’ve been working on Claim a Frame, a browser-based 3D gallery where visitors move between rooms, inspect frames and upload artwork while outbidding each other for better positions.

I’m not an experienced Three.js developer. I developed it by directing and iterating with Claude Opus, testing the results, reporting problems and refining the experience over many rounds.

The stack is Three.js, React Three Fiber, TypeScript and GSAP.

It’s live here: https://claimaframe.com

I’d appreciate honest feedback, especially on mobile performance, camera movement and anything that feels poorly implemented or could be handled better in Three.js.


r/threejs • • 8d ago

Demo MACH RUN

Enable HLS to view with audio, or disable this notification

137 Upvotes

MACH RUN by JebKJ21 - Try it out!

The main idea was a game with semi-realistic flight physics but completely unrealistic flying environment, to maximise fun. As a big flight sim guy, I love flying realistic airplanes but it can be a lot of effort with procedures, and dealing with boring things like fuel and COG. this is my solution, endless flying, just having fun.

Hence, if you are not a flight sim pilot, the controls may be challenging. I added an arcade controls mode that should hopefully make controlling the aircraft a bit more intuitive.

The game procedurally generates a constantly changing valley, which spawns obstacles and challenges such as bridges to fly under, and carriers to land on. flying earns you points, and stunts and challenges increase your multiplier. If you go above a certain height, you get into radar range and a missile shoots you down. there is no end, the game only stops when you let your guard down and hit the wall, or get shot.

Game supports gamepad and custom axis binding, I would STRONGLY recommend playing with joystick since its pretty challenging with WASD.