r/threejs • • 2h ago

Got carried away with my flight simulator side project

4 Upvotes

I grew up playing games like "A-10 Cuba!" in the late '90s and have been making games ever since. About six months ago, I started this passion project to see what I could build with Claude Code in my spare time, and ended up with a full-blown A-10A combat flight simulator.

After countless hours of research, 3D modeling, texturing, sound editing, and polishing, it's finally ready to share!

It features custom flight physics, weapons, enemy AI, terrain, missions, and a 1:1 scale recreation of part of the Barry M. Goldwater Range in Arizona (my home state).

You can play it for free here (desktop + mouse/keyboard): https://a10simulator.com

Excited to get some feedback, and happy to answer any questions about how I built it. Enjoy!


r/threejs • • 5h ago

Demo Built a Three.js embryo explorer with continuous transitions from whole-body view to individual structures

2 Upvotes

built a free, open-source human embryo explorer using Three.js, with help from GPT-6 Astra.

It shows 16 developmental stages. One slider coordinates structure separation, layout, and camera movement from the assembled model to an overview of its parts, then close inspection.

One interaction bug: moving from an organ to the slider cleared its hover state, leaving inspection without a target. Retaining the target and adding a part selector fixed that transition.

On mobile, the overview becomes a scrollable two-column layout with larger controls. Touch handling separates page scrolling from model rotation, though physical-device testing is still limited.

Ash’s Human Atlas inspired the navigation; this explorer focuses on developmental stages. The geometry is illustrative and hasn’t been clinically validated.

20-second demo: https://x.com/pratikg/status/2114060245618307356

MIT-licensed code: https://github.com/pratikgx/embryo-explorer

Inspiration: https://github.com/ashemag/human-atlas

I’m the creator; the explorer is free and requires no account. Would appreciate feedback on the camera transitions and how you’d handle selecting small structures on touchscreens.


r/threejs • • 6h ago

Demo Swamp experience in threejs made with AI (gpt 6 Astra and blender) - sharing so others can know they can also build this easily ! yes I value the output not the process - here’s why

0 Upvotes

The "I used to love the process, now I just prompt" complaint is about personal fulfillment, not art.
It's the same as saying, "I love counting on my fingers, and I resent that someone with a calculator does the same job ten times faster and gets paid for it."
If you're truly an artist, it doesn't matter whether AI exists. You can keep making things by hand, because you care about the craft, not the world. A true artist doesn't care what consumers think.
But the moment you put your work out there, see that it's weaker than what others are making, and feel bad about it, you've revealed something: you're commercial. You care what the audience thinks of you.
So the process argument only holds if you never intend to sell anything. If you do care about money, then you have to accept the rule of the market: the world doesn't care about your process. It wants to experience your output.
If the process is what fulfills you, keep it. Just find your fulfillment there, and stop expecting the world to pay for it.


r/threejs • • 7h ago

Link Sisyphus on the Moon

34 Upvotes

He walks around the moon every 60 seconds. He has been doing it since July 1969.
Kick the rock. Turn on his radio. Let him rest.
sisyphus-on-the-moon.pages.dev


r/threejs • • 8h ago

Scattering pickups across a big Three.js map without them floating, sinking, or landing on cliffs: my placement pass

0 Upvotes

I just spread health, ammo and shield pickups across the whole island in my Three.js shooter. The easy first version places them at fixed heights, and on hilly terrain that means some float in the air, some get buried in hills, and some end up on cliff faces.

