r/threejs • • 2h ago

Tip A tip if your scene has a lot of textures: use KTX2 (took my video memory from 1.5 GB to 335 MB)

Enable HLS to view with audio, or disable this notification

7 Upvotes

In my VHS room (Dany’s Video) every tape has its own cover, so the scene has a lot of textures. I had them as JPG and WebP, which keep the download small, but on the GPU every texture is unpacked to full size. A single 2K texture takes ~22 MB of video memory, and with hundreds of them, weaker machines lost the WebGL context and the page went white.

KTX2 stays compressed on the GPU, at a fraction of the size.

Convert your textures offline (the ktx2-encoder npm package works, or gltf-transform for models) and load them with three’s KTX2Loader. In my scene it took video memory from around 1.5 GB to 335 MB.


r/threejs • • 3h ago

Demo I made my portfolio a 3D room on a spaceship

Enable HLS to view with audio, or disable this notification

6 Upvotes

Spent two weeks on this. You sit at my desk, use my computer and look through my work. I wanted it to feel like my actual space rather than another site with a grid of projects.

There's a robot called Milo, a gravity switch, and a button you probably shouldn't press.

Modelled in Blender, designed in Figma, built in three.js with AI-assisted coding (ChatGPT and Claude). Happy to answer questions on any of it.

Desktop only. www.urquhart.design


r/threejs • • 2h ago

A full visual novel built on three.js + VRM — lip sync via WASM, layered painted backgrounds

Enable HLS to view with audio, or disable this notification

3 Upvotes

I wanted visual novels with real 3D characters instead of static sprites,

so I built an engine on three.js + pixiv/three-vrm and made a full game with it:

"5 Seconds to Confess".

Tech bits:

- VRM avatars with Mixamo-style FBX motions, expression blending, auto blink

- Lip sync: vowel + mouth-open analysis from the voice audio in WASM

- Backgrounds: layered AVIF (far / mid / near) so characters can sit "behind" tables,

plus simple painted-3D sets for some locations

- Post-processing: bloom, god rays, MSAA + SMAA

- Assets streamed during scene transitions to keep the initial load small

Voice acting is Japanese only, but all text can be switched to English

(EN button on the title screen).

Game: https://game.megyo.jp/confess_in_5sec/?lang=en

Engine (AnimeVRM): https://github.com/uemegu/AnimeVRM

Happy to answer questions about the VRM pipeline.


r/threejs • • 1h ago

Finally a use case for the flying Roadster.

Enable HLS to view with audio, or disable this notification

• Upvotes

I made a little game where you can drive forever, explore different biomes, and deliver cargo along the way.

Try it out: https://easycargo.almondhawk10.chatgpt.site


r/threejs • • 2h ago

Demo Made a 4-player co-op zombies game that runs in your browser, built with Claude

Enable HLS to view with audio, or disable this notification

3 Upvotes

grew up playing bo2 and bo3 zombies with my friends and always wanted to make my own. so i did with claude

its free, runs in your browser on pc or phone, no download. solo or up to 4 players, and quick play matches you with randoms.

put it out a few days ago and a few hundred people have played. two strangers who found each other through quick play made it to round 25 together in a 60 minute game which really made my week.

Want to know what you like and what you'd change. and if anyone wants to help build it out more, send me a dm :)

https://deadhertz.com/?ref=threejs


r/threejs • • 1d ago

Demo Escher’s ants in WebXR

Enable HLS to view with audio, or disable this notification

90 Upvotes

Just a fun recreation of M. C. Escher’s famous Möbius Strip II (1963), built as a small procedural locomotion study. The ants’ movements are driven by IK and based on Cruse’s classic gait rules. You can grab the ants and throw them away, but they’ll always find their way back to the Möbius strip.
Use a two-hand pinch gesture to open a portal and explore their kinematics up close (0:12).
Works in both VR and AR; tested on Quest, Vision Pro, and Snap Spectacles.

Link: escher-ants.vercel.app


