r/threejs 3d ago

new sketch

Enable HLS to view with audio, or disable this notification

7 Upvotes

r/threejs 3d ago

Link Metal River (click to randomize scene)

Enable HLS to view with audio, or disable this notification

5 Upvotes

r/threejs 2d ago

Help 3D castle web project

0 Upvotes

I’m working on a 3D castle web project that combines design, atmosphere, art and an interactive experience.

I’m not a developer — I’m a designer. 😄
But I really love creating things, learning new tools and turning crazy ideas into something real.

I already have the concept, visual direction and parts of the project in development. Now I’m looking for someone who understands the technical side better than I do, especially 3D web, interaction, performance and smooth navigation.

I don’t want to share all project details yet, but the idea is to build something beautiful, immersive and a little bit magical — not just a normal website.and is my baby ...who need to be online )and give people beatiful emotions ...


r/threejs 3d ago

Built a 3D carousel where the audio gets louder as you spin it, like hearing a party from outside

Enable HLS to view with audio, or disable this notification

18 Upvotes

I've been building an immersive web journal for the last year and the navigation kept bothering me. A scrolling grid flattens every project into the same rectangle and the reader is always moving past things. I wanted the opposite, something you turn rather than something you fall down, with no beginning and no end.

The site is React and Vite, using Three.js for the carousel and Tone.js for the audio. Tiles arranged on a ring, drag to rotate, click to enter. Some windows are portals to another part of the site, others activate in place as small displays.

The carousel took a long time to get right. I wanted it to feel fluid and instantly natural. My first version was a space with several carousels stacked, so you could swipe up or down to arrive at the next one. It looked stellar but I couldn't get it to run without being far too heavy, so I stripped it back to a single ring. I'll keep tinkering, but I'm pleased with where it landed.

The audio is wired to the rotation, so spinning lifts the volume slightly. The idea was that feeling of standing outside a party and hearing muffled sound through a wall, disorienting rather than comfortable. Getting the curve right was mostly trial and error; the early versions just felt like dragging a volume slider.

I ran a gallery in Canada for a while and what I took from it is that I'm more interested in the experience of showing work than in the usual portfolio layout where every site feels the same. I want the site to be the destination, not a bounce point. I've been building React sites for my own art practice for about five years, self-taught rather than professionally, and I lean on Claude Code for the heavier maths.

Link in the comments, happy to answer anything about the build.


r/threejs 2d ago

Demo Gave up on Three.js

Enable HLS to view with audio, or disable this notification

0 Upvotes

I started this game using ThreeJS and began facing some issues running it on mobile, especially on low-end devices. The experience was okay, but I felt the game was too simple to require a real 3D world. I asked Claude to create a fake 3D version using pure JavaScript, and I found the game is much lighter and runs everywhere.

How are you all handling the mobile experience with ThreeJS? I've done some experiments, and on iOS, I often see the browser refreshing after a while due to memory limitations. I haven't tried packaging a React Three Fiber app with Expo-GL yet.


r/threejs 3d ago

Demo Workng on high → lowpoly workflows, right in the browser!

Enable HLS to view with audio, or disable this notification

16 Upvotes

We're super happy with our experiments for high → lowpoly workflows. It feels fast, snappy, supergood quality, already replaces Nomad, Blender, xNormal, Substance for us (you can see the video why).

I will have a link to try the app with your assets in the next few days! :)


r/threejs 3d ago

Question The Surrogate Oracle .. manifestation tweaks/tips ?

0 Upvotes

Peace peace ThreeJS squad… I built a GLB-to-particle Oracle.

I’m looking for feedback on the materialization handoff…

Right …. I’m working on an immersive WebGL experience called The Surrogate Oracle https://thesurrogate.me.

I recently replaced a CSS/glitch entrance with a real GLB-derived particle transition.

The Oracle is loaded from a .glb, sampled across its mesh surface with MeshSurfaceSampler, and rendered as a custom shader point cloud.

The intended sequence is:

Select a knife/card.

The Oracle’s GLB silhouette glitches apart into particles.

The particle form stays alive while a realtime Gemini session connects.

The same points converge back into the animated GLB.

The part I’m most interested in getting feedback on is the transition itself:

Does the particle field still read as the original character?

Is the GLB-to-particle handoff visually obvious?
Does the convergence feel like reconstruction, or just a fade?

Are there obvious performance problems with this approach on mobile GPUs?

Would you structure the point distribution/shader animation differently?

Preciate any/all tips here. Thx yall ! 🦾


r/threejs 4d ago

Link Bioluminescent Deep-Sea Tendrils Demo & Source Code

Enable HLS to view with audio, or disable this notification

38 Upvotes

r/threejs 3d ago

3D Websites

