r/threejs 27d ago

Three.js r185 released ๐Ÿงก

Enable HLS to view with audio, or disable this notification

570 Upvotes

r/threejs Apr 16 '26

Three.js r184 released โ›…๏ธ

Enable HLS to view with audio, or disable this notification

632 Upvotes

r/threejs 2h ago

I added Team Generals to my multiplayer Napoleonic tactical action browser game, allowing players to control their team's bots using a Total War style RTS camera

Enable HLS to view with audio, or disable this notification

18 Upvotes

This is a multiplayer/singleplayer tactical action game where players are company commanders on-foot controlling a single unit of infantry, cavalry, or artillery (similar to Mount and Blade), with full-scale division v division battles. Shown in this clip is 40 units per team, 3x unit scale, 10,000 bots per team.

At the start of the round, there's a minute long "General Election" phase where players can apply to be the team's general. Whoever is voted in gets to control the team's bots using a Total War style RTS camera! They cannot control player-owned bots, however, only vacant bots. Players can mutiny the general (functions sort of like a votekick, which returns the general back to the battlefield), which triggers a new election. If no players volunteer, the rudimentary bot army controller resumes army control.

It's multiplayer and runs in the browser, and is free. Play it at www.1815online.com, join the discord to follow development at https://discord.gg/Rb9GNp8WB .


r/threejs 6h ago

AI Frontier benchmark but visualized as towers in threejs

Enable HLS to view with audio, or disable this notification

9 Upvotes

Just posting some updates from my previous post:

https://www.reddit.com/r/threejs/comments/1uuaxi3/comment/ox6plas/?screen_view_count=1

I hope you enjoy it.

What datasets would like to see next?


r/threejs 7h ago

Help How do I make the fire burn effect looks more realistic?

Enable HLS to view with audio, or disable this notification

12 Upvotes

today I set a challenge to learn shaders and I came across this old tweet by xavier showing a box with a fire burn effect.

so I decided to reverse engineer it from scratch based on that video.

the result looks nice, but does anyone have suggestions for improving it?

  • how can I make the simplex noise look more like a burnt paper?
  • how do I color that โ€œlava-likeโ€ glow around the hole?
  • or any good article/resources related to this I should be looking into?

p.s. feel free to say hi on my X at https://x.com/chunrapeepat . I will share more results and learning there.


r/threejs 15m ago

I kept rebuilding the cinematic mode for my Three.js star map. Now stellar events illuminate the surrounding interstellar medium

Thumbnail
youtube.com
โ€ข Upvotes

I posted an earlier version of this here about two weeks ago, when I had just rebuilt the star rendering and selective bloom for my Three.js map of the EVE Frontier universe.

I apparently wasnโ€™t finished.

Since then I have added a procedural universe-effects layer built around the actual distribution of the 24,000+ star systems rather than using a static background.

The denser stellar regions now drive an unresolved stellar-density glow, with volumetric interstellar dust and gas layered through the galaxy and separate dark extinction structures cutting through the brighter regions.

The part I have probably spent the most time on is getting all of that to behave coherently while the camera moves. The volumetric effects are sampled in world space and the extinction layer needed additional sub-stepping and filtering to stop fine structure visibly changing or fading as the camera moved through different viewing angles.

I also reworked the stellar events. Supernovae, novae and pulsars are anchored to stars in the actual map, and their emitted light now feeds into the interstellar-medium rendering so nearby gas and dust visibly illuminate when an event occurs rather than the event just being an isolated sprite/effect on top of the scene.

The original spectral bloom system is still there as well. Individual stars have emissive intensity derived from their spectral properties, so hotter/brighter stars seed more bloom, but I ended up rebuilding that path too so distant stars retained the same relative hierarchy without all of them turning into equally sized glowing blobs.

This video is a continuous slow orbit captured from the live site rather than a scripted camera sequence. The first minute or so has a little narration, then I just let the ambient track and the simulation run.

My graphics card continues to hate me.


r/threejs 3h ago

Demo I made shadertoy 2.0

2 Upvotes

Hey everyone, about 2 years ago I was interested in making a new kind of shadertoy, and was given a lot of great ideas. After I finally had a bit of free time, I can now share what I made.

Fibertoy is essentially shadertoy but you can write react-three-fiber as well as glsl code. It essentially gives a Threejs environment which means you can also just create basic 3D scenes as well as shader scenes.