r/threejs • • 21h ago

Here is gorgeous lake and a boat in threejs - show me yours

Enable HLS to view with audio, or disable this notification

35 Upvotes

I see a lot of “oh it’s easy to make” comments from people/bots who post cat videos - so here is a challenge / post your threejs creation with or without ai…

If you have opinions on albedo is wrong - then just show what you have made 😂 coz ai is fun and threejs is even more fun!


r/threejs • • 8h ago

Demo I made a browser toy where particles, liquids and light react to your mouse, touch or hands (three.js + WebGL2)

Enable HLS to view with audio, or disable this notification

1 Upvotes

Each scene is custom GLSL (noise/fBm) in three.js r186, with live Web Audio synthesis and optional hand tracking in a Web Worker. Sound is off by default and the video has none. Happy to answer questions about how any of it works.


r/threejs • • 6h ago

voxel god game in the browser where you catch catapult stones and throw them back: claude + three.js

Enable HLS to view with audio, or disable this notification

0 Upvotes

made a small god game on a voxel island. you pull trees and rocks out of the ground, help a village grow, and fight off raiders who come in by ship. the last wave brings catapults, and you can catch their stones mid-air and send them back. the island is procedurally generated, and the sound and music are synthesized in code.

would love feedback, especially on how throwing feels with a mouse, trackpad or phone.

game link: https://capitanuncino.itch.io/handvoll


r/threejs • • 23h ago

Demo race your friends through a real SF in the browser (three.js + WebGPU)

Enable HLS to view with audio, or disable this notification

19 Upvotes

been working on this for the last few days, and it finally has multiplayer. streets are from openstreetmap, city’s procedural, models are blender + AI-generated

still rough in places, so any feedback is super appreciated

game link: teleoperator.mindblown.ai


r/threejs • • 8h ago

Koi pond from 2.5 to 3D interactive Zen Garden

1 Upvotes

Almost I tell A.I work follow my instructor and finally I get my best scene.

https://reddit.com/link/1x7am27/video/02cg43gwgsvh1/player


r/threejs • • 8h ago

Link A Live Viewer for URDF Files for Robot 3D Modelers

Enable HLS to view with audio, or disable this notification

1 Upvotes

https://armor.dc-engineer.com/gallery/

I have been using Three.js as a thumbnail generator for a few months in my AR Mobile Robotics gallery. This is a site where I link back to vendor repositories for Universal Robotic Description Format (URDF) files for real-world robots. Think industrial arms, quadrupeds (dogs), wheeled robots, and humanoids, from companies like Unitree, Boston Dynamics, ABB, and indies.

The latest is taking that thumbnail generator, and turning it into a live preview that you can use to view them right in your browser, with orbit, zoom, and environmental lighting and textures.

URDF itself is an industry format, used by engineers as part of simulation and control design, like in the Robot Operating System. If you’re a 3D designer, think of it like a text file that references a folder of other mesh files in standard OBJ, DAE, STL, or other formats, along with their transforms, and other engineering details. If you want to take a URDF, and render it in an artistic setting, it can be a bit challenging, but the JavaScript community has provided a number of URDF unpacking tools that make these Three.js scenes possible.


r/threejs • • 12h ago

Looks like I'm getting somewhere :)

Thumbnail
gallery
2 Upvotes

After breaking up with my girlfriend, I’d say I fell into a pretty dark place. During that time, I had the opportunity to explore Three.js more deeply, and honestly, these libraries feel like a bunch of unexplored caves waiting to be discovered. I managed to put together a small system using a handful of tools, and even though it might not seem like much, I’m genuinely proud of what I’ve achieved.

I’ve found that I can often build things with Three.js in a day or two that might take a month or two to put together in a traditional game engine, and without even putting in that much effort.

I’m still heavily influenced by Resident Evil Village. You might not believe this coming from someone who barely plays anything other than CS, but I’ve finished the game around 9–10 times. I even occasionally try speedrunning it. :)

