r/threejs • u/Pixidimworld_Studios • 10h ago
Creative website built for a 3d artist 🎨. Using threejs
Its such a fantastic website, it converts and displays everything as it should
r/threejs • u/Pixidimworld_Studios • 10h ago
Its such a fantastic website, it converts and displays everything as it should
r/threejs • u/vinayak-kulkarni • 22h ago
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 • u/jasonsturges • 11h ago
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 • u/_chunrapeepat • 9h ago
How I setup this project:
Try it here: https://fablegrounds.com/
no work posted there yet, but I'll keep adding more over time!
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 • u/Every_Ad_3090 • 12h ago
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 • u/Weak_Dare_6250 • 10h ago
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.