What fixed it was a small placement pass:

  1. Pick a random X/Z, then cast a ray straight down from above the highest point: new Raycaster(origin, new Vector3(0, -1, 0)). Test only the terrain mesh, not the whole scene, or the ray hits trees and rooftops first.
  2. Check the slope. Turn hit.face.normal into world space (transformDirection with the mesh's matrixWorld) and reject the spot if normal.y is under about 0.85. That keeps items off cliffs.
  3. Reject anything at or below the water level, and anything inside a building's bounding box.
  4. Keep a minimum distance between items (simple rejection: try again if one is already too close), so they don't clump.
  5. Set the item at hit.point.y plus half its height, then add a small bob animation so players spot it.
  6. Run the pass once and save the positions to JSON, instead of raycasting on every load. On a big terrain, three-mesh-bvh makes the raycasts much faster if you do need them at runtime.

The same pass works for spawn points, and it's an easy rule set to hand an agent.

How do you place things on large terrain? Raycast like this, sample a heightmap directly, or place everything by hand?

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


r/threejs • • 10h ago

I built a 3D atlas of real machines with three.js. You can explode a turbocharger into 64 parts and cut it open

3 Upvotes

Mechanical engineer here, not a full-time dev. Engine-X (engx3d.com) is a free browser atlas of real machines: a turbocharger, a centrifugal pump and a V-belt pulley drive, all built with three.js.

What you can do:

- Explode the model with a slider and watch the parts separate

- Run it from slow motion up to full speed

- Use a cut plane on X, Y or Z to see inside

- Tap any part to see what it does, its material and key dimensions

It's mobile first, since most students open it on their phone. Keeping it smooth on mid-range phones while everything spins and explodes was the trickiest part.

Would love feedback from people who know three.js better than me, especially on performance and anything that looks off with the materials or lighting.


r/threejs • • 12h ago

Demo 3D walkthrough of my upstairs renovation options, with daylight simulation and 29 layouts to flick between

Thumbnail
gallery
2 Upvotes

Built this to plan our upstairs renovation: it generates layout options from the room measurements and requirements, and you can walk round each one in 3D.

https://fitandflow.pages.dev

Bits I'm pleased with:

- Daylight simulation for any time of day and season, plus plaster-in LED lighting

- 29 layouts you can switch between while walking round

- Runs on phones, with a Low quality mode for weaker devices

- Loading: shaders compile in the background using KHR_parallel_shader_compile, so the page doesn't freeze, and you get an instant still of the starting view while it loads

It's on r128, so an upgrade is on the list (compileAsync would replace a fair bit of my workaround). Happy to answer questions, and keen to hear how it runs on your device.


r/threejs • • 12h ago

Demo A night-map globe for a live war game: 15,800 land dots, border lines and battle arcs, no post-processing

2 Upvotes

How it's built:

- **Land:** a Fibonacci lattice of 60,000 points over the sphere, kept only where there's land: about 15,800 dots. Each dot is tagged with its country at build time, so the live war can recolour it: dim brass for unclaimed land, warm gold for land a nation holds.

- **Borders:** 520 lon/lat polylines merged into one `LineSegments` at low opacity.

- **Battles:** each attack is a `QuadraticBezierCurve3` lifted off the surface, drawn as a 48-point `Line`, with a small additive `Points` head that travels along it.

- **Capitals:** additive `Points` that pulse.

- **No bloom.** The glow is a radial-gradient canvas texture on the point sprites, which keeps it cheap on phones.

The page polls the game's live endpoints every 12 seconds, so the arcs are real attacks from the current game day.

What I'd like to hear: the best way you've found to keep `Points` crisp at very different zoom levels on mobile, and whether instancing would beat one big `Points` geometry here.

The site is proxyrepublic.com; it's a free browser game where AI generals fight for real countries. I'm the developer.


r/threejs • • 12h ago

A guided tour of an organic space ship (Sound on)

1 Upvotes

This is a guided tour of an Ark, the organic vessel central to my humanist sci fi setting Infinite Ashes. You can examine it in detail here: https://loquaciouslou.itch.io/infinite-ashes-ark

Please let me know your thoughts!

Wider bundle, including a full lore integrated planet globe: https://loquaciouslou.itch.io/infinite-ashes


r/threejs • • 13h ago

I added schools, golf courses, hospitals, parks...

31 Upvotes

Check out my walkable islandthree.world space colony. Feedback welcome.


r/threejs • • 13h ago

Demo From the Big Bang to Apollo 11: an educational solar system in React Three Fiber where every number has a source

1 Upvotes

Hi, I worked on an educational hobby project.

It opens with a 35-second intro (13.8 billion years to today), then drops you into a solar system where positions are computed from real ephemeris data for any date. You can replay the Apollo 11 launch on its real date, watch the Moon's shadow cross Earth in the 2 Aug 2027 eclipse, ride along with Juno's first close pass of Jupiter through JunoCam's field of view, and zoom out in one scene from the planets to the Milky Way. Every fact in the panels is labelled Measured or Computed, with its source.

Live: https://space2play.pages.dev (no account, works on phones)

A few engine problems that might interest this sub:

- Zooming from a planet to the Milky Way means float64 world positions in AU with a floating origin; the GPU only sees float32 offsets.

- A logarithmic depth buffer, so every custom ShaderMaterial needs the log-depth code or it renders invisible.

- A moon's drawn size and distance derive from its parent's drawn radius, after two independent formulas once put the Moon inside Earth.

- No React state in per-frame code; everything per-frame mutates refs.

I built it with a lot of help from AI (Claude Code). To keep it honest, a test fails the build if a science number has no source, and I review every change.

Data: NASA, JPL Horizons, CelesTrak, NASA Exoplanet Archive. Planet textures: Solar System Scope (CC BY 4.0). Full credits are in the app's About.

Feedback I'd love: how it runs on your device (first load is about 5 MB), and anything that looks wrong or confusing.

Where I want this to go:

free and ad-free forever, and open source (AGPL) once I've folded in your feedback. The plan is a project where school students, hobbyists and people working in space science learn from each other. Anyone can suggest or build a change, including with AI tools, but every change is read by a human reviewer and every number needs a source. If you'd like to help review (science or code) when it opens, leave a comment.


r/threejs • • 14h ago

Kaamos: a browser product-rendering studio built on R3F + three-gpu-pathtracer

Post image
35 Upvotes

I’m an industrial designer who has used Showcase, KeyShot and V-Ray for years. I wanted the workflow I know from those tools in the browser, so I built Kaamos together with Claude: https://atomilab.fi/kaamos/

To be upfront: the product and interaction design are mine, and the code was written with the AI. I tested every round in the browser and fixed what came out wrong.

Stack: React 19, R3F, drei, Zustand, and gkjohnson’s three-gpu-pathtracer for final renders and a live path traced preview. STEP/IGES go through occt-import-js. Everything is client-side.

Some problems that took real work and SHOULD be working now:

  • Subsurface scattering added to the path tracer by patching its fragment shader with a random walk inside closed meshes
  • A NaN guard, because Safari’s shader compiler drops isnan/isinf, which made glass render black
  • A hand-written ground shadow, because drei’s ContactShadows rendered nothing on r186
  • Fixes for grey final renders, which turned out to have two causes: a lost GPU context on 2M+ triangle scenes and NaN from PhysicalCamera.copy() leaving aperture fields undefined

It’s early. I’d especially like to hear how the path tracer behaves on different GPUs, and if anyone has thoughts on the WebGPU route. Feedback welcome (click the logo in the app). Tested mainly in desktop Chrome and Safari (macos).

Cheers!


r/threejs • • 17h ago

Demo Grease pencil and P5 brush painting on basic shapes

Thumbnail
youtube.com
2 Upvotes

r/threejs • • 18h ago

Demo An interactive four-season garden in Three.js, with wind and day/night transitions

4 Upvotes

Hi r/threejs! I'm Alicia, the creator of Digital Garden, a small real-time garden that runs in the browser.

This is its four-season night view. You can orbit the camera, zoom into individual plants, and brush through the flowers. Each season has its own plants and layout, with day/night transitions and layered garden audio.

A few implementation details:

- Houdini-authored plants exported as GLB, then grouped into instanced batches by species, parts, and LOD.

- TSL vertex deformation for root-anchored wind and local pointer interaction.

- Screen-space LOD selection with complementary dither transitions on desktop.

- A shared night factor for the sky, lighting, emissive flowers, particles, and ambience. The glowing flowers use emission plus bloom.

The attached video is a real-time WebGPU capture. The app also has a WebGL2 fallback through WebGPURenderer. Browser audio starts after a user interaction.

Try it: https://digitalgarden.si/play/

No sign-up required.


r/threejs • • 20h ago

Cool Car Transformation Animation

3 Upvotes

Hello everyone! This is going to be my first post on this community as well a project showcase that I've been working on. (Please Note : This is entirely a promotional content, NOT any client project but I'm still looking forward to work with people / potential clients who are looking for works like this)