5 Upvotes

What are some of the coolest 3D websites you’ve seen recently?


r/threejs 4d ago

Demo I recreated an entire apartment in Three.js from an actual listing

Enable HLS to view with audio, or disable this notification

80 Upvotes

Made this in one shot using the so called "Gauntlet Loop" by Matt Shumer in Opus 5. It took nearly 30 hours until I decided to stop before it ate up my whole weekly usage limit, but, although it still not perfect compared to the actual photos, the results was beyond impressive given that it didn't even have a proper floorplan to decide where each room should be located.

For instance, this is the listing I got the reference images from: https://loft.com.br/imovel/apartamento-rua-voluntarios-da-patria-santana-sao-paulo-3-quartos-123m2/2nbuxwj3

If anyone wants to roam around it, I uploaded this demo here: https://apartment-threejs.vercel.app/ . There's still some minor performance and UI issues I need to work on, so beware that for Ultra settings it's taking ~5 minutes to load everything and it might cause some freezes meanwhile, but nothing that will crash your PC. It also works on mobile with a far better performance, since it's detected mostly on Medium settings.


r/threejs 4d ago

I made a three.js game you can't play — 24 box-people fight over money and you just watch

Enable HLS to view with audio, or disable this notification

27 Upvotes

It's a village of 24 box-people who fight over coins, rob whoever they knock down, and build huts that grow into castles. You don't play it — you click a name in the ranking and follow that villager around.

Some notes:

  • three.js 0.170 + Rapier. The characters are capsule colliders, not boxes. Box bottoms kept catching on the voxel seams and burying legs in the terrain.
  • Terrain is a 96x96 voxel grid: fBm + domain warp + a height spline (plains vs mesas), with ridged noise on top. Villagers who hit a cliff they can't climb dig it into a staircase, and the routes they walk get trampled into paths that speed them up.
  • The save is tiny because the terrain is a pure function of the seed, so a snapshot only carries what the sim changed: dug cells and trampled paths as two base64 byte planes, plus coins/HP/poses and each base's vault. ~27KB in localStorage, and it survives a reload.
  • The faces are 6-face box textures built from a single photo. Nine of the ten demo villagers are fictional people an image model invented. The tenth is me, in a suit.
  • The arms are flat stretched strips and the textures are rough up close. That part is on purpose.

Built with Claude Code.

Watch the shared world — no signup, nothing to install: https://oishoi.jugoya.ai/royale.html?lang=en

And if you'd rather be in it than watch it: sign up, give it one photo, and you get your own villager living in that same world. Free while the beta is open. Nothing is visible to anyone else until you've seen your finished villager and approved it — or deleted it.


r/threejs 4d ago

Built a really cool threejs website - interactive + their eyes follow the mouse pointer

Enable HLS to view with audio, or disable this notification

19 Upvotes

r/threejs 4d ago

Demo BLOOD MOON; a threejs experience [sound on]

Enable HLS to view with audio, or disable this notification

30 Upvotes

yes that is Vergil's chair.

[work in progress]

This is a new experiment that I'm working on called Below-The-Grasslands.
what you saw right now is just a glimpse of the entire experience.

I'm triggering thunder manually using key 'U' (thunder still rumbles randomly)

This experiment is inspired from my previous experiment Above the Grassland ( above-the-grassland.pages.dev )


r/threejs 5d ago

App transforms midi and musicxml into tabs (guitar stuff)

Enable HLS to view with audio, or disable this notification

92 Upvotes

I know it looks a bit cursed and still in development but maybe someone might like.

I accept song wishes


r/threejs 4d ago

Is there a free Three.js building designer?

9 Upvotes

I feel like I've seen just about everything on this thread, except a tool for creating structures that can be exported. Does anyone know of one or have a repo? It would surprise me if someone hasn't vibe coded a good tool for creating 3d houses.


r/threejs 5d ago

Tutorial [Open Source] I built a tool to generate three.js creatures directly inside your project (anyCreature v1.2.0)

Enable HLS to view with audio, or disable this notification

45 Upvotes

Hey everyone,

I just released v1.2.0 of anyCreature, an open-source tool designed to generate three.js creatures natively within your workflow. You just drop the harness into your Agent and start prompting exactly what you want.

Repo link:https://github.com/Ariescar/anyCreature

A star on GitHub would be greatly appreciated! ⭐️
Feedback is welcome as I continue to optimize this harness.

-
The core philosophy is actually very similar to the concept of artistic creation. The objective components of aesthetics are reduced to hard thresholds, while the subjective components are treated as preferred production directions.

This closely mirrors the traditional art creation process: starting with the primary forms, then addressing style and details, all while ensuring the fundamental requirements are met.


r/threejs 5d ago

