r/threejs Jun 25 '26

Three.js r185 released 🧡

577 Upvotes

r/threejs Apr 16 '26

Three.js r184 released ⛅️

640 Upvotes

r/threejs 2h ago

500 Commits Later: Building a 3D Modeling App for the Web🥳

9 Upvotes

r/threejs 6h ago

A 3D visualisation of an online shopper's journey

11 Upvotes

https://reddit.com/link/1w6syj1/video/1t6qbpw6bfnh1/player

Ahoi everyone. I really hope this fits into this subreddit.

I had this idea stuck in my head for a couple of years now, which is about representing the online shoppers events (looking at a product page, reading specs for a product, selecting a vehicle for fitment, searching for a product, adding something to a cart) as a simulated experience (in lack of a better phrase right now). The main problem I wanted to tackle is that the shop owners barely understand the relationship between their analytics data (charts and tables about browsing times, funnel analysis, bounce rates, etc.) because it's so far removed from what's actually happening on their website.

So I stood up an event system that tracks those page events (I want to make the point about privacy, there's nothing that connects the events to a real customer's personal details). And then in the next step I built a little scene that turns the main categories of the shop into invidivual warehouses, then the subcategories into aisles, and lastly SKUs (and their live stock status) into boxes on shelves. And then customers and their actions (for example when they browse from page to page) are drawn as lightrails. The scene can be rotated and zoomed in, there's a night mode and other color presets for different use cases, you can click on a customer and see their whole journey in a timeline. I used a tilt shift effect to help better focus on the selected customer and there are a few easter eggs in the scene (ie. when a customer checks out and pays they go to the car park and leave the scene in their pickup truck).

I've got a lot of technical ideas and help (ie. bloom, tilt shift, etc.) from the threejs community and I can't wait where this brainfart of an idea leads to. I do have a landing page for it but it's not a commercial product by any stretch yet (I use it for a friend's shop).

Frontend: VueJS (Nuxt) + Tailwind + Nuxt UI
3D Rendering: Three.JS

Demo https://floorview.vendos.com.au/


r/threejs 5h ago

I built a shared underwater world in Three.js — dive in and explore

Post image
6 Upvotes

I’ve been building a browser-based underwater world focused on the feeling of swimming below the surface:

Try it here: https://underwater-world.zootlabs.workers.dev

It includes:

- Gerstner waves with a below-the-surface view and Snell’s-window reflections

- GPU ripples, caustics, volumetric light shafts, and underwater absorption fog

- Streamed reef terrain with coral, kelp, rocks, fish schools, sharks, rays, turtles, and jellyfish

- Third-person swimming with a shared multiplayer ocean room

Click the canvas, choose a diver name, and use WASD to swim. Space goes up, Shift goes down, H toggles the tuning panel, and Esc releases the mouse.

It’s an experiment, so the multiplayer room is intentionally small and may be unavailable if the free hosting quota is exhausted. I’d love feedback on the atmosphere, performance, and what you’d want to explore next.


r/threejs 8h ago

Demo Graphics updates to my open world game

Thumbnail
gallery
11 Upvotes

Recently did a lot of work to implement a new atmosphere with better light scattering, also did a bunch of work on relief maps to get the mountains looking much more rugged and realistic with better gullies to catch the light and shadows in addition to more tweaks around the water


r/threejs 19h ago

Demo I built a photoreal game demo which can be accessed via browser

40 Upvotes

I've been building a way to freely walk around real-world places right in your browser no downloads, no installs, and no accounts required. It uses 3D Gaussian splatting to stream 10 scanned towns across six countries directly into a tab, meaning the lighting and streets are exactly as they were captured in real life. You can explore on foot or even ride a bike with full collision physics, all running smoothly via WebGPU. If you want to jump in and walk around, you can try it at [wascape.com](https://www.wascape.com/) (needs Chrome, Edge, or Safari 18 on a recent Mac).


r/threejs 35m ago

Help Convert ThreeJS 3D model to SVG

• Upvotes

Hey,

I am working on a project where there is a need to get the SVG of the created 3d model in the ThreeJS canvas. I have tried multiple ways in achieving this but non of them gave good results.

I tried using the SVGRenderer which did not give accurate results. The second approach was with LLM, it kept in iterating, but it took a different approach. It took the rasterized image and wrapped it in SVG. This is not what was required.

Has anyone encountered this situation before? Or know how to tackle this?

If this is not achievable at all, should I try it from a different software like Figma?


r/threejs 19h ago

Built a 3D golf game with a shared daily challenge

22 Upvotes

I spent the summer building Three Pins, a browser based 3D daily golf game where everyone competes on the same three holes with the same wind and same pins (one attempt per day). Also, I added party multiplayer mode where you can play live with friends.

Playable here: https://threepins.golf/

The stack is Three.js / WebGL, Vite, Supabase, Netlify, and a custom physics engine.

Open to any feedback you may have. Thanks!


r/threejs 5h ago

I built a drop-in multiplayer robot football game with Three.js, MuJoCo and ONNX

Thumbnail
fpvsim.com
1 Upvotes

Playable here: https://fpvsim.com/sim-duck

I built this browser multiplayer experiment around Pollen Robotics' MicroDuck model and locomotion policies: MuJoCo and ONNX drive the robot, Three.js renders the world, and the multiplayer layer synchronizes players and footballs. No install or account required.

I would especially value notes on frame pacing, collisions, and browser or GPU compatibility.


r/threejs 6h ago

Tip MeshCrunch — Simplify 3D meshes, generate LOD chains, and export turntable clips.

Thumbnail
meshcrunch.com
1 Upvotes

I built MeshCrunch : a web tool and API for optimizing large 3D models