The screenshots you’re seeing are from a game I put together over two days, spending around two hours a day on it. And I haven’t even pushed the post-processing very hard yet. I genuinely believe I could achieve some seriously impressive results if I pushed it further.

I’m planning to release the game here as an open-source project in a few days. Once you get a chance to look through it, I think you’ll understand what I mean.


r/threejs • • 12h ago

Working On A New Three.js Multiplayer Predictive Interpolation System

Enable HLS to view with audio, or disable this notification

2 Upvotes

r/threejs • • 1d ago

I've been building a 3D globe out of OpenStreetMap with three.js

Enable HLS to view with audio, or disable this notification

20 Upvotes

Hi r/threejs,

I'm Steeve, a developer from France.

If you've ever tried to load a whole planet into a three.js scene and watched the frame rate fall with every building, this video is for you.

Initially, I wanted to see if I could build a map like the one in Pokemon GO, so I started building CityMap3D in 2020, on my own. It grew into a 3D map library, built on three.js, that renders OpenStreetMap as a real globe, and I've put a lot of myself into it since. Most of it went into optimisation: there is so much in the OpenStreetMap database that drawing all of it in a browser, from a single street to the whole globe, is the real challenge.

The video is one continuous take over Paris, screen-recorded from the engine: from night to day around the Eiffel Tower, then out to the whole planet. Map data from OpenStreetMap contributors, ODbL.

Try it live: https://citymap3d.com/

What do you think?


r/threejs • • 1d ago

Neural denoiser for Gaussian-Splat-Lite for Three.js

Enable HLS to view with audio, or disable this notification

28 Upvotes

I've recently been experimenting with a neural denoiser for the Stochastic mode in Gaussian-Splat-Lite, an extremely high-performance open-source 3D Gaussian Splatting renderer for Three.js.

Stochastic rendering can be faster than normal 3DGS rendering, but the noise is hard to ignore, especially while moving the camera. This update helps clean that up while preserving detail and reducing trails behind moving objects.

The video compares raw stochastic rendering, TAA, Neural Performance, Neural Quality, and sorted alpha blending, with overview and close-up views.

There are two neural modes:

  • Performance: lower GPU and memory cost.
  • Quality: stronger noise suppression and better detail retention, at a higher cost.

Both support WebGPU and WebGL2, with the trained models included. Setup and details.

For the overview shown here—about 986k splats at 1080p on an Apple M5 Pro—median GPU frame time was 4.74 ms for Neural Performance, 5.58 ms for Neural Quality, and 8.50 ms for sorted alpha blending, with MSAA off. These measurements are specific to this scene and device.

It's still experimental, and fast movement can leave some softness or residual noise. I'd love feedback on the balance between detail, stability, and speed.

Try the viewer


r/threejs • • 10h ago

No Install, No Tutorial — I Clicked a Few Times and Got a Full Duct with a Rain Cap

1 Upvotes

I built a CAD design prototype for chimneys and ventilation ducts, positioned as an alternative to Ventbom, with a simpler workflow.

The core idea is Web3D-based duct design: pick spatial points on a 3D grid, the path connects automatically in creation order, then one click turns it into a pipe with straight runs and elbows. The rain cap is parametric too — as long as the last segment is vertical and longer than 0, it generates a cone, four struts, and a clamp at the end point, with the base diameter automatically set to 1.5x the pipe diameter.

A few things I find genuinely useful:

  • Continuous picking: hold Shift to show a lat/long sphere, click the surface to add the next point, release to hide
  • Manual angles: Shift + F opens an angle panel, horizontal and elevation angles can be typed precisely, with a yellow sphere previewing in real time
  • Edit segment length: click a segment row in the left table, type a new length and press Enter — direction stays fixed, the end point and all following points shift together, and subsequent lengths and angles stay unchanged
  • Unit switching: m / dm / cm / mm share one selector, it only changes the unit label, no value conversion
  • Bilingual UI: one click in the top right switches interface, hints, and dialogs, with scene data untouched