Project details :

• A 2016 Honda NSX Model floating elegantly in the air.

• Three principle transformations take place every few seconds (on the left) while stay consistent (on the right)

• Fully interactable


r/threejs • • 1d ago

This is so true 😂...at the same time does non ai projects getting paid in this ai era?

Post image
65 Upvotes

r/threejs • • 1d ago

I made a browser tool that renders a 3D terrain flyover of a GPX route in Three.js and exports MP4

1 Upvotes

This is my own open-source project. Ridgereel turns a GPX, TCX or FIT file into a 3D terrain flyover video, entirely in the browser. Nothing is uploaded.

How the rendering works: elevation tiles in Terrarium encoding are decoded into one height field. A Three.js scene drapes satellite or generated relief imagery over it, with a camera relative sun, contour lines computed from fwidth in the shader, and the route drawn as opaque line layers. The camera follows an eased path: an intro, a main orbit, then an outro that fits the whole route for the chosen aspect ratio.

Tiles are prefetched, so every frame depends only on the time value. That is what lets WebCodecs encode an exact H.264 MP4 in 9:16, 1:1 or 16:9.

The demo uses a sample hike with synthetic timing. The source is on GitHub.

Feedback I would like: how the camera moves feel (pacing, easing, the outro framing), and whether the terrain shading and contour lines look right to you.

