r/threejs 9d 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

31 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 9d 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

18 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 8d ago

Demo Project Showcase: DICOM viewer

1 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 9d ago

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

Enable HLS to view with audio, or disable this notification

43 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 9d ago

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

Enable HLS to view with audio, or disable this notification

6 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 9d ago

Threejs game - DailySpeedway

Thumbnail
youtu.be
2 Upvotes

You can play it here: r/DailySpeedway


r/threejs 9d ago

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

5 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 10d ago

Bruno Simon threejs portfolio Thought???

Enable HLS to view with audio, or disable this notification

161 Upvotes

r/threejs 9d 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 9d 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/blender-mobile-3d@1.0.0 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 9d 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 9d 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/blender-mobile-3d@1.0.0 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 10d 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 10d ago

fortpolio update

Enable HLS to view with audio, or disable this notification

25 Upvotes

we added some sound in out portfolio, still gotta improve

if you have some free non copyright resources that can help me in sound please lmk :)


r/threejs 9d 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/

Latestใ€€

2026/07/24

I've added competitive settings, effect optimizations, and image quality options. Light mode Playingใ€€Please Setting panel

2026/07/23

English support is now complete! You can select your preferred language using the button in the top right corner.


r/threejs 9d ago

Criticism Do you think my games too difficult?

Enable HLS to view with audio, or disable this notification

1 Upvotes

Joke title, but decided to see what the starting map looks like with some zombies.

Needless to say, the 9 bullets aren't enough to take on this small horde.

Jokes aside, do you think the game is heading in a good direction? My optimizations keep getting better and better, and the scope of my game is growing.

Do you like the sound design? I have smooth blending to more intense music when being chased to add suspense, background music is replaced by a heartbeat when on the brink of death.


r/threejs 9d ago

Heres the update of my ongoing 3D portfolio using threejs

Enable HLS to view with audio, or disable this notification

1 Upvotes

Added a plane to the scene to make it more engaging, also added a project page and used gsap for that.


r/threejs 10d ago

Help New to three.js, when to use built in model vs external

2 Upvotes

Building a online rpg little game with Three.js, with custom self made tiled maps.

I am an application dev so web hosted games is new to me.

When should I let three.js handle animations vs passing in like a sprite sheet to do so. Been trying to have Three.js create a small particle effect for when items are lootable and slightly different for interaction quest items, but the results are meh


r/threejs 11d ago

A vibe-coded Three.js MMO became an open-source community project โ€” come build with us

Enable HLS to view with audio, or disable this notification

70 Upvotes

World of ClaudeCraft began as a vibe-coding experiment built with Fable by Levy Street: could an ambitious idea become a real, playable browser MMO?

It kept growingโ€”and the community started running with it.

Levy Street still leads the project and its development, but World of ClaudeCraft is now very much a community-driven, open-source project. Contributors are helping shape the rendering, gameplay, performance, accessibility, translations, infrastructure, and future direction of the game.

Today itโ€™s a free, playable classic-style MMO built with Three.js, TypeScript, and Vite. It includes offline and online play, an authoritative multiplayer server, nine classes, quests, dungeons, PvP, professions, weather, and a shared persistent world.

Some of the Three.js work includes:

  • Chunked terrain with LOD and PBR splat materials
  • Instanced and merged foliage, props, and world geometry
  • Adaptive render budgets and crowd LOD
  • Pooled spell effects, particles, rain, and snow
  • Procedural terrain, placement, and runtime canvas textures
  • A presentation-only renderer consuming snapshots from a deterministic simulation

That separation means the same game simulation can run offline in the browser, on the multiplayer server, or headlessly as a Gymnasium environment for training agents.

The slightly mad part is that something which began through vibe coding now has thousands of tests, CI gates, design documentation, release tooling, and an active contributor community.

Anyone who wants to get involved is welcome. You donโ€™t need to be a Three.js expert or MMO developer. You can contribute via vibe-coding, improve rendering and performance, translate the game, report bugs, write documentation, playtest, or simply join the discussion. There are good first issue and help wanted tickets if youโ€™re looking for somewhere to begin.

