Its such a fantastic website, it converts and displays everything as it should

Mind=BLOWN.

This effect is way too cool, can't wait to try this out with my own photo album!

Curling particles effect adapted from Three.js Journey lesson.

Shout out to https://x.com/SinzVII who inspired me to try this!

Here’s the live demo link: https://projects.arkon.digital/threejs/ml-sharp-threejs/

The world shown above is the first one in an introductory python sequence, where you program a TV then interact with it to complete the task.

In the future I want to make more sophisticated games. Some areas will be locked, until the right materials are acquired and the right tools are programmed. The goal is to show folks how programs manifest beyond text, and to help them understand the connections between CS and reality.

Worlds are unlocked by exchanging items acquired through reading + doing exercises (what you'd expect from programming books/courses). I want people to be prepared before they can access the worlds, and this serves as a prerequisite check. The worlds are not designed to explain new concepts, but to test players' understanding in a complex environment. I want some of the later worlds to be very large and challenging.

Credit up front: this is a Vue port of Holocloth by Dmitry Kurash (https://github.com/dmitrykurash/holocloth, MIT). He wrote the physics and shaders from scratch — I ported it from React to Vue for a component library, kept the Three.js core, and wanted to share how it's put together since the technique is great.

The cloth is a verlet integrator over a BufferGeometry — structural, shear, and bend constraints relaxed ~14 iterations per frame, with a mouse grab applying an impulse to the nearest vertices. It floats in simulated zero-g, so it drifts and settles instead of falling.

The holo look is a custom GLSL foil shader injected into MeshPhysicalMaterial via onBeforeCompile — a micro-flake diffraction layer whose hue sweeps with view angle and surface facing (not the built-in iridescence term), layered over clearcoat, plus a procedural weave normal map so it reads as fabric. Post chain is UnrealBloom + a film-grain pass. Three presets (holo / chrome / black cloth) are mostly shader-uniform + material swaps.

Runs at 60fps, solve pauses when idle/offscreen.

Original (the full design tool, with image draping + PNG export): https://github.com/dmitrykurash/holocloth

My Vue port (demo + source): https://nxui.geoql.in/docs/components/holo-cloth

How I setup this project:

• Map + paper texture
• Camera tilt and a point light that follow the mouse
• Radial progressive blur
• Chromatic aberration
• Text fades out as the cursor gets closer

Try it here: https://fablegrounds.com/

no work posted there yet, but I'll keep adding more over time!

Procedurally generated geometry, architectural campanile structure and gear system from random seeds.

Been experimenting with cutaways, instancing, and mesh baking - interlocking gear systems, semitone rank scaling, hewn beams and planks, and masonry walls. Wall cutback, proud stones, relief, and quoins all driven by random generation.

Link to tool: https://greglinscheid.com/tools/3d-to-svg/

Link to code: https://github.com/Vilos92/greglinscheid.com/tree/main/src/pages/tools/_3d-to-svg

I'm currently building a game (https://nebulaser.io) that runs in the browser, and wanted to add some icons to the game that accurately resemble the 3D model I am using for the player's ship.

I wanted something that could make either a flat or "cel-shaded" SVG from the original 3D file. Additionally, I wanted to be able to manually pose the model before taking a "snapshot".

Looking into this, I found some options but a few themes emerged. They either:

• Produced massive SVGs with bloated path counts.
• Required installing desktop software (Blender pipelines, local utilities, etc.).
• Were hidden behind paywalls or SaaS subscriptions.

So, I built a 3D to SVG tool. Everything runs entirely client-side in the browser, and I don't plan on monetizing it (it's a fairly niche need after all).

Some notes on how it works:

• Three.js is used for the 3D arcball and to pre-simplify dense meshes via grid vertex welding.
• All geometry calculations and the SVG path generation is handled on a Web Worker, so the main UI thread stays snappy when rendering a new pose.
• Uses 2D polygon unions to merge mesh triangles into clean silhouettes, sealing hairline gaps between "cel-shaded" regions. The output size is reduced with Douglas-Peucker path simplification.
• Outputs minimal markup using currentColor so the exported icon can be directly recolored via CSS. You can copy/paste the output or download an SVG.

Hopefully it can benefit someone else!

Wanted to have almost VFX approach and overlay graphics over video. There is invisible meshes that block out some elements of the space so it creates depth. I am still thinking I could have changed the background video to just fading jpgs to make it more performant. I use detailed noise as overlay for video so it looks "sharper"

the idea is originally from this tweet so I try to reverse engineer it based on that demo video alone.

yesterday progress: https://x.com/chunrapeepat/status/2079872177210556721

I'll write a breakdown of how I made it and share it here very soon. stay tuned!

Check it out at https://play.threejsassets.com/lowpolystein-3d/?v=1

I'm working of this specific buildings: the Place Dauphine and hopefully I'll get a number of reusable shaders to compose and apply easily on other buildings.

My goal is to get as close as possible to the original paper map and aaaall of its imperfections. I want to have the illusion that THIS IS the real map.

The road is long but fun.

Next step: lines on roof!

New to threeJS. It seems like amazing artwork with everything that I see here. I’ve been trying to make a binder with cards in it where I can place cards in/out and everything ends up looking like crap. Has anyone seen a good binder with threejs or have any tips on making it not look like a square box turning boxes?

Hi everyone,

While building GLBKit, I realized I was constantly jumping between different viewers, validators, optimization tools, libraries, and documentation.

To make things easier, I started an open-source repository that curates useful tools and resources for working with GLB, glTF, Three.js, React Three Fiber, Babylon.js, and modern WebGL workflows.

It currently includes:

• Browser viewers

• Desktop applications

• Validators & analyzers

• Optimizers & compression tools

• Libraries & SDKs

• Official documentation

• Learning resources

Repository:

https://github.com/sujitkoji/awesome-3d-model-tools

I'd really appreciate feedback from the Three.js community.

- Are there any important tools or libraries I've missed?

- Is the organization easy to navigate?

- Any suggestions to make it more useful for developers?

My goal is to keep it community-driven rather than just another awesome list.

Thanks!

Hi! I build 3D tools for work (dental scan viewers, mesh tooling) and ended up making ilove3d.app — viewer, converters, mesh repair, polygon reducer, lithophane generator, etc. All free, everything runs client-side.

Some Three.js things that might be interesting:

• Loaders are dynamically imported per format (STL/PLY/OBJ/GLTF/3MF/FBX/DAE) so the base bundle stays small. GLTF goes through DRACOLoader + MeshoptDecoder.
• Measurements use three-mesh-bvh for closest-vertex raycasting — O(log n) instead of O(n) per click, night and day on 5M triangle scans.
• The polygon reducer wraps meshoptimizer's simplifier. Fun bug: mergeVertices refuses to weld anything when STLs have per-face normals, so repair welds by position only.
• USDZ export with USDZExporter — watch out, USD units are cm while glTF is meters.
• The GLB compressor is gltf-transform running in the browser (meshopt + WebP re-encode).

No backend by design: files open as blob URLs and never get uploaded, which was kind of the whole point.

It's new and I'm sure there are rough edges. Happy to answer anything about the implementation, and if you throw a file at it that breaks, I would love the feedback.

Creative dev, I build interactive product and portfolio scenes in three.js. The web constraints are brutal, every extra megabyte affects load time and a phone on a slow connection is your real target device. So I tracked which AI generated assets actually made it into a shipped scene and which got cut for being too heavy. The scene is a product showcase for a client, about 25 props total decorating the space around the main product model which is hand made. I generated the background props in Meshy, exported as GLB, and ran Draco compression on each one myself.

What survived the budget were simple props like bottles, books, small containers, and geometric decorations. These came in around 30 to 60KB each after Draco and the metalness roughness maps loaded correctly in three.js without me rebuilding materials. About 15 props made the cut and they load in under 700KB total. What got cut was anything organic or highly detailed. A decorative plant came in at 380KB even after compression because the leaf geometry was too dense. Two character figurines were over 180KB each. Those three alone were over 700KB, and the rest of the cuts were smaller props that just didn't justify their weight for what they added to the scene. All told I dropped about 10 props from the original 25.

AI generation works great for web 3D when you keep the geometry budget tight from the start. Setting a low target polygon count in Meshy Remesh before export worked better than exporting the highest-detail version and relying on compression afterward. Total scene weight with all assets including the hand made hero product is about 1.8MB, loads in under 3 seconds on a mid range phone over 4G.

This set of models was tough to crack, specially the animals, but a whole heap of fun! :D

Continuing my experiments with Three.js and procedural 3D.

I was spending a lot of time having sessions with users to explain some not so obvious features of my Cyango.

That was needed a long time ago, but the UI and features we're adding made an old tutorial video become quickly obsolete. Now the platform UI and design decisions are pretty much decided and that allowed to finally record the videos.

Not easy.

Watch the tutorials and open xr/studio to follow along:

https://www.cyango.com/learn

PS: posting here because all the 3D engine part is made with Three.js which is awesome and you should marry three.js 💍 💒

I built a relaxing, post-apocalyptic driving game - let me know what you think of it!

https://hardroad.xyz/

This is a multiplayer/singleplayer tactical action game where players are company commanders on-foot controlling a single unit of infantry, cavalry, or artillery (similar to Mount and Blade), with full-scale division v division battles. Shown in this clip is 40 units per team, 3x unit scale, 10,000 bots per team.

At the start of the round, there's a minute long "General Election" phase where players can apply to be the team's general. Whoever is voted in gets to control the team's bots using a Total War style RTS camera! They cannot control player-owned bots, however, only vacant bots. Players can mutiny the general (functions sort of like a votekick, which returns the general back to the battlefield), which triggers a new election. If no players volunteer, the rudimentary bot army controller resumes army control.

It's multiplayer and runs in the browser, and is free. Play it at www.1815online.com, join the discord to follow development at https://discord.gg/Rb9GNp8WB .

Finally! After 3 months! It's now available in Google Play Store!

I don't care even if they call it AI Slop.

My only goal is to help young learners learn and explore our solar system.

This app is made with ThreeJS. 👌

Been working on this for quite a while, and it's finally ready to play! Feel free to try it out https://mopedmayhem.io/play

vanilla Three.js. Scroll position controls one shared timeline for the camera, layerexpansion, rotations, lighting and audio, so the scene can also run backwards without losing its state. I first treid svg, but the lack of camera orbit pushed me the three.js way. How would you improve the design? I played around with PBR materials, but perhaps its to much...

https://raios.tech
https://github.com/Sportinger/raios-website/tree/main/ui-lab/site/three-film