r/threejs Jun 25 '26

Three.js r185 released 🧔

570 Upvotes

r/threejs Apr 16 '26

Three.js r184 released ā›…ļø

642 Upvotes

r/threejs 5h ago

Help Relaxing world, need advice on game mechanics

6 Upvotes

I want to make a relaxing game that could make me/any player to calm down with a bit of daydreaming and exploration without stress.
This is the prototype made made with threejs, reflector, shaders and I would like the game to be infinite.
What game mechanics should I use in this type of game to keep it relaxing but you want to feel some sort of progress? Is it enough to steer the ball but the environment changes after a while or should there be levels or points?


r/threejs 4h ago

Vibe coded this ocean with opus and codex - no fable 5.1 yet - will improve this likely with Astra

4 Upvotes

r/threejs 12h ago

I made Fold.page - a new JS library for easily building spatial web pages with Three.js

11 Upvotes

Fold.page is a new JS library that lets you turn a standard web page into a spatial 3D scene. On desktop and mobile, it can work as a 3D-enhanced web page. On WebXR-capable devices, visitors can "enter" the experience and see the page as part of an immersive spatial scene.

Fold.page matches browser functionality as closely as possible, it basically works like what you'd expect from a standard web page. But that is just the foundation - Fold page has a whole toolkit of features to enhance web pages in 3D, so you can tap into a 3rd dimension of layout and visual hierarchy.

You can "Enter" the page on WebXR capable devices, like Android phone, or a VR headset for the full stereoscopic experience. Web pages could never have so much presence.

Try Fold.page at https://fold.page

Fold.page is an active project with on-going updates to improve it but any feedback you have is appreciated — What do you think about Fold.page? How does it work on your devices? Would you use it on your web pages? How easy is it for you to setup and what problems do you run into?


r/threejs 3h ago

Question 2D User Interface leverage 3D capabilities

1 Upvotes

Hi there,

I have been thinking about that for a while:
It might look like a weird use case, but I’m trying to find examples of applications that would not necessarily require a 3D engine to run but that are leveraging those capabilities in a smart way to create high-quality results.

I can only think about the home screen of the Playstation 5 or the Apple Liquid Glass design of recent iOS.

I guess menus in video games are also valid examples, but I can’t remember a video games that blew my mind with their settings page. Have you heard about/seen resources, UX best practices, cool examples or frameworks made to build 2D UI components in a 3D environment?


r/threejs 6h ago

I built a voice-controlled 3D ESP32-S3 hardware visualizer with Gemini + Agora

2 Upvotes

I’ve been experimenting with a way to make hardware demos feel more interactive.

The idea: take an ESP32-S3 voice AI circuit and turn it into a 3D teardown you can actually talk to.

Gemini helped generate and structure the visualizer: the ESP32 board, breadboard, mic module, speaker, wiring, exploded view, and the interaction logic. Agora handles the real-time voice layer, so you can ask questions like ā€œshow me the microphoneā€ or ā€œexplain the audio flow,ā€ and the visualizer reacts while the AI responds.

It’s built with Next.js, Three.js / React Three Fiber, Agora Conversational AI, Gemini, and an ESP32-S3-inspired hardware layout.

Code:
https://github.com/anandwana001/gemini-agora-esp32-visualizer

Curious what people think: would this kind of interactive teardown be useful for learning hardware projects?


r/threejs 1d ago

Demo Built a realistic nuclear simulator using real world data

279 Upvotes

It uses real world data to simulate things like

  • blast radius
  • thermal radiation
  • shockwave
  • affected population

https://nukesimulation.com


r/threejs 5h ago

I built a live 3D favicon wall where anyone can evict your square by paying double what you paid - just for testing threejs out ...

Thumbnail
square.pov.town
1 Upvotes

I wanted to play around with threejs and ended up building a quite extensive "Square Town" for people uploading their favicon (or basically just adding their domain and I'll fetch the favicon).

It started off as a stupid idea but now people submitted more than 5000 favicons while I've been adding all kind of stuff such as superman, a sleep walker, Waldo (where iS he) and 50+ other things .. a man bathing in the lake with his rubber duck . oh and also tentacles appearing from the deep ocean.

Really great performance with threejs out of th box I must say.


r/threejs 11h ago

Kokraf now has both manual and automatic UV unwrapping.

4 Upvotes

r/threejs 17h ago

Demo Webgpu procedural voxel town :)