Here are some examples of some scenes I made with it:

- Basic Voronoi sceneย https://www.fibertoy.dev/view/j978r67mc84yg2d36g3z5n2nqd8as16q
- Cone marching exampleย https://www.fibertoy.dev/view/j97c1kqg8n6w0st2hk3dcq7ynx87rngm
- Standford bunny sceneย https://www.fibertoy.dev/view/j971mkwktr7bsen3ybyxks08vh87pd1a

As you can see from the last one, you can use your own 3D models as well. I haven't made an asset manager yet, but if you have a 3D model online, you can technically import it. I'll make an asset manager if people start using this app.

I would love to get any feedback. I also have the whole code online and open sourceย https://github.com/NabilNYMansour/fibertoy


r/threejs 1h ago

Demo Moped Mayhem is released in early access

Enable HLS to view with audio, or disable this notification

โ€ข Upvotes

Been working on this for quite a while, and it's finally ready to play! Feel free to try it out https://mopedmayhem.io/play


r/threejs 6h ago

Built a low-poly 3D map explorer of my hometown valley โ€” looking for a Three.js dev to help take it to the next level

2 Upvotes

Hey everyone, I've been tinkering with a personal project: a stylized, low-poly 3D map of a small mountain valley I'm from, using exaggerated terrain (boxed-up heightmap style) with hand-placed low-poly trees and landmark objects scattered across a handful of points of interest. Right now, when you "reach" a point of interest, it triggers a simple reveal/wave animation, kind of a cute, minimal MVP.

I want to push this further for v1: more polish on 5-6 destination markers, better terrain detail, smoother camera/exploration feel, and a more satisfying "discovery" interaction when you land on a spot (think that little dopamine hit you get uncovering something in Pokรฉmon Go, but chill and exploratory rather than gamified).

This is a scrappy indie/passion project, not a funded startup gig, so budget is modest, but the scope for v1 is deliberately small and well-defined, and there's a clear path to more interesting work (think richer exploration mechanics, more destinations, more interactivity) if v1 goes well and we vibe on the collaboration.

If you're into low-poly aesthetics, terrain generation, or just want a fun weekend-scale Three.js project to sink your teeth into, drop a comment or DM with examples of similar work you've done, happy to share more details on scope and budget directly.

Note: Im not sure if this is the write thread to post a gig, kindly guide me to the relevant subreddit in that case.


r/threejs 19h ago

Demo of Terrain Improvement on Mercator Map

Enable HLS to view with audio, or disable this notification

17 Upvotes

Some things I need to improve!


r/threejs 1d ago

Demo My first Three.js experiment with HTML-in-Canvasโ€”every texture in this 3D scene is HTML/CSS

Enable HLS to view with audio, or disable this notification

27 Upvotes

Even the bouncing sphere is rendered from HTML/CSS. I used the classic DVD screensaver concept as a simple test inside my 3D video-editing platform.


r/threejs 1d ago

Demo Visualizing building anatomy and structural systems in Three.js. Built a custom inspector to isolate load-bearing components

Enable HLS to view with audio, or disable this notification

15 Upvotes

Hi everyone! ๐Ÿ‘‹

I've been working on an interactive web viewer for our project (Hexovian Atlas) to showcase building assets. Instead of just displaying the final textured exterior, I wanted to build an inspector that visualizes the underlying structural anatomy directly in the browser.

Focusing on the Structural Layer:

  • Building Anatomy: The tool allows you to dissect the structure and isolate specific core components (Load Bearing Walls, Floor Systems, Roof, Vertical Core).
  • Dynamic Inspection: Toggling these structural groups dynamically updates the custom inspector panel on the right (tracking active triangles, memory, and engine export readiness).
  • Hierarchy & Rendering: The transitions highlight how the internal mesh hierarchy is organized, using visibility toggles and material swaps to expose the inner framework.

You can try the live interactive demo here (we are actively optimizing the web performance): ๐Ÿ”—https://hexovian.com/pages/atlas/asset.html#building

Would love to hear your thoughts on rendering structural hierarchies and integrating UI with the WebGL canvas!


r/threejs 14h ago

Demo Project Showcase: DICOM viewer

2 Upvotes

A while ago, I got a CD of hospital scans from a family member. The software to view them was on the disk as well but it was ancient and did not work on any of our machines, so it was useless.