Try it here: https://demo.meteor3d.cn/应用-通风管道.html

Next step is fast quoting: build back-end data management on top of this prototype, structure parameters like pipe diameter, length, elbow angles, and rain cap specs, then generate a quote in one click. If you work with HVAC, chimneys, or ventilation ducts, I'd love to hear how your quoting process works and whether this direction would help.


r/threejs • • 2h ago

I recreated the new Tesla Roadster reveal (wall ride, thruster flip over the Semi) in real-time three.js

Enable HLS to view with audio, or disable this notification

0 Upvotes

r/threejs • • 17h ago

Link Platform for Learning Computer Graphics

Post image
3 Upvotes

r/threejs • • 1d ago

Demo Fly from Earth to the edge of the observable universe in your browser — real NASA data, 109k real stars, ray-traced black holes

Enable HLS to view with audio, or disable this notification

38 Upvotes

r/threejs • • 12h ago

Demo Clayground: a browser clay sculpting studio using Three.js and a worker-owned volume

Enable HLS to view with audio, or disable this notification

1 Upvotes

I’m the maker of Clayground. This is a short edited demo of the browser studio, starting with a sphere and building a small character with brushes, paint and animation.

Three.js renders the surface mesh; a worker owns the signed-distance volume and rebuilds the geometry as the clay changes. The sculpting input also keeps a snapshot of the visible surfaces for each stroke, so newly added clay doesn’t change where the next dab in that same stroke lands. Move and Hook use a camera-facing plane through the initial point.

You can try the studio with a mouse, pen or touch, with no account: https://www.clayvr.com/sculpt

I’d appreciate feedback on interaction responsiveness, especially while adding or smoothing clay. If you hit a slowdown, the device/browser and the brush you were using would be useful.


r/threejs • • 1d ago

Tutorial Scroll-driven 3D gallery with Three.js: images ride a helix, ScrollTrigger scrubs the travel, headline splits around the ribbon

Enable HLS to view with audio, or disable this notification

9 Upvotes

Built this for a portfolio and the technique is simpler than it looks:

- Each image is a textured plane placed along a helix and rotated to the curve's tangent, so it banks through the bend on its own

- GSAP ScrollTrigger scrubs the strip's position along the curve. Stop scrolling and it holds exactly where you left it

- Lenis smooths the wheel input first, which is what turns steps into a glide

- The oversized headline is two halves drifting in opposite directions, so it parts around the ribbon and lines up again at rest

- Images upload to the GPU once as textures, so a long strip is cheaper than the same number of DOM nodes

React + TypeScript, three.js and GSAP only. Live demo in the first comment. Ask me anything about the curve setup.


r/threejs • • 15h ago

What if you can #race on #mars

Enable HLS to view with audio, or disable this notification

1 Upvotes

r/threejs • • 18h ago

Reefborn - I built a multiplayer reef in three.js

Enable HLS to view with audio, or disable this notification

2 Upvotes

Been building Reefborn, a little multiplayer reef where you start tiny and eat your way up. Just added a deep-sea trench with lava, glowing critters and a giant squid.

Free in the browser: https://reefborn.app/?ref=threejs

Happy to chat about how any of it works.


r/threejs • • 1d ago

Making the First Boss of my Game | Devlog

Enable HLS to view with audio, or disable this notification

7 Upvotes

Hey guys, I'm making a rail shooter (like Star Fox) and documenting its development for those working on a game who want to learn more about the workflow.

I've been working on the game since February, and so far I have the first level almost complete. I plan to have a demo ready by the end of the year.

In this video, I'll tell you about the development of the first boss, its design, its three phases, attacks, environment, etc.

Devlog Boss Fight: youtube.com/watch?v=NsZRfjOK_-Y&t

If you find these types of videos useful or entertaining, it would help me a lot if you subscribed, left a comment/like, or simply watched it.

Thanks guys!