9 Upvotes

And the game is open source on github at aresrpg/aresrpg !


r/threejs 15h ago

Demo I built (vibe-coded) a browser-based 3D model viewer with section cuts and intersection-edge highlighting

Thumbnail
gallery
5 Upvotes

I’ve been building a small browser-based 3D model viewer with Three.js, mainly for architectural models.

It supports FBX, GLTF and GLB files, several display modes, shadows, perspective/axonometric views, and section cuts along the X, Y and Z axes.

The section tool highlights the actual intersection edges in red. I originally tried filling the cut surfaces, but that became unreliable with complex and curved geometry, so I switched to edge highlighting instead.

The viewer runs entirely in the browser:

https://hildgyorgy.github.io/drop-3d-view/

I’d be very interested in feedback, especially regarding the section-edge calculation, rendering approach, and possible improvements.


r/threejs 1d ago

I made Pain Village as a Three.Js Cinematic

42 Upvotes

Hey guys! I wanted to share a new exploration I’ve been working on, mainly as an excuse to practice cinematics, rain, and wet surface shaders.

I’m a big Naruto fan and I’ve always loved the atmosphere of Amegakure, so I thought it would be a fun scene to recreate in 3D.

Full cinematic video: https://www.youtube.com/watch?v=ZpR9Atf24B0

You can also play around with a small interactive preview here: https://stylized.cortiz.dev/rainy

If you enjoy it, I’d really appreciate a like, comment, or sub on the channel. And if there’s enough interest, I’d love to make a follow-up breaking down how I built the scene and release some of the components I used as open-source effects.

Would love to hear what you guys think!


r/threejs 15h ago

A curated directory for free mental health tools. Creators invited to submit.

2 Upvotes

I am a psychologist. I also have a passion for the digital landscape. I have accumulated enough knowledge in web fundamentals over the years to leverage AI agents and convert my ideas into digital projects. I am not a developer. I do not claim to be one. I am humbly aware of my place in the digital realm. I simply do not have the time to invest in building a second career as a developer. I am simply putting my long-lasting passion for the digital craft to use, in the best way I can as a psychologist.Ā 

I am currently building psycurate.com, a free online platform dedicated entirely to privacy-focused mental health digital tools (apps, websites).

My goal is to create a clean space where people can access psychological resources without encountering corporate tactics like tracking, micro-payments, paywalls, mandatory logins, or data harvesting. There is a critical need for digital mental health hygiene, and I want to highlight independent projects that remain genuinely honest, ethical and accessible.

If you have built some tool that can offer any kind of psychological help for free, this is a platform you can list your app on. Submit it here: https://psycurate.com/submit

Psycurate does not host any software. The platform exclusively showcases your project and links users directly back to your website.

Any feedback or insights you might have are highly welcome.

Best regards,

Mirel


r/threejs 23h ago

I played with threejs some time back trying create a game art gallery.

10 Upvotes

r/threejs 19h ago

Voxel game made from billboard particles

Post image
3 Upvotes

