r/threejs • u/Sengchor • 3h ago
500 Commits Later: Building a 3D Modeling App for the WebđĽł
Enable HLS to view with audio, or disable this notification
r/threejs • u/mrdoob • Jun 25 '26
Enable HLS to view with audio, or disable this notification
r/threejs • u/mrdoob • Apr 16 '26
Enable HLS to view with audio, or disable this notification
r/threejs • u/Sengchor • 3h ago
Enable HLS to view with audio, or disable this notification
r/threejs • u/Ok-Pace5764 • 8h ago
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
r/threejs • u/United-Wonder-5588 • 7h ago
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 • u/snozberryface • 9h ago
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 • u/myfriendoak • 45m ago
Enable HLS to view with audio, or disable this notification
r/threejs • u/Flat_Field_5888 • 14m ago
Enable HLS to view with audio, or disable this notification
Made a simple tetrahedron rotating around its edge in three.js added custom dynamic beveled geometry using tsl You can check it out here: https://moaaz-rafique.vercel.app/triangleRotation.html Inspired by TatsuyaBot : https://x.com/TatsuyaBot/status/1992807192974754227
r/threejs • u/mini_ster • 20h ago
Enable HLS to view with audio, or disable this notification
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 • u/timmyships • 50m ago
Enable HLS to view with audio, or disable this notification
Had a 48hr window with a fresh Claude limits reset - so I ran my first one-shot gauntlet loop on an idea I've wanted to build for ages.
Fable 5.1 ran for 23.8hrs total before I interrupted the looping to launch it. Opus 5 subagents did most of the execution.
It may not win game of the year and I think a lot of these games will die pretty quick. But it's surprisingly addictive and it's unbelievable what you can get live in under 48hrs with these new models.
r/threejs • u/unuseEffect • 1h ago
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 • u/TrustCute5349 • 20h ago
Enable HLS to view with audio, or disable this notification
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 • u/neo_fpv • 6h ago
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 • u/mount_refidim • 7h ago
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:
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.
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 • u/Efficient-Dig970 • 18h ago
Enable HLS to view with audio, or disable this notification
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 • u/Business-Quoconut • 10h ago
Enable HLS to view with audio, or disable this notification
Space = Domain Expansion.
Right click = Flash Step.
E = Shikigami.
Would appreciate any feedback: Hallpass.cc
r/threejs • u/Lonely-Delivery9091 • 22h ago
Enable HLS to view with audio, or disable this notification
r/threejs • u/Round_Caterpillar698 • 1d ago
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 ?
r/threejs • u/laereland • 13h ago
Enable HLS to view with audio, or disable this notification
Play Binshot on Laereland
https://âlaereland.com/games/binshot
r/threejs • u/jakeboyles2010 • 21h ago
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 • u/Neat-Cheesecake9290 • 21h ago
r/threejs • u/phinity_ • 1d ago
Enable HLS to view with audio, or disable this notification
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 • u/ManufacturerEmpty520 • 20h ago
Enable HLS to view with audio, or disable this notification
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 • u/hehnnweed165 • 1d ago
Enable HLS to view with audio, or disable this notification
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 • u/anandwana001 • 1d ago
Enable HLS to view with audio, or disable this notification
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?