Live demo: https://arthur031221.github.io/Ridgereel/ Source: https://github.com/Arthur031221/Ridgereel


r/threejs • • 1d ago

Demo An Avatar dragon flight in one Three.js file by Kimi K3.1 and GPT-6 Astra

0 Upvotes

I gave Kimi K3.1 and GPT-6 Astra the same brief and let each one work alone in an agent loop: a 28 s cinematic of Toruk with a Na'vi rider over floating mountains, six camera shots, waterfall spray, a bioluminescent night jungle and a sunrise roar. Hard rules: one index.html, three.js 0.160 from a CDN via importmap, no image or model files, every mesh and texture generated in code, and a setTime(seconds) hook so any frame can be rendered on demand (that's how the video was recorded, 840 frames at 30 fps).

How they approached it

  • Kimi K3.1: 746 lines, 50 KB, readable. More scene per shot, its own CDP script to render seven test frames. It couldn't look at them (a bug in our vision path), and the 22 to 24 s sunrise burst came out as a flat teal frame.
  • GPT-6 Astra: 217 lines, 36 KB, very dense. After a critical vision pass on its own screenshots it merged each island's static detail with mergeGeometries so whole forests became a handful of draw calls, then rechecked the night and sunrise frames.

Making it recordable was the part that took the most care in the prompt. Everything has to be a pure function of the timeline time (no Math.random() per frame, no accumulated state). Then you can seek with setTime() from outside, screenshot each frame headless and stitch the video with ffmpeg. Both files seek cleanly, so the two scenes play frame-synced side by side.

Happy to share either file if you want to dig into the geometry or the camera rigs. Ran in Atomic Agent (I work on it so AMA).


r/threejs • • 1d ago

How do you place pickups on uneven terrain without them clumping or floating?

1 Upvotes

I've been adding health, ammo and shield pickups to my Three.js battle royale, Super Soldier Battle, and placing them was trickier than I expected.

My first pass used random positions, and it was a mess. Pickups floated above hills, sank into slopes, and bunched up so some areas had five and others had none. I ended up raycasting down onto the terrain to find the ground height, enforcing a minimum spacing between pickups, and tucking some into the forest so players have a reason to explore instead of camping open ground.

It feels much better now, but I'm still tuning the balance between "easy to find" and "worth searching for."

How do you all handle item placement on procedural or hilly terrain? Hand-placed spawn points, Poisson disk sampling, something else? Happy to share more details if anyone's interested.


r/threejs • • 1d ago

I’m making a game about my cat, who isn’t doing well, and it got completely out of hand

0 Upvotes

He loved going far from home, so I wanted to rebuild the streets he walked and make a game where he roams them, telling our relationship through his point of view and mine. Then it went off the rails, and I ended up rebuilding almost my entire town. I now have plenty of ideas for where to take our story.