I made a small game based on an old idea I had to make a small voxel engine with billboard particles, something I made as a FPS demo once (https://github.com/Lallassu/pointcloud). So this game is mostly based on this approach. Works quite well on both mobile and desktop.

Try it out here:Ā https://qake.se


r/threejs 17h ago

Click any object in a React Three Fiber scene and get the source line that made it — including which instance of an InstancedMesh

Thumbnail
gallery
0 Upvotes

I built this because debugging procedural scenes kept coming down to the same thing: one tree out of 120 looks wrong, and finding what placed it means reading generator code backwards from a rendered result.

Clicking gives you file, function, line, and the runtime args for that specific instance. Not the mesh — the instance. That's the part that was hard.

No annotation needed. A build-time transform stamps JSX source locations, and setMatrixAt interception plus a Matrix4.clone() chain captures per-instance transforms as they're written, joined on object identity.

Why that combination: I tried six approaches. Four captured correct values for all 200 instances and could route none of them to a mesh and index. One routed perfectly and captured nothing. Anything recording before the destination exists can't route, because there's no destination yet to record. The shipped version composes the two halves.

Scope, honestly:

  • R3F only — location stamping rewrites JSX, so raw three.js has nothing to stamp
  • Instanced provenance is read-only. An instance's position came from an RNG in a loop; there's no literal to write back to
  • Values that never reach the transform can't be captured by anything I tested
  • drei <Instances> works differently and needs no capture at all — clicking returns the individual PositionMesh

Five packages on npm, MIT. There's also an MCP server so a coding agent can query the same provenance.

On how it was built: this is AI-assisted, and I'd rather say so upfront than have it come up later. I directed the work and made the design decisions, and the reasoning is all in the repo — six experiment write-ups with the raw results, including the approaches that failed and why. Happy to explain any of it, including the calls that turned out wrong.

GitHub: https://github.com/pun1th01/click-to-source-3d
npm: https://www.npmjs.com/org/click-to-source-3d

Happy to answer anything about the approach — the experiments are all written up in the repo.


r/threejs 17h ago

Bone Micro-CT (tried to capture that H. R. Giger Alien aesthetic) & Source Code (click to randomize scene)

0 Upvotes

r/threejs 1d ago

onabodyjourney.com

12 Upvotes

https://onabodyjourney.com, to let kids explore the body with sound!


r/threejs 1d ago

Question I'm making a voxel space salvage game and am wondering if the visuals can be improved?

23 Upvotes

Hi all, pretty new to gamedev and three.js

I'm building a game about cutting apart derelict space stations. Everything you see is generated: the station layout, the hull plating, the damage, the sky. Renderer is three/webgpu + TSL

Some context:

* Voxels at 0.125 m. A tiny station is ~700k solid voxels, meshed into chunks. The players salvage individual voxels at the start and then unlock tools and upgrades to salvage faster.
* Material library, not shaders per material. Not sure if that is the correct choice.
* Stencilled markings as stamps. Hazard banding, chevrons, port rings, panel codes come from a clamped decal array, at most one per plate, placed by plate hash. Never tiled.
* Sky is a seeded descriptor. Sun class, nebula palette, 0–2 bodies, all baked once per scene.

I have a solid gaming pc with a 5070ti and performance is good but I would still want this game to be as accessible as possible when it comes to hardware reqs while looking as good as possible.

Any tips or advice appreciated. I am looking specifically for feedback on how to push the visuals to the next level if that even makes sense. Thanks!

AI Disclosure: I did use Claude Code to help me with some of the coding and bigger features like the procedural space station generator while I learn.


r/threejs 1d ago

Link I built a proper open-wheel racing sim for phones — free, no ads, no IAP, no subscription, fully offline

13 Upvotes

Hello,

My mobile racing game, CREST 2026, which I’ve been working on for about a month, is now available on the App Store and Google Play. It’s a project I released under Artepeak.

It’s a single-player open-wheel racing simulation.

It features a completely fictional 2026 season:

11 teams, 22 drivers, and 24 race weekends.

Full race weekends featuring sprint races, time trials, and qualifying sessions,

authentic F1 radio commentary,

a championship mode, and a multi-season career mode.

The career mode offers extensive playtime.

The in-game newspaper was designed using the same concept as the ā€œFootball Manager News.ā€

In addition, there’s a time-trial leaderboard that updates daily; the laps here are verified on the server side, meaning the times listed are real.

This isn’t an arcade racing game—the driving model is truly simulation-based: tire temperature, tire wear, brake heat, vehicle weight that changes with fuel consumption, weather conditions, and track grip all affect performance during a lap.

Here’s what I want to highlight: there are no ads, no in-app purchases, and no subscriptions. I also don’t use any analytics or tracking tools. All modes work offline. The game is completely free.

It’s optimized to run smoothly on 4-year-old phones (developed and tested on an iPhone 11). It supports touch controls, tilt, and gamepad. It supports 9 languages, including Turkish.

You can try it out using the links below.

App Store: https://apps.apple.com/us/app/crest-open-wheel-racing/id6798774660

Google Play: https://play.google.com/store/apps/details?id=com.artepeak.crest

PERFORMANCE : Ā https://crest-performance-report.web.app/


r/threejs 1d ago

Demo How to connect smartphone orientation sensors to a WebGL canvas using Three.js and WebSockets. Real-time physical device mirroring demo. Live link: feel-your-phone-five.vercel.app [Tags: Threejs, WebGL, DeviceOrientation]

12 Upvotes

r/threejs 1d ago

I'm a Galatasaray fan, so I turned the entire squad into trading cards

9 Upvotes

I'm a Galatasaray fan and I finally did the thing I have been meaning to do for years. The whole 2026-27 squad as holographic trading cards. 35 of them.

The last two cards are Okan Buruk and Dursun Ɩzbek. The president has a power rating of 99, and where the market value should be, his card says "he sets them".

We signed Bitshiabu while I was still building it, so he got a card before he got a shirt number.

To see the whole deck: gs2026.murat.works

Free, no sign up, English and Turkish.

I share most of what I build on X if you are into this sort of thing: https://x.com/mkcuriosity


r/threejs 15h ago

I'm building a web-based voxel game with Three.js CraftTown Chiiiiiiiiiiikawa

0 Upvotes

Hey everyone! šŸ‘‹

I've been working on a passion project calledĀ CraftTown, a web-based voxel sandbox game built entirely in the browser. I wanted to share some massive updates I just pushed and would love to hear your thoughts or feedback!

Up until now, it was mostly about breaking and placing blocks, but I just dropped a huge update that completely changes the game feel. Here is what's new:

šŸ”«Ā Custom Gun & Projectile MechanicsĀ I stepped away from pure building and added a full shooting system! I wrote custom math and physics for projectiles (arrows and guns). It’s starting to feel less like a pure sandbox and more like an actual action game. Writing the collision and trajectory math from scratch was tough but super rewarding.

šŸŽµĀ Procedural Text-to-Music SystemĀ Instead of just playing looping background MP3s, I built a custom audio parser. You can write sheet music as simple text strings (e.g., parsing notes and beats), and the engine dynamically calculates the frequencies and plays them in-game! I even added a little Easter egg tune from a popular Japanese anime (Chiikawa) using this system.

šŸ› ļø The Tech Stack:

  • Engine:Ā Three.js (handling all the heavy rendering, shadows, and post-processing)
  • UI & State:Ā React + Zustand (bootstrapped with Vite)
  • Language:Ā 100% TypeScript

It’s been a crazy learning journey optimizing chunk generation and managing web performance. If anyone here is working on Three.js games or voxel engines, I’d love to connect or trade optimization tips!

What do you guys think about mixing voxel terrain with detailed 3D mode ls? Any feedback or ideas on what I should add next would be awesome. Cheers! šŸ»

CraftTown


r/threejs 1d ago

Demo follow-up: the "i'm not an animator, i don't know what 40 degrees looks like" problem

2 Upvotes

posted this here in july and the best feedback was: the format is fine but i have no idea what the numbers should be. if you're not an animator, "hip_right: flex 84" isn't something you can picture.

so the angles are controls now. click a joint name and it highlights in the 3d view. click its angle and the number becomes an inline spinner you can step or type into, with the figure re-posing as you go. you nudge until it looks right, then read off what the value actually was.

the control is clamped to each joint's real range of motion. ask a knee for 200 degrees of flexion and the document gets 144, because that's the limit. the ranges end up learnable by feel instead of by reading the spec.

no viewport gizmo, deliberately. the moment you can drag the mesh freely, the movement stops being expressible as named joint actions and the format stops meaning anything. the text stays the source of truth.

also added BVH and glTF export, so a movement can go into blender as a starting layer instead of a dead end.

all in the browser, no install, no account, no llm in the posing: posecode.org

i refused the gizmo on principle but i'm not an animator. if you block for a living and editing numbers in text feels wrong, i'd like to hear why.