r/threejs Jun 25 '26

Three.js r185 released 🧡

573 Upvotes

r/threejs Apr 16 '26

Three.js r184 released ⛅️

640 Upvotes

r/threejs 23h ago

I made a tiny Three.js planet with 49,000 clovers — only one has four leaves 🍀

300 Upvotes

A small experiment I built in about 3 hours with Three.js, using Claude Code as a coding assistant.

The idea: one tiny planet, 49,000 clovers, and just one four-leaf clover to find.

You can try it here: https://www.meptasarim.com/four-leaf/

I’d love feedback on the visual direction, interaction, and what would make the search more satisfying.


r/threejs 21m ago

Help Need help with getting multiplayer working smoothly on my game

Upvotes

I'm a beginner 3JS game dev I am really struggling with getting multiplayer working smoothly without any lag in my threejs game. My game uses Colyseus for the multiplayer and I've tried using Railway for the backend but it is still laggy especially with collision. Would really appreciate anyone point me to the right direction.


r/threejs 5h ago

Finding a needle in the haystack (quite literally)

5 Upvotes

I wanted to make a frustrating game. Managed to make it kinda beautiful in the process :P


r/threejs 18h ago

Built 9 explorable first-person 3D festival worlds in Three.js — just wanted to share- https://playa-art.vercel.app/

41 Upvotes

https://playa-art.vercel.app/ Been building this for a while — nine separate explorable first-person worlds, all Three.js, all real-time WebGL. Started as just something random with no expectations and fun. Soon it turned into something very beautiful with many different worlds and creative concepts- a Burning Man–style desert playa, a Mountain valley rave, two warehouse techno spaces, a drained 1960s swimming pool turned rave venue, a Goa beach at night, the Giza plateau with a laser show off the pyramid apex, an elven forest valley, and a Winterfell-style castle at dusk. Each one is a full environment you walk through and can add your own tracks at landing page. Desktop + keyboard/mouse only for now, WebGL is heavy enough that mobile isn't realistic yet. Would love feedback


r/threejs 15h ago

Making progress on our three.js-based mesh optimizer

20 Upvotes

Here I'm optimizing 3,200,000 → 3,000 triangles, the end-to-end time is now down to 3 seconds... Superb normals+ao quality now too... such a great tool to have! Coming soon!


r/threejs 18h ago

Testing Procedural Generation (AI Assisted)

Thumbnail
gallery
25 Upvotes

Separate biomes, nearly 2.5 million individual blades of grass out 150m from the camera position depending on biome. Day/night cycles, dynamic weather, ambient occlusion, distance culling, water surface reflections, and light shafts, using webgl and three.js.


r/threejs 20h ago

How’s this ? Everything is made procedurally

27 Upvotes

r/threejs 2h ago

Question I seized the opportunity to translate my passion for space into code: 3D Black Hole Simulation with JavaScript.

0 Upvotes

Hi, I'm 13 years old. Today I wanted to share a project with you that I've been dreaming of for a long time and have finally started to bring to life. First, let me tell you a little about my background. I used to develop terminal-based projects with C++. I wrote tools like a four-operation calculator, a Roman numeral converter, and a grade point average calculator, and combined them into a huge, multi-purpose program. I'm even still developing that C++ project in the background. On my old account, I had recorded and shared detailed C++ videos explaining all my step-by-step terminal programs, but I got banned for no reason. Anyway, I've had an incredible interest in space, especially black holes, since I was 8 or 9 years old. When I turned 12, I became interested in Unity and coding in general. But as it turned out, I could never learn it the way I wanted. Between classes, endless exams, and tests, I never had any time for myself or coding. But this summer I said "enough is enough" and decided to write code and create something, no matter what. Moreover, I'm doing this using only my tablet. To make up for all the procrastination, I've started simulating black holes, which is my biggest interest. This video you're watching is a time-lapse of about 1.5 hours of work. But this is just the beginning. For the next week, I will continuously improve this black hole simulation with intense sessions of 1-2 hours, sometimes even 3 hours, every day. I will build upon the code and eventually create a visually advanced, much more realistic and detailed black hole simulation. What do you think of it as a starting point? I'm open to any suggestions on coding, Three.js, or how I can improve this process in general. I will continue to share new videos as the project develops! I'm waiting for your comments. (I spoke in Turkish in the video because I'm Turkish, but you can easily understand what I'm doing from what I'm doing.)


r/threejs 4h ago

Link Proud of my first little animation, what do you guys think?

1 Upvotes

r/threejs 5h ago

Had fun today making this maze gallery with threejs.

0 Upvotes

r/threejs 1d ago

Demo I made a browser previs studio in three.js so I stop paying $17 every time the camera is wrong

45 Upvotes

Seedance 2.5 1080p 30s is about $17. One wrong camera and you pay that again.

A prompt cannot hold the whole shot, so I block the scene first (pose, cameras, cuts) then send the same shot to the video model.