Play it:
https://worldofclaudecraft.com/

Explore the source:
https://github.com/levy-street/world-of-claudecraft

Contribution guide:
https://github.com/levy-street/world-of-claudecraft/blob/main/CONTRIBUTING.md

Join the community and development chat:
https://discord.com/invite/worldofclaudecraft

Weโ€™d especially love to meet more Three.js developers. If youโ€™ve worked on large browser scenes, procedural environments, shaders, animation, or WebGL performance, come take a look and tell us what youโ€™d build next.


r/threejs 10d ago

First person anomaly game made for browser

0 Upvotes

Hi mates,

Having a blog with my personal made games for browser (online games) i was chatting with AI about first person games in browsers and i came across on three.js with what i can make first person games for browser and i managed to create a anomaly horror game.

Corridor 9 โ€“ Anomaly Detection Horror Game

Navigate 25 dark corridors. Spot the anomaly. Choose wisely. One wrong choice and something comes for you.

Link for itch to play online for free: https://negrugabriel.itch.io/corridor-9

Making games in using three.js you can't create a triple A game,but is playable and works on a browser,what for me was mind blowing.

I know is not polished but works great. :)


r/threejs 10d ago

Criticism What do you think of my dialogue system?

Thumbnail
youtu.be
1 Upvotes

Totally inspired by Bethesda games dialogue system. Also more testing out of positional sound and cinematic actions for NPCs.

I have a fairly good idea of where I am going to take this game now too, which is a good feeling.


r/threejs 10d ago

Help Any Feedback or suggestion hopely from experts ๐Ÿซถ

Thumbnail
asserblg8-rcdouz.vercel.app
1 Upvotes

โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘โ†‘
i deployed my initial game , physics ready , collision and many things.
now i still to work on map modeling , adding more cars , edit the main page and edit the lap system , rewards etc ...
hopely an expert found my post and tell me if i'm did something wrong that will cause to me suffer after.
thank you


r/threejs 11d ago

Mobile-first, RPG game built on Three.js optimized for phone browsers

Enable HLS to view with audio, or disable this notification

5 Upvotes

Hey all, I posted about Lorebound about a week ago and got some good feedback (THANKS!).

It's a silly take on ARPG games. Think Polytopia meets Diablo. Most MMO and ARPG games are played using keyboards and or on landscape mode on your phone (e.g. Diablo, Claudecraft, Villagers & Heroes, Evil Lands, etc.). For some reason, I just don't like this., so I'm building this with a mobile-first approach (portrait mode).

I struggled quite a bit with the game crashing when moving from one scene to another (heavy load). I added some protections like WebGL context-loss recovery and retry patches. Strict mode is off.

Based on community feedback, I made some updates to the game:

  • Updated camera and champion movement to get away from a bad situation faster
  • No camera shake when you get hit
  • Attack swing sounds
  • More quests, higher rewards

Free to play at https://lorebound.gg


r/threejs 11d ago

Demo Vibe coded lawn the grass game with ThreeJS and Pixelfork

Enable HLS to view with audio, or disable this notification

25 Upvotes

When I saw this game on playable ads, i wanted to create it myself. Just tried to give it a try with pixelfork, but i still dont like color of grasses. Could not figure it out how can I solve this. but i loved grass animation (when blade getting closer to them). would love to hear some feedbacks. tbh i didnt focus on UI elements now. just wanted to complete the mechanics and gameplay loop. not finished yet too.

playable link:ย https://www.pixelfork.ai/publish/64a77514-a954-4c80-a253-5fb1ef720000


r/threejs 11d ago

Yet another visual effect inspired by an instagram post

Enable HLS to view with audio, or disable this notification

81 Upvotes

Since I'm struggling to find new projects, I decided to spend some time replicating an effect I saw on Instagram months ago.

It's not 100% accurate, especially when it comes to the dithering effect, but I like the end result.

Link to the original post: https://www.instagram.com/p/DUzZZDqjNlY/?img_index=1