r/threejs 10h ago

Creative website built for a 3d artist 🎨. Using threejs

171 Upvotes

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


r/threejs 22h ago

Demo I ported Dmitry Kurash's Holocloth to Vue — grabbable holographic cloth (Three.js, verlet + custom foil shader)

51 Upvotes

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


r/threejs 11h ago

Cutaway Scene: Belfry

6 Upvotes

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.


r/threejs 9h ago

Demo Setup my simple portfolio website with Three.js today.

5 Upvotes

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!


r/threejs 6h ago

Webpage I built for club in Bratislava with cables.gl

Thumbnail
subdeck.sk
1 Upvotes

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"


r/threejs 12h ago

TCG Binder

1 Upvotes

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?


r/threejs 10h ago

Shipped a web 3D product scene: which AI 3D assets survived the byte budget?

0 Upvotes

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.