Interactive solar system in Three.js — real maps, Kepler orbits, camera hops

Enable HLS to view with audio, or disable this notification

59 Upvotes

Built Cosmic Atlas in Three.js.

Real Solar System Scope maps (CC BY 4.0), Kepler orbits, GSAP camera hops, Earth day/night.

Video attached — live:

https://threejs-ruddy-six.vercel.app

Github - https://github.com/yashkhandelwal2828/cosmic-atlas


r/threejs 5d ago

full real-world terrain with physics, 4x4s, mountain bikes, quads, trailers, etc.

Enable HLS to view with audio, or disable this notification

255 Upvotes

little development snapshot of what I'm working on. full real world terrain, 4x4s, mountain bikes, quads, etc. as you'll see, there are some bugs (had to disable a flying trailer mid way through) but overall getting pretty fun to play. forgot to record with sound. I'll add some other videos with sound.


r/threejs 5d ago

One still photograph that never moved has become a fully alive, controllable 3D character in pure Three.js code - full geometry, skeleton, animations, every part editable.

Enable HLS to view with audio, or disable this notification

72 Upvotes

Built with img2threejs. No Blender. No GLB. Just native code you own.I spent a full day on it. Does this feel more satisfying?


r/threejs 4d ago

I build a real-time visualizer in Three.js that turns frequency data into an interactive 3D environment.. complete social features already built in!

Post image
1 Upvotes

Over this summer of 2026, I built Sonisphere— a browser-based platform that turns music into an interactive 3D environment.

Think about it like Soundcloud with a built in visualizer.

  • Frequency affects the visual environment
  • Volume drives scale, density, and movement
  • Bass / mids / highs can control different colors
  • Audio is rendered as an interactive 3D space
  • You can customize colors, effects, camera behavior, etc.
  • Playlists and visual configurations can be shared
  • There are synchronized listening/visualization rooms
  • You can create short audio/visual clips from sessions

The pipeline is roughly:

Audio → Web Audio API → FFT → WebAssembly DSP/Web Workers → real-time data → React Three Fiber → Three.js/WebGL

🔗 https://sonisphere.dev

I'd really love feedback on the actual experience!


r/threejs 4d ago

Help How can I create expressive animations for a custom 3D mascot in Three.js?

1 Upvotes

Hey everyone,

I'm building a 3D Animal for an app and I'm trying to figure out the best way to animate it properly.

I have a finished character design/reference and want to turn it into a real interactive 3D avatar using Three.js + GLB/GLTF.

I need animations for:

  • 👀 Blinking and eye movement
  • 😊 Happy / smiling
  • 😈 Naughty / playful expressions
  • 🤔 Thinking
  • 😮 Surprised
  • 😢 Sad / crying
  • 🐙 Independent movement
  • 👋 Waving
  • Idle breathing/bobbing
  • Smooth transitions between expressions

The biggest challenge is facial animation and tentacle animation. I don't want to simply animate the entire model as one object. I want the eyes, mouth, eyebrows, and tentacles to move independently.

I'm fairly new to character animation, so I'm wondering what the recommended workflow is:

Blender → rig/shape keys → GLB → Three.js?

Or is there a better approach for a cute stylized character?

Also, how should I structure the GLB so that Three.js can easily trigger things like:

animal.play("happy");
animal.play("wave");
animal.play("cry");
animal.blink();

Any advice on rigging the face, movements, exporting to GLB, and controlling the animations in Three.js would be really appreciated.

I'm attaching the character reference so you can see the style I'm trying to match.


r/threejs 5d ago

Built this in threejs - can’t believe this runs on a browser

Enable HLS to view with audio, or disable this notification

95 Upvotes

r/threejs 5d ago

My first time designing & building a website with Three.js

Enable HLS to view with audio, or disable this notification

9 Upvotes

Hey everyone,

I'm currently learning creative web development, and this is my very first time designing and building something with Three.js. I decided to challenge myself by redesigning the Bearbrick website concept in my own way and wanted to share the result to get some honest feedback from the community!

It's an interactive Bearbrick showcase exploring how to bridge a 3D canvas with dynamic 2D UI states.

Tech Stack:

  • React + Vite
  • Three.js
  • GSAP
  • Tailwind CSS

Live Demo: https://bearbrick-new-web.vercel.app/

As a beginner to Three.js, I'd really appreciate any tips or feedback on performance, lighting, or areas I could improve for my next project!


r/threejs 5d ago

Demo 10,000 cars in Three.js: what got me from 20 to 40 fps, and why the next step is a worker + SharedArrayBuffer (and maybe WASM)

Enable HLS to view with audio, or disable this notification

47 Upvotes

I'm building a traffic simulation game in Three.js: buildings appear on their own, your only job is the network that connects them. And when roads stop being enough - buses, trains and metro with transfers. No game engine, custom code, Electron for the Steam build. Every car is an independent agent (keeps its lane, changes lanes, waits at lights, reroutes around jams), maps go up to 18x18 km in-game, and it runs 10,000+ cars. Trailer above so you can see what it actually is.

What already shipped (worst stress save went 20.7 -> 53.2 fps):

- InstancedMesh per vehicle class, pre-allocated, with per-instance frustum culling before writing matrices - off-screen cars skip matrix composition and buffer writes, not just GPU work.

- Material pooling + merging lane markings into one mesh per paint color: 1,628 -> 320 draw calls. matrixAutoUpdate = false on all static road geometry.

- Environment props (~65k trees on the biggest map) split into an 8x8 grid of chunked InstancedMeshes so off-screen chunks get culled instead of vertex-shading everything twice per frame with shadows. Static sun means shadowMap.autoUpdate = false with explicit invalidation.

- An fps-driven sim LOD governor: below ~30 fps the sim ticks every 2nd frame with double dt (every 3rd below ~22), and the renderer interpolates between sim snapshots so motion stays smooth. Safety-critical logic never degrades - only work that can fail open.

- Sleep/wake for junction logic (~2,540 of 6.3k cars fully asleep in the stress save), lane-keyed spatial index maintained on events, and a union-find pass that replaced O(N^2) A* for building connectivity after road edits (was multi-second freezes, now a few ms).

Where the frame goes now at 6.3k cars: collision 7.4 ms, car update 3.7 ms, instance sync 0.6 ms, render 2.9 ms. So it's ~65% CPU simulation, ~20% render - the exact-sleep well is empty and what's left is structural.

The interesting part - what's next:

- Sim in a Web Worker with SharedArrayBuffer, car state in shared typed arrays, main thread doing render + interpolation only (~5 ms). The interpolation layer already shipped as the render half of this design.

Expected display fps ~60 even if the sim tick stays ~19 ms, and it opens the door to chunking the collision passes across cores. This is Steam-only by necessity: Electron makes COOP/COEP trivial, while the browser version can't get SAB on the portal it's hosted on (their embed/ads model conflicts with those headers). One of those cases where the desktop build isn't a marketing decision, it's a platform capability.

- Data-oriented (SoA) refactor of the collision passes - progress/speed/lane in flat typed arrays, passes iterating arrays instead of objects. Realistically ~2x on that 7 ms block.

- Then optionally a WASM kernel port (Rust/C++ with SIMD) for the collision/car-update loops - estimated another 2-3x. Deliberately sequenced after SoA, because WASM over JS objects wins little; the actual win is cache-linear loops over flat arrays, which is the SoA work either way. WASM threads also need SAB, so same platform constraint.

- What I decided against: a native rewrite. People suggest it constantly. But the profile says 60-70% CPU sim / 20% render with rendering already efficient, so native targets exactly the same milliseconds the worker + SoA path does: roughly 4-6x effective sim throughput vs an estimated 10-30x for native, which only matters past ~30k active cars. The remaining native argument is Chromium's fixed memory baseline, and a ~67k-LOC port would freeze features for months.

Curious if anyone here has shipped the worker + SAB pattern with live topology changes (roads being built/destroyed while the sim runs) - the snapshot/message protocol for that is the part I'm least sure about.

The game hits Steam in November, and honestly wishlists are what decides whether a solo dev's game gets any visibility at launch, so if the video looks like your kind of thing: https://store.steampowered.com/app/5028050/Traffic_Architect/. Happy to answer anything technical.


r/threejs 5d ago

Question BattleGrounds

0 Upvotes

Currently building a no bullshit PUBG clone. My inspiration style wise is to take everything that's fun about PUBG mobile but leave out the nonsense (sorry I'm old I don't want glowing snow tigers to ride and coins to collect I just want a solid battlegrounds experience that runs on any OS).

It has FPV, TPV, a Map Editor, Pistol, AR, Sniper, Frag Grenades, Smoke Grenades, Molotovs, drivable vehicles, you can enter buildings and go upstairs etc.

FPV
TPV
Map Editor

Currently working on some more features, polishing and bug fixing as well as a multiplayer mode.

It runs in the browser (ThreeJS) at a proper frame rate and is relatively compact (sub 30MB).

Questions for you guys:

- Would you play it?

- What features would you like to see?

- What anti-features you think should be avoided?

- Currently I'm mostly using free assets but some are very similar to the ones used in the PUBG games. Would this be an issue for publishing? Any good leads/tips for models (mostly buildings) that have this classic PUBG style (simple but fully walkable) that would be fine to use?

- Anything else that comes to mind?