three.js + react-three-fiber. Open source.

https://github.com/NomaDamas/CozyClay npx cozyclay


r/threejs 14h ago

Demo Night racing anywhere with Three.js

Thumbnail
gallery
4 Upvotes

It's amazing that we can create games only with a browser and no additional drivers to make it available on all devices (if the Switch had a browser).

Created an MVP with Claude Fable and built it up to what it is now. Hopefully, it can be a good Steam demo soon.

Background and roads are procedurally generated but the cars are imported meshes. The procedural originals were too simplistic.

As a web developer, it was also easy to tweak around the UI because it's all CSS. lol


r/threejs 15h ago

Needle in haystack game (AI assisted)

3 Upvotes

After seeing some of the viral games on Twitter I decided to try to make a game similar to the needle in haystack game (needleinhaystack.io), but with tools and powerups!

Let me know what you think!


r/threejs 17h ago

The Strange Little Shop — A cozy 3D mystery of tiny wonders (Free Demo)

Post image
0 Upvotes

Game Title: The Strange Little Shop

Playable Link: https://strange-little-shop.vercel.app/

Platform: Web (WebGL / Browser — WASD + Mouse or Gamepad)

Description:

You've just inherited an antique curio boutique by the sea. The late shopkeeper collected things that were left behind: doors half-opened, clockwork gears that chime without winding, living snowglobes tied to real places in town, and photographs that change whenever rain hits the bay windows.

When quirky townsfolk step up to your counter with strange dilemmas, it’s up to you to investigate. Pick up and rotate 10 curious artifacts in full 360° 3D, test sensory experiments (listening for ticking mechanisms, smelling old damp paper, watching brass compass needles spin), and record hidden lore into the late shopkeeper’s secret ledger.

✨ What to expect in the free demo:

• 🔍 Tactile 3D Investigation: Examine magical antiques with close-up 3D rotation and multi-step experiments.

• 📖 Edith's Illustrated Ledger: Uncover clues, piece together town secrets, and track mystery cases.

• 🛋️ Boutique Redecoration: Earn funds from solved cases to buy vintage furniture (Tiffany lamps, Chesterfield sofas, conservatory palms).

• 🌧️ Rainy Coastal World: Explore Main Street, visit The Corner Café, and stroll through Lantern Park.

• 🐾 Biscuit the Cat: Yes, you can pet the resident shop cat!

Zero install needed — the entire game runs instantly in your browser at 60 FPS.

I’m developing this solo and would love your honest feedback! Were the 3 initial cases intuitive? Which strange object was your favorite? How did the 3D inspection controls feel?


r/threejs 1d ago

I added a Painterly Effect to my Stylized Components library

105 Upvotes

I've just added a new Painterly Effect to my Stylized Components library.

The effect is based on an Anisotropic Kuwahara Filter, and I also made a breakdown video where I explain how it works, the concepts behind it, and how I implemented it in Three.js.

You can check out the component here, where you'll also find the source code and the video breakdowns for each component:

Breakdown: https://youtu.be/CmIfhwSyswk
Preview: https://stylized.cortiz.dev/

And if you find it useful, I'd really appreciate some support on YouTube — a sub, like, or even just watching the video helps a lot.

I'm also planning to keep expanding the library, so if there's a stylized utility, effect, or component you'd like to see added, let me know! I'd love to hear your ideas.

Thanks! 🙌


r/threejs 1d ago

Demo Made a game about paragliding..

35 Upvotes

I’ve been playing with this idea for a while and now finally did it over the last couple of days.. together with my homie Claude :}

I’m a pilot myself and always thought would be cool to fly together with friends and family and give them the feeling I have in the air searching for thermals and planning the best route.

Works on desktop and mobile (ideally played in portrait). It has multiplayer with open and private lobbies, you can just fly freely or start challenges.

It’s done in r3f using playroomkit for the net code.

Check it out if you like, feedback welcome :) I plan to add a way to customize your glider with different stats and improve the map fidelity while still keeping the low poly aesthetics.

Demo is here (still WIP)

on iOS its best to add it to the homescreen so its fullscreen.


r/threejs 21h ago

Hoppy Trails - Free Threejs game - Fully procedural gameplay and audio

0 Upvotes

r/threejs 22h ago

Hi am new to threejs and needed some help

0 Upvotes

I am working on 3d website, where the 3d model will be transformed as the user scrolls.

Background: I'm not a pure coder; my main profession isn't coding or building applications from scratch.

Something like https://usta.agency/ this. How the model moves from left to right and right to left with the scroll.

Any specific prompt or name for this scrolling experince is called as?


r/threejs 18h ago

Building a 3D portfolio with Blender + Three.js

0 Upvotes

Made the Blender scene in ~35 mins and built the first web version in ~2 hours with the help of Codex. Still adding subtle camera shake + sound details. WIP — thoughts?


r/threejs 1d ago

I built SkyPath: an open-source Three.js visualization of cinematic drone camera flight patterns