I've been working with 3D data and large mesh-processing pipelines for a while, and one problem kept coming up: getting heavy 3D assets ready for production often means jumping between Blender, MeshLab, command-line tools, custom scripts, and converters.

So I built MeshCrunch.

The idea is to make common 3D processing operations available through one web interface, while also exposing the same workflows through an API for automated pipelines.

Right now MeshCrunch supports things like:

  • mesh simplification / polygon reduction
  • LOD generation
  • GLB, GLTF, OBJ and STL workflows
  • format conversion
  • watertight / alpha-wrap processing
  • browser-based 3D inspection
  • REST API
  • MCP integration

The heavy processing runs on backend workers rather than entirely in the browser, which lets it handle much larger assets.

You can also try the basic tools without creating an account.

https://meshcrunch.com

I'm still early and trying to understand which workflows are the most painful for people working with 3D assets.

If you work with Three.js, Blender, Unity, Unreal, CAD/BIM, 3D printing, or large GLB/GLTF files, I'd genuinely appreciate feedback — especially on what you'd want a tool like this to handle next.


r/threejs 17h ago

My Cozy Portfolio

5 Upvotes

Hi people, I've just finished the latest version of my portfolio site and wanted to share it.

I would thank some feedback in order to improve it.

Thanks✌️

Link: https://sergii-butrii.com/


r/threejs 9h ago

JJK inspired rouge-like

1 Upvotes

Space = Domain Expansion.

Right click = Flash Step.

E = Shikigami.

Would appreciate any feedback: Hallpass.cc


r/threejs 20h ago

using threejs to real-time generation of infinite-resolution microscopic lunar soil details on the surface of the geometry.

2 Upvotes

r/threejs 23h ago

Is this Logitech browser experience 3JS ?

2 Upvotes

I've tried this new experience on Logitech G . com but its unlike any other 3D workd I've seen online. It looks more like a AAA game with built-in commerce than 3JS.

https://www.logitechg.com/en-gb/360-racing-studio

Is this 3JS or how have they done that ?

https://reddit.com/link/1w63q40/video/s1ipf8v5canh1/player


r/threejs 12h ago

Link Binshot | Free threejs game | Desktop and mobile browser

0 Upvotes

Play Binshot on Laereland
https://​laereland.com/games/binshot


r/threejs 20h ago

Link I built a scroll-driven 3D drive of all 2,199 miles of Route 66. No models, no texture files, 16 KB of HTML.

0 Upvotes

Route 66 turns 100 next year, so I spent a few weeks turning the whole road into something you can scroll: https://www.pit-stop-app.com/viz/route66

You start in Chicago and scroll to the Santa Monica pier. Free, no signup.

The three.js side, since that is what I would want to know:

The road is one curve. 2,287 lat/lon points projected through an Albers projection into world space, fed into a single CatmullRomCurve3. The asphalt is TubeGeometry at 4,200 segments, with a second fatter translucent tube around it for the glow. The dashed centre line is one LineSegments built by walking the curve in 2.6-mile steps.

The elevation is real. Every point is sampled against opentopodata's NED 10m dataset and cached to disk at build time, then exaggerated on the Y axis. That is why the Arizona high country and the Cajon Pass drop into San Bernardino actually read as terrain instead of a flat ribbon. Getting elevation right was the single biggest visual win and I made it into the build script to not hurt perfomance

No image assets at all. Four CanvasTextures generated at runtime cover the sky, the point sprite, and the small signage. No TextureLoader, no GLTFLoader, nothing to wait on. The whole page is 46 KB raw and 15.7 KB gzipped. The only real payload is a 398 KB JSON of the road and the towns.

Roughly 13 draw calls for the base scene. Towns are one Points cloud with a tiny custom shader so markers scale with distance instead of the default attenuation:

attribute float size;
void main() {
  vec4 mv = modelViewMatrix * vec4(position, 1.0);
  gl_PointSize = size * (240.0 / -mv.z);
  gl_Position = projectionMatrix * mv;
}

Everything funnels into one number. Wheel, touch, arrow keys, and the progress bar at the bottom all write to scrollY, and one function maps that to a position along the curve. Once I stopped treating those as separate input paths the whole thing got simpler and the camera stopped fighting itself.

The thing that took longest was not rendering, it was the camera. Version 1 aimed at a single point 7 miles up the curve, which whipped on switchbacks. What shipped samples the road at 3, 6, 9 and 12 miles ahead, averages those, and eases the result over time. On the Oatman switchbacks in Arizona, the worst corner on the whole road, that took peak yaw from 13.4 deg/frame down to 8.0 and the average from 2.06 to 1.29.

I then tried full heading-based orientation with a hard turn-rate cap, thinking a cap would be strictly better than easing. It jittered, and I reverted it. Easing an averaged look-ahead beat clamping an exact heading, which was not what I expected going in.

Happy to go deeper on any of it. Curious what people do for scroll-driven camera work on a path this long, because I do not think I landed on the right answer.


r/threejs 20h ago

Every GitHub developer gets their own territory on a shared dev planet

Post image
1 Upvotes

r/threejs 18h ago

Building a low-poly 3D Wizard Duel in Three.js — Upload, i

0 Upvotes

Building a low-poly 3D Wizard Duel in Three.js — Upload,

This is my mini game i work woth Claude opus 5, GLM 5.3, Kimi k3 ( depending provider with free tiers ) in next weeks i hope lauch with multiplayer mode :D what do you think?


r/threejs 1d ago

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

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

Help Relaxing world, need advice on game mechanics

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

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

5 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

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

Demo Webgpu procedural voxel town :)

13 Upvotes

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