So I built a viewer that simply visualizes them on the web. You drop a folder of dcm files into the page and watch it build a 3D volume you can slice or rotate. The 3D graphics are built via ray marching on your GPU. I put all the parsing in Web Workers to keep things smooth even with large scans.

Nothing leaves your computer since the whole thing runs locally. This is not meant as a "polished" product but it was built out of curiosity to learn how medical viewers work under the hood. The math turned out to be simpler than expected, honestly. Feedback is always appreciated

https://reddit.com/link/1v388zo/video/9zld5uyu9qeh1/player

demo: https://rage997.github.io/DICOM-Viewer/

code: https://github.com/Rage997/DICOM-Viewer


r/threejs 1d ago

(WIP) Two-thirds complete. I learned to 3D model this year and used three.js to animate it.

Enable HLS to view with audio, or disable this notification

8 Upvotes

Earlier this year, I learned to 3D model because I wanted to build hardware. All I needed was a sphere and a box for the tech, but I guess I got carried away... ended up building this entire scene in four months (the models themselves would take me days at a time, with plants being the most time consuming... I made the kombe plant, the vine on the dock-side wall, while watching the entire Season 2 of Netflix's One Piece to give you an idea).

If it wasn't for the three.js and WebGL communities sharing so much code, this never would have never seen this model have life. And I'm still working on it, too! I just need a break, you know?

Credits:

Volumetric clouds: Shadertoy member: tmts

Volumetric flames: Alfred Fuller (UC Davis)

Water: Evan Wallace (of course!) and Anderson Mancini


r/threejs 1d ago

Free Three.js Desert Kingdom Assets: sand, dunes, and pharaoh's await!

Enable HLS to view with audio, or disable this notification

44 Upvotes

Super exited to announce the release of Desert Kingdom's free Three.js assets, including models for dunes, a full oasis, souk, tomb and obelisk, and more!

Download them at https://threejsassets.com/assets?tier=free&pack=desert-kingdom


r/threejs 1d ago

CodeCity: git repos as drivable 3D cities โ€” InstancedMesh, baked shadows, synthesized engine

6 Upvotes

A weekend-ish project rendering GitHub repos as cities you drive through. A few

three.js bits I'm happy with:

- Buildings + district plates are always InstancedMesh (a few thousand files at

60fps). Selective window-glow uses two instanced meshes (hot/cold materials)

instead of per-instance emissive.

- The city never moves, so the shadow map is baked once instead of re-rendered

every frame; the car uses a blob shadow.

- Layout (squarified treemap, โˆšlines heights) is precomputed by a Node analyzer,

so the renderer never touches git โ€” it just reads a baked JSON.

- The engine sound is a synthesized Web Audio graph (osc pair โ†’ waveshaper โ†’

lowpass, pitched by a virtual gearbox), not audio files.

Live: https://codecity-3d.vercel.app

Source: https://github.com/FirasLatrech/codecity

Inspired by Bruno Simon's portfolio. Feedback welcome.


r/threejs 1d ago

Demo Raytracing experiment with ThreeJS. built with Pixelfork (No Engine)

Enable HLS to view with audio, or disable this notification

2 Upvotes

Hey everyone,

Just wanted to try if I can achieve raytracing with AI and ThreeJS. tried it on Pixelfork. added some PBR textures there. and bullet hole decal effects, AI generated pistol model, and bullet fume effect.

and just wow. I was not expecting that it would generate this reflection. Result is very impressive for me.

NOTE: This is not a game. Just an experiment because i was curious about AI capability.

to play this experiment:ย https://www.pixelfork.ai/publish/db77b355-12db-4f38-934b-9ff01e0b70e1


r/threejs 2d ago

Bruno Simon threejs portfolio Thought???

Enable HLS to view with audio, or disable this notification

143 Upvotes

r/threejs 22h ago

Threejs game - DailySpeedway

Thumbnail
youtu.be
1 Upvotes

You can play it here: r/DailySpeedway


r/threejs 1d ago

ERAVEX v2.0: Breaking the "zero-asset" rule for high-fidelity WebGPU/TSL pipelines

Enable HLS to view with audio, or disable this notification

1 Upvotes

The "zero-asset" restriction is officially dead for ERAVEX.

To push browser fidelity past the ceiling for the next phase of the project, Iโ€™m moving away from 100% pure math/procedural generation and injecting custom 3D geometry directly into the matrix.

Currently detailing the new main logo block in Blender (screenshot attached).

The Pipeline & Optimization Plan:

  • Edge Detailing: Adding tight chamfers and marking sharp edges for clean specular highlights under WebGPU lighting.
  • TSL Data Paths: Routing the asset's vertex streams straight through the WebGPU/WebGL hybrid pipeline.
  • Performance: Keeping the pipeline highly optimized to ensure absolute zero vertex lag at runtime.

The world is getting heavier. ๐ŸŒ

Would love to hear your thoughts on handling complex custom geometries inside TSL shading loops if you've messed with the hybrid pipeline!


r/threejs 1d ago

๐๐ฅ๐ž๐ง๐๐ž๐ซ ๐Œ๐จ๐›๐ข๐ฅ๐ž ๐Ÿ‘๐ƒ ๐๐ฅ๐ฎ๐ ๐ข๐ง ๐Ÿ.๐ŸŽ.๐ŸŽ ๐ข๐ฌ ๐ง๐จ๐ฐ ๐š๐ฏ๐š๐ข๐ฅ๐š๐›๐ฅ๐ž

0 Upvotes

Dziล› wydalem pierwszฤ… stabilnฤ… wersjฤ™ mojego dodatku do Blendera.

Blender Mobile 3D pozwala na pracฤ™ nad scenami 3D i animacjami z pomocฤ… agentรณw AI, takich jak Claude, Hermes, Codex i Kimi K2/K3. Moลผesz opisaฤ‡, co chcesz stworzyฤ‡ w czacie, a agent pomoลผe ci wykonaฤ‡ nastฤ™pne kroki w Blenderze.

Dodatek moลผe teลผ walidowaฤ‡ modele 3D, generowaฤ‡ poziomy LOD, monitorowaฤ‡ liczbฤ™ trรณjkฤ…tรณw oraz eksportowaฤ‡ pliki GLB i FBX. Jest zaprojektowany gล‚รณwnie do przygotowywania zoptymalizowanych modeli i scen do gier mobilnych.

๐ง๐ฉ๐ฆ:

https://www.npmjs.com/package/@glaeron/blender-mobile-3d

๐ˆ๐ง๐ฌ๐ญ๐š๐ฅ๐ฅ ๐ฐ๐ข๐ญ๐ก ๐ง๐ฉ๐ฆ:

npx --yes @glaeron/[email protected] install

๐๐ฒ๐๐ˆ:

https://pypi.org/project/blender-mobile-3d/

๐ˆ๐ง๐ฌ๐ญ๐š๐ฅ๐ฅ ๐Ÿ๐ซ๐จ๐ฆ ๐๐ฒ๐๐ˆ:

pip install blender-mobile-3d==1.0.0

blender-mobile-3d install

๐’๐จ๐ฎ๐ซ๐œ๐ž ๐œ๐จ๐๐ž, ๐๐จ๐œ๐ฎ๐ฆ๐ž๐ง๐ญ๐š๐ญ๐ข๐จ๐ง, ๐š๐ง๐ ๐ซ๐ž๐š๐๐ฒ-๐ญ๐จ-๐ข๐ง๐ฌ๐ญ๐š๐ฅ๐ฅ ๐™๐ˆ๐ ๐Ÿ๐ข๐ฅ๐ž:

https://github.com/SSobol77/blender-3d-plugin

๐‘๐ž๐ฅ๐ž๐š๐ฌ๐ž ๐Ÿ.๐ŸŽ.๐ŸŽ:

https://github.com/SSobol77/blender-3d-plugin/releases/tag/v1.0.0

Projekt jest open source i dostฤ™pny na licencji GPL-2.0-only.


r/threejs 1d ago

Palme, Insel

0 Upvotes

Daumenkino, Zeichnen, codepen

toon, #threeJs, 3d, #Animation, programmiert, #JavaScript

Youtube:

https://youtube.com/shorts/bCGlbZofyrQ?feature=share

threeJs:

https://codepen.io/esdot01/pen/QWYbvoX

Daumenkino:

https://codepen.io/esdot01/pen/RNKJMJE


r/threejs 1d ago

๐๐ฅ๐ž๐ง๐๐ž๐ซ ๐Œ๐จ๐›๐ข๐ฅ๐ž ๐Ÿ‘๐ƒ ๐๐ฅ๐ฎ๐ ๐ข๐ง ๐Ÿ.๐ŸŽ.๐ŸŽ ๐ข๐ฌ ๐ง๐จ๐ฐ ๐š๐ฏ๐š๐ข๐ฅ๐š๐›๐ฅ๐ž

0 Upvotes

Dziล› wydalem pierwszฤ… stabilnฤ… wersjฤ™ mojego dodatku do Blendera.

Blender Mobile 3D pozwala na pracฤ™ nad scenami 3D i animacjami z pomocฤ… agentรณw AI, takich jak Claude, Hermes, Codex i Kimi K2/K3. Moลผesz opisaฤ‡, co chcesz stworzyฤ‡ w czacie, a agent pomoลผe ci wykonaฤ‡ nastฤ™pne kroki w Blenderze.

Dodatek moลผe teลผ walidowaฤ‡ modele 3D, generowaฤ‡ poziomy LOD, monitorowaฤ‡ liczbฤ™ trรณjkฤ…tรณw oraz eksportowaฤ‡ pliki GLB i FBX. Jest zaprojektowany gล‚รณwnie do przygotowywania zoptymalizowanych modeli i scen do gier mobilnych.

๐ง๐ฉ๐ฆ:

https://www.npmjs.com/package/@glaeron/blender-mobile-3d

๐ˆ๐ง๐ฌ๐ญ๐š๐ฅ๐ฅ ๐ฐ๐ข๐ญ๐ก ๐ง๐ฉ๐ฆ:

npx --yes @glaeron/[email protected] install

๐๐ฒ๐๐ˆ:

https://pypi.org/project/blender-mobile-3d/

๐ˆ๐ง๐ฌ๐ญ๐š๐ฅ๐ฅ ๐Ÿ๐ซ๐จ๐ฆ ๐๐ฒ๐๐ˆ:

pip install blender-mobile-3d==1.0.0

blender-mobile-3d install

๐’๐จ๐ฎ๐ซ๐œ๐ž ๐œ๐จ๐๐ž, ๐๐จ๐œ๐ฎ๐ฆ๐ž๐ง๐ญ๐š๐ญ๐ข๐จ๐ง, ๐š๐ง๐ ๐ซ๐ž๐š๐๐ฒ-๐ญ๐จ-๐ข๐ง๐ฌ๐ญ๐š๐ฅ๐ฅ ๐™๐ˆ๐ ๐Ÿ๐ข๐ฅ๐ž:

https://github.com/SSobol77/blender-3d-plugin

๐‘๐ž๐ฅ๐ž๐š๐ฌ๐ž ๐Ÿ.๐ŸŽ.๐ŸŽ:

https://github.com/SSobol77/blender-3d-plugin/releases/tag/v1.0.0

Projekt jest open source i dostฤ™pny na licencji GPL-2.0-only.


r/threejs 1d ago

Demo Building a VS Code-like debugger in React Three Fiber for transformer models

Enable HLS to view with audio, or disable this notification

7 Upvotes

Iโ€™ve been building TokenPrint, an open-source project that uses React Three Fiber + Three.js to visualize transformer models as interactive 3D scenes.
This update adds live inference visualization, dynamic node highlighting, tensor inspection, and camera tracking during execution.
Iโ€™d love feedback on the scene design, graph visualization, and performance optimization from the Three.js community.
GitHub: https://github.com/Sudharsanselvaraj/Token-Print


r/threejs 1d ago

I built a 3D tower defense game inspired by Fieldrunners using Three.js and some GLB models. Playable right in your browser!

0 Upvotes

Hey everyone! ๐Ÿ‘‹

I wanted to share a little passion project Iโ€™ve been working on: a 3D tower defense game heavily inspired byย Fieldrunners, built entirely usingย Three.jsย and some custom GLB models.

https://reddit.com/link/1v2fy2w/video/ghjpp33fmkeh1/player

๐Ÿ› ๏ธ Key Features:

  • Fully 3D:ย Brought the classic 2D/2.5D top-down defense style into a fully rendered 3D space.
  • Cross-Platform:ย Optimized to run right inside your browser on bothย PC and mobileย devicesโ€”no downloads or installations required.
  • Local Saves:ย Your progress and data are automatically saved locally, so you don't have to worry about losing your high scores or unlocks if you refresh.

๐Ÿ’ก Tech Stack:

  • Three.jsย for rendering and scene management.
  • GLB assetsย for the 3D models.
  • Hosted onย Vercel.

https://fieldr3d.vercel.app/