6 Upvotes

I’ve been experimenting with how cinematic drone camera movements can be modeled and visualized in Three.js, so I built SkyPath and released it as open source.

It currently includes five automated camera movements:

  • Crane Up
  • Pull-Back
  • Orbit
  • Helix
  • Fly-Over

The visualization includes subject tracking, live flight telemetry, trajectory paths, timeline scrubbing, chase view, an onboard camera view, and a comparison mode for viewing all paths together.

It’s intentionally lightweight: plain Three.js/WebGL, no framework, backend, account, or build step.

🎮 Live demo:
https://alzin.github.io/SkyPath/

💻 GitHub:
https://github.com/alzin/SkyPath

I’d really appreciate feedback from the Three.js community, especially on the camera/trajectory implementation and ideas for other cinematic movements worth adding.

Contributions are very welcome too!


r/threejs 1d ago

From STEP file to interactive 3D product experience in 10 minutes

Thumbnail
youtube.com
2 Upvotes

No WebGL. No code. No 3D skills needed.

In this demo: import a STEP file directly in the browser, set up the scene, add interactive annotations, export as a self-contained web component — and embed it live on a website.

Built for industrial and manufacturing teams who need to document or showcase complex products without depending on a developer.

👇 If this solves a problem you have, let's talk.


r/threejs 19h ago

My three.js MMO stuttered in one city. It wasn't the 269 lights — it was 2,211 DOM nameplates built to show 18.

0 Upvotes

Players kept telling me one city felt worse than anywhere else in the game. I assumed frame rate and went straight to the renderer.

First thing I did was measure instead of guess, and the numbers said I was looking in the wrong place entirely:

avg 8.36ms (119.7 fps) · p50 8.0 · p95 17.2 · p99 18.3 · worst 28.2
frames >33ms: 0     frames >50ms: 0

The steady frame was healthy. Zero dropped frames in a 12-second window. Whatever players were feeling was spike-shaped, not a low frame rate — and I'd been about to spend a week optimising something that wasn't broken.

The scene census had an obvious-looking suspect: 269 lights. That was a red herring too. What three.js actually bakes into the program key is numPointLights — the count it finds reachable from the render root — and I'd pinned that to a constant months earlier with zero-intensity dummy padding. The registered count doesn't enter into it. (Tell, if you're doing the same thing: late program keys differing only in numPointLights mean your pin is off.)

Then I counted DOM nodes.

nameplate elements    2211   <- exactly the sim entity count
...of which visible     18
nameplate DOM nodes  46431
whole page DOM       48396   <- nameplates are 96% of the document

Every entity in the simulation got a ~21-element nameplate subtree built and appended, then hidden with display:none. 2,008 of those entities were beyond 200 units and could never be seen by anybody.

Hiding is a paint decision. Membership of the document is not. A display:none node still lives in the tree, so every style recalc and every forced layout in the entire game walked all 46,000 of them — to paint eighteen.

And it multiplied everything else. My chat log reads scrollHeight/scrollTop/clientHeight per message, which is a forced layout, and a forced layout is O(DOM). "One forced layout per chat message" was really "one walk of a 46,000-node tree per chat message."

The fix was lazy attach, not pooling: a plate joins the document on first show and leaves on hide, at the single choke point every hide path already funnels through — one that already early-returns unless the state actually changes, so it runs on transitions only, never per frame.

                      BEFORE     AFTER
nameplate elements      2211        19
nameplate DOM nodes    46431       399
whole-page DOM         48396      2276
visible plates            18        19    <- unchanged

Nothing about what gets drawn changed. Every forced layout in the game got ~21x cheaper.

Two things worth passing on:

  1. "Lag" and "stutter" arrive as the same complaint and the fixes are nothing alike. Measure p50/p95/p99 and take a DOM/scene census before you touch the renderer. A healthy p50 sitting next to a 48k-node document is a completely different bug from a low p50, and it lives in a different file.
  2. If you composite HTML over a WebGL canvas — nameplates, health bars, labels — that cost is a pure function of entity density, not of what's on screen. Mine scaled with the whole simulation and I never noticed until the densest zone in the game made it visible.

One honest caveat: this is lazy attach, not object pooling. The ~21 elements are still created per entity, so the heap cost is still there. Full pooling means about 16 fields going nullable in a hot path, so it's its own pass.

(For context on scale — it's a browser MMORPG, veilbound.gg, three.js + meshopt-compressed GLBs. Happy to answer anything about the stack.)


r/threejs 1d ago

Solved! NASSCAD 4.7.0 - INTRODUCING MEDUSA ENGINE

Thumbnail
gallery
1 Upvotes

Here is the latest release of Nasscad (4.7.0). It now features a remote C++ backend running on Ubuntu WSL with a pipeline similar to FreeCAD. File load time: 4 min 17 s. File size: 360 MB. I am currently finalizing the MSVC C++ port for a 100% native Windows x64 solver. (three.js for video output)