It runs in a plain browser tab with three.js, and almost nothing in the map is a downloaded model. Each house builds its own shutters, chimneys, dormers and walls from its footprint, the roads get cracks, patches and worn paint in a shader, and around 130k plants and grass tufts are instanced in chunks around you with a dithered fade, so nothing pops in in no flying mode. Cars, boats, beach cabins and street clutter are tiny procedural kits reused thousands of times, which keeps the place feeling lived in without me placing anything by hand. (some of buildings are hand made, the historic ones like the church)

The video is a fly-over, so if it stutters, that’s because the game isn’t designed for flying: it’s built for walking at ground level, and from up there it has to draw an enormous number of items at once.

Props to whoever guesses the town.

The cool thing is, I can reuse my assets and add more assets to the procedural generation for basically any place OSM covers.


r/threejs • • 1d ago

Solar Explorers, a space sim in Three.js: every model is built from code, every sound is synthesised

12 Upvotes

In the last months I worked on a Three.js-based space sim game. I didn't use modelling tools and it has no sound files either. Ships and stations are lists of primitives with procedural PBR textures, generated in workers. Every sound effect is built in Web Audio as it plays. The only non-code assets are the avatars and the music. I have to say, the experience creating it was really great. It was my first real project with Three.js.

The trailer is of course also created with Three.js, reusing the game code and assets.

https://explorers.orrery.games

What do you think? Any ideas how to improve it?

```

Language files blank comment code

TypeScript 2389 72342 229855 520002 Python 496 25464 36297 104698 JSON 42 14 0 43588 Markdown 293 8063 0 38524 GLSL 34 526 1761 2036 JavaScript 13 85 642 824 CSS 6 97 122 620 YAML 8 99 217 492 Text 13 61 0 380 HTML 9 28 9 350 TOML 1 19 80 193 Bourne Shell 2 33 60 191 Dockerfile 3 36 85 64 INI 1 18 0 56 Mako 1 8 0 19

SVG 1 0 6 16

SUM: 3312 106893 269134 712053

``` 😅


r/threejs • • 1d ago

I tried implementing unity post processing volume in threejs

Post image
3 Upvotes

r/threejs • • 1d ago

I'm building a co-op hero shooter entirely with Three.js r170, no engine and no build step - here's a wave, the armory and the elite

0 Upvotes

I'm the solo developer of SIERRA ARENA, a co-op hero shooter where you and your squad start with pistols and fight your way up, wave by wave.

It's built entirely with Three.js r170 in plain JavaScript
no engine, no bundler, one page.
My main goal was that it runs smoothly on weak laptops too, so I test everything on an Intel Iris Xe.

In the clip a co-op wave with my bot squad, a trip to the armory between waves (a machine gun and an artillery strike), and the next wave with an elite enemy.

I'd love to hear what fellow Three.js devs think. Happy to get into the performance tricks, the networking and the characters in the comments!

You can play it right now in your browser, no download: https://sierra-arena.pages.dev


r/threejs • • 1d ago

I built a cozy 3D Christmas card in Three.js: a cat on top of the tree, a Grinch in the chimney, and 60+ hidden secrets

2 Upvotes

I made a little 3D Christmas card with Three.js. There is a cat at the top of the tree, a fireplace, a train, and a lot of things that react when you tap them.

Everything is generated in code: no glTF, no downloaded textures, no assets for the scene. About 10k lines of plain JS on Three.js r160, procedural geometry, and a small WebAudio synth for most of the sounds.

There are more than 60+ secrets to discover (the notebook tab on the right keeps count). The video shows three of them: the Grinch stealing presents, the cat sweeping the tree, and the cuckoo clock.

You can personalize it (name on the card, cat color) with ?pour=YourName, and send the link.

It is my own project, any feedback is welcome, especially on performance on your phone.

Link: https://www.web-developpeur.com/labo/chat-etoile/

Tap "Enter the room" to start the sound. Try tapping the mistletoe, the clock, the fireplace, the phone.


r/threejs • • 1d ago

Parallax hidden object game

136 Upvotes

Hey guys,

I decided to make something that world havent's seen (at least it is my suggestion).

Parallax hidden object game

You can play it for free in browser: