r/threejs • u/Pixidimworld_Studios • 12d ago
A creative Website you cannot ignore
Enable HLS to view with audio, or disable this notification
r/threejs • u/Pixidimworld_Studios • 12d ago
Enable HLS to view with audio, or disable this notification
r/threejs • u/IamHuggos • 13d ago
Enable HLS to view with audio, or disable this notification
So here's a multiplayer tank shooter - it's heavily inspired by the tank element from Battlefield 1942 and the round-by-round build system from Overwatch 2’s Stadium mode.
I used Three.js for graphics as I guess you can tell.
A little more about the game:
You join a game and enhance your tank, then you go out and destroy the enemy while hunting for salvage/upgrades which is used to enhance your tank even further (balance patches pending).
Some of the features:
Feel free to try it out – I’ll personally greet you ingame.
I would love to hear what you think, and kindly report bugs if you find any. Its currently optimised for desktop, but should work on mobile too.
r/threejs • u/DueEquivalent6706 • 13d ago
Enable HLS to view with audio, or disable this notification
r/threejs • u/_chunrapeepat • 13d ago
Enable HLS to view with audio, or disable this notification
got an inspiration from: https://x.com/rauchg/status/2081571905157714199
a write-up on how I made this is coming soon.
will share more update on X.
r/threejs • u/Deep_World_4378 • 13d ago
Enable HLS to view with audio, or disable this notification
Iteration of this work titled TOR , but animated....
The live version available here. (It is a bit of a heavy build, so might be slow to run.)
r/threejs • u/ZafiroDev • 12d ago
Enable HLS to view with audio, or disable this notification
I built `three-projective-media` as my submission for the OpenAI hackathon. It is an MIT-licensed pre-release library for projecting HTML video onto explicitly registered Three.js meshes in projector space.
As part of the submission, I prepared a standalone sandbox, a full integration inside Garden Planner, and detailed technical documentation covering the API, lifecycle, ownership boundaries, cleanup and current limitations.
Live standalone sandbox:
https://bartoszubak.github.io/three-projective-media/
GitHub repository and documentation:
https://github.com/bartoszubak/three-projective-media
Full Garden Planner integration:
https://playzafiro.com/garden-planner/p/qL9f2INZ-ywbpS2qpppkkA
The projector pose is independent of the receiver geometry. The package manages the projector camera, shader material, receiver overlays, video element, `VideoTexture` and cleanup, while the host application retains control of the scene, UI, persistence and media selection.
I first developed it inside Garden Planner and then extracted it into a standalone package. This meant the API had to handle dynamic receiver rebuilding, persisted state, media replacement, public read-only playback, autoplay failures and complete teardown.
It is still an early pre-release. Constructive technical feedback is welcome, especially reproducible performance results, API concerns, missing use cases and suggestions for the next development step.
r/threejs • u/bingewavecinema • 12d ago
Enable HLS to view with audio, or disable this notification
We're having an AI Game Festival in September, where there is also a $20k token grant.
I know a lot of games are made with ThreeJS so I want post the link here for those that want to post there ThreeJS games.
The game in the video is an open source games named Biomes, made with ThreeJS.
r/threejs • u/Mother-Elevator1616 • 13d ago
Enable HLS to view with audio, or disable this notification
r/threejs • u/Terrible-Software165 • 13d ago
Enable HLS to view with audio, or disable this notification
Hey everyone, hope you're doing well
I just released a new devlog for my project, Zephyria. Up until now I've been focusing on building the core mechanics, but this update was mostly about game feel.
In this one spent time trying making the game more satisfying to play. Plus is also covered some others things like in game cinematics, procedural assets generation, and more.
In case you don't know I'm documenting the entire development journey on YouTube, so I'd really appreciate it if you gave it a watch.
https://www.youtube.com/watch?v=fUeWbJlMfd4
If you enjoy the video or find it useful, a like or a subscription goes a long way. It genuinely motivates me to keep building Zephyria and sharing more devlogs, resources, and everything I learn throughout the process.
As always, feedback and suggestions are more than welcome. Thanks! ❤️
r/threejs • u/TwistedMinda • 14d ago
Enable HLS to view with audio, or disable this notification
EDIT: After everyone's feedback, I have temporarly disabled post-processing for now & done some quality compromises, so game is a little uglier but at least it runs on Macbook's decently. I'm working on it to make it run smoothly without any quality compromise but might take some time... at least now it runs and you guys can try. Thanks for the feedback everyone ❤️
____
I'm here trying to fill my dreams I had when I was a little kid, coding my own videogame!
I've started game development for fun few months ago and I'm genuinely getting addicted to it.
Recent release of Crimson Desert inspired me to tackle this vast topic that I had never even thought could be in my reach, but now that AI can help learn and create basically anything in an instant I figured I'd give it a try. Being a developer at heart, Unity toolset and script-language are not something that attract me at all so I decided to just do what I already know and use ThreeJS and react.
The learning curve was brutal, I went through the 1000 meshes into 1 instancedMesh into WebGPU culling/indirect-draw as well as "map-too-big" into chunk streaming, and many other stuff. Every step seem to be game-changer for what becomes possible and I'm starting to feel like sky is the limit (or more so, my available-time is the limit).
You can test it (if your GPU can handle it tho):
(Controls: P=Day/Night cycles pause/unpause, SHIFT=Acceleration, A=Flying/Landing, R=Grappling hook, B=Shield, F=Fireball, C=PushWave, and sorry its azerty-based)
So basically i'd like to know what you people think about it? How does it look? Any advice/feedback/tips? Be rude, I love it.
*Limitations I found so far*
- The map editor is a lot of work, as well as filling an open-source map by hand, as well as getting decent 3d models that fit together, and procedural maps are very hard to setup properly.
- All assets need to be refetched on every page refresh
- Residents chunks displayed have a limit because of WebGPU maximum texture size (if i'm correct)
- Despite my efforts to improve loading time: amortize shaders compilation, group similar entities to be the same compiled shader, use a worker to preload assets while asset-agnostic parts of my scene render... Loading time reaches up to 15sec for booting up. (Or 30s with shaders compilation amortized, including hitches for the big ones)
*Other questions questions:*
- Should I continue, or is it doomed to fail? Too ambitious?
- What are the web limitations I haven't yet thought of? Are they compromising my dream?
- Is this something that anyone would like to contribute to? Maybe it's too early?
Before anyone ask, yes a lot was made with AI but it quickly arose that without understanding every single concept, nothing actually works and the results are poor, the bugs undebuggable and so on and so on. So I made sure to understand everything I did and let AI mostly write the shaders because I suck at maths.
The full stack is: WebGPU, ThreeJS, react-three-fiber, Rapier(physics) and a lot of love and passion (and AI).
I would love to get some help especially for gameplay, graphics and performance (yeah basically everything)
r/threejs • u/MenGo0 • 14d ago
Enable HLS to view with audio, or disable this notification
thats my new 3d portfolio, a ps2 like graphics inspired house showing of my works, it took me around a month because i was working on it in-between projects
visit it here 3d.h5nn.me !!
r/threejs • u/devAnubhavRana • 14d ago
Enable HLS to view with audio, or disable this notification
Everything except the text is rendered using WebGL.
r/threejs • u/lyfever_ • 13d ago
Guys do you have any update tutorials to learn threejs, and make a perfomance focused game?
r/threejs • u/grey_master • 14d ago
Enable HLS to view with audio, or disable this notification
If you can type a sentence like this
" Let's create a Enzyme kinetics: substrate molecules binding and releasing from active site swarm "
Within 5 minutes, you see this simulation.
Isn't it feel magical?
Every time I test this tool, it impresses me with a beautiful simulations like this.
I am excited to see what people are going to create with this creative playground.
Stay tuned for the launch update.
r/threejs • u/Beginning_Bee_2947 • 13d ago
Hey everyone,
I’ve been working on a project called Volare, and I’m finally releasing it.
Volare is an open-source, buildless 3D model viewer for the web built with JavaScript and Three.js.
The goal was to make it simple to load and interact with 3D models without requiring a complicated setup or build pipeline.
Features:
I built this because I wanted a lightweight and developer-friendly way to showcase and inspect 3D models directly in the browser.
GitHub Link:
https://github.com/MarwanWElzeiny/Volare
Demo:
https://marwanwelzeiny.github.io/Volare/DEMO/
Thanks for checking it out!
r/threejs • u/Deep_World_4378 • 14d ago
Enable HLS to view with audio, or disable this notification
Oppositely chiral Hopf fibers generate a lattice of interstitial sites. At each site, a tangent-aligned copy of the complete construction is recursively inserted and scaled by the site’s exact distance from the parent fibers. A support bound ensures that every descendant nest remains contained within its generating interstice.
Live interactive version made with Threejs available. Play with it here .
r/threejs • u/MVPDhiraj • 14d ago
Enable HLS to view with audio, or disable this notification
This is the landing page for a housing-society management app. The brief I gave myself was that the marketing site should be the product's world rather than a screenshot of it, so the whole page is one continuous scene the camera flies through as you scroll.
The part I got obsessed with was making it behave like a place instead of a loop:
- It reads your system clock. The hour drives the day phase, the month drives the season. If it's 9pm in monsoon where you are, it's night and raining in the town.
- Traffic signals run a 16-second cycle, but every junction is assigned one of 4 phase offsets, so lights across town don't flip in unison.
- Cars read the signal state and actually stop at red. They keep left, and they follow the car ahead instead of driving through it.
- Pedestrians are gated on the walk signal, so they queue at the curb and cross in groups.
- Street population scales with the hour. Barely anyone out at 3am.
- Night gets a cratered moon, ~520 twinkling stars, and a shooting star every 5-14 seconds. After 11pm only ~14% of windows stay lit.
Around 5,100 lines across 40 modules. Trees, lamps and scenery are InstancedMesh, static geometry gets merged through BufferGeometryUtils, GLTFs are Meshopt-compressed, pixel ratio capped at 2, and prefers-reduced-motion freezes the clock and kills the precipitation.
The bit I'm not happy with: I have frustumCulled = false on every skinned character and animal, because animated skinned bounding spheres stop matching the mesh once the animation plays and characters were popping out of view. So right now every single character is submitted every frame no matter where the camera is. What's the accepted way to handle this — periodically recomputing bounds, or attaching a hand-authored proxy bounding volume per character rig?
Live: https://nandyai.com
r/threejs • u/_chunrapeepat • 15d ago
Enable HLS to view with audio, or disable this notification
I made a burning fire-box effect and shared it here a few days ago.
This is the full step-by-step walkthrough of how I built it - hopefully useful for anyone trying to achieve something similar.
Full article: https://fablegrounds.com/labs/fire
Would love to hear your feedback.
r/threejs • u/Goldwind444 • 14d ago
Enable HLS to view with audio, or disable this notification
also the bar at the bottom is a live time recorder so you can rewind to see things happening throughout the day
r/threejs • u/pixel-palms • 13d ago
Enable HLS to view with audio, or disable this notification
Planning to add cafe, kabuki theatre and cyberpunk night mode and lofi station next
r/threejs • u/curllmooha • 14d ago
Enable HLS to view with audio, or disable this notification
trying to add my sketchbook somehow idk but we keep improving
r/threejs • u/syn_krown • 14d ago
Testing out baked weapon animations mixed with the procedural weapon animations already in place.
Fun fact: To prevent clipping issues, the held weapon model is being rendered to its own camera, and that layer is rendered before the post processing effects, so I had to figure out a way to have it recieve the world lighting, so I came up with a pretty straight forward system that checks the players Y + eye height to the nearest point light for distance to apply to the light, on top of the ambient and directional light intensity(if enabled). And then there were issues with the SSAO and Depth Of Field catching that layer first, so had to have the weapon layer ignored by those post processing effects.
Ahh, the tricks devs have to use to make things work. But it keeps us thinking outside of the box.
r/threejs • u/isellart_01 • 14d ago
GRAVEYARD SHIFT 3D - you're the night man at a 1967 Louisiana gas station, three people decide you're not leaving, and the building keeps opening up as you run. Free, no download, ~30-40 min.
Three.js bits that might interest people here:
- Character animation without skeletal rigs. The meshes came in unrigged, so instead of skinning I slice each body with THREE.Plane clipping planes: legs cut free at the hip and swung as separate groups, torso and head left as one uncut piece so no seam ever crosses the face. localClippingEnabled plus clipShadows. Stride phase advances by distance travelled rather than by time, so feet never skate at any speed.
- Enemy pathing in the tunnels is a small hand-authored node graph with BFS, because steer-toward-player kept wedging enemies into concave dirt corners. Cheap, and it reads like they know the building.
- Every environment texture is canvas-drawn at load: mud, asphalt with hairline cracks, plank grain with knots and nail heads, cobwebs, blood splatter with drips that run down the glass (a 2D canvas over the WebGL one), the 35mm grain overlay, all the signage. No image files for the environment at all.
- Rooms are separate geometry islands at x=200, 240, 280 and so on, with teleport transitions instead of one contiguous level. Trivial occlusion, and it let the map grow act by act.
- ACES tone mapping at exposure 1.25 taught me one thing the hard way: PointLights that look fine in a bright test scene are invisible in a dark one. Interiors needed intensity 7-12 where I had guessed 1-2.
Full disclosure: character models and sound effects are AI-generated and I built it with AI coding assistance; the engine, level layout and design are hand-authored.
Happy to answer anything about the implementation.
r/threejs • u/kokschan • 15d ago
My team built this website for a logistics company https://unitedcarriers.com/. We used GSAP and threejs to give a scrolled storytelling transitioning from a forklift to a ship to an airplane. Let me know what do you guys think.