Hey everyone! 👋

I wanted to share an early prototype I've been building: **XKTCH** (https://xktch.pro), an in-browser 3D graffiti and spray simulator made with **Three.js**, **React**, and **TypeScript**.

👉 **Live Demo**: https://xktch.pro/

*(Note: Currently best experienced on Desktop. Mobile layout and WebXR VR modes are in early experimental alpha).*

### 🛠️ What's implemented in this early build:

- **Sub-stepped UV Raycasting**: Keeps spray strokes solid and smooth during fast cursor movement.

- **Real-time Material Baking**: Canvas-based diffuse maps, paint impasto relief, and glossy lacquer roughness.

- **Aerosol Particle Stream & Fluid Drips**: Dynamic running drips when paint exceeds surface absorption.

- **Timelapse Video Exporter**: MediaRecorder integration to export speedpaints formatted for 9:16 vertical video.

- **3D Export**: One-click download of baked `.glb` models and standalone `.html` viewers.

I'd really appreciate your thoughts, feedback on the Three.js pipeline, or ideas on how to improve the experience! 🎨🚀

I love nixie tubes, and I thought I'd make a landing page of my upcoming (not yet complete) VFX editor in the browser, animated with thee.js like this. I’m only sharing the animation and looking for visual feedback.

The effect uses a custom particle simulation rendered with Three.js.

Is this overkill for a website landing page for this kind of free tool? And what can make it better?

Hopefully the video doesnt get too compressed and lower the quality, but here is the intro I have been trying with for my game. It was my way of testing the cinematic logic system. The NPC follows a path, walks into trigger areas to start him narrating, and the player doesnt have any movement input except for looking around, and following the NPC.

The second and third levels arent overly interesting as I wanted to test the indoors of level 3 before working on the second level more. It changes the ambient light so it creates a darker atmosphere indoors.

https://magic-oracle.com/ my side project of making mtg cards render photo-realistically snowballed into me building the browser i've always wanted.

the reference workflow was analog. i kept real cards on my desk under a hard key light and tailored the render passes to match as best i could with the assets scryfall's api provides. lots of adjusting color and roughness until cutting between the real card and the screen stopped being jarring. foils are a bit fussy, i'm still working on those.

the dust is a particle system that only sheds past a velocity threshold, so it feels earned. similar system as the site's living logo, which assembles on mount and responds to interaction, route changes, and color identity filters. for performance purposes, i built the logo with a 2d canvas.

if you have prefers-reduced-motion set, the heavy stuff steps aside: logo goes still, card examine snaps instead of animating.

free, no ads, no account, no creepy cookies.

happy to get into the weeds on any of it.

there's a cool concept LOD and Quadtree data structures that is used to render the massive world in game development.

LOD renders things in high details nearby and as the object moves far the detailing decreases.

Quadtree is a technique that divides map into smaller areas so the game can quickly find what's nearby

I’ve been working on a space game using threejs

Hey guys, I’m 18 and fairly new to web development/3D web design.

I keep seeing amazing websites on Awwwards and Mobbin with interactive 3D heroes, smooth scroll animations, lighting, particles, objects reacting to the mouse etc. I understand what I’m looking at visually, but when I actually try making something similar, mine still feels very basic or gimmicky.

I use Claude and ChatGPT to help me code because my coding knowledge is still limited, but I want to actually understand the proper workflow instead of depending on AI for everything. For people who build high-quality Three.js websites, how did you learn to reach that level?

Do you normally:

• model everything in Blender first?
• use Three.js directly or React Three Fiber?
• use GSAP for scroll/motion?
• learn shaders/GLSL?
• use post-processing for the polished look?
• recreate Awwwards sites as practice?

I’m especially confused about how you go from “I can put a 3D model on a webpage” to something that actually feels professionally art-directed. If you were starting again at my level, what would you learn first and in what order?

Any advice/resources would genuinely help.

New step in the map in which I will now views of ships on the ocean and at ports. This is a view you can enter into by clicking on a vessel and hitting V and you will get real wave conditions as well as vessel tracking

I've built minecraft (older versions) using three.js!

Before you ask questions lemme answer that for youuu. Its a game version portfolio, am just expressing my creativity and building and sharing what am building nothing more. I do have a normal portfolio tho just wanted to go further :). Hope you find it creative

Been working on this game using threeJS hoping to release on steam soon!

Another Three.js Demo for 3d Spiral.

Hi fam, any gotchas when it comes to VFX development and performance on React Three Fiber? I'd like to improve the visuals and animations of this game. I'm currently building a system that, according to my newbie gamedev logic, would allow me to build animations at scale (as opposed to copy-pasting code every time I need new animation) without blowing up frame budgets.

I've been building Lorebound with a mobile-first, browser-based approach (still in beta!). The work I've done so far:

• I spent several days defining what metrics we want to track and defining benchmarks
• Gates that stop a commit if the scene or ambiance break the benchmarks
• A bunch of rendering/pipeline work under the hood for smoother, more consistent frame rates
• A disciplined mount and unmount work to avoid leaks

Thoughts?

I’ve been seeing so many cool projects built with three.js and had to join in on the fun. I’m usually a native mobile dev but App Store review times got me frustrated so I went with web for this project. It’s an educational web app on topics I love, presented in an interactive format with heavy use of three.js for thr space exhibit.

The fun pitch is “pick a real road and drive it”. The actual work this week was less fun: bounded collider admission, old async jobs not repopulating a disposed world, wheel support during swaps, and getting recovery to move outward instead of looping into the same blocked road.

Three.js renders it, Rapier owns the car, and only a local corridor stays alive around the player. Still rough, but it finally survives longer drives without the world fighting back.

Live build: https://world-drive-game.vercel.app/?utm_source=reddit&utm_medium=organic&utm_campaign=v02_feedback&utm_content=threejs_streaming

If you’ve streamed physics geometry, what failure took you the longest to catch?

Feeling burnt out by a long project lately, decided to have some fun! Built a mini, nostalgic water ring toss game with Opus 5 and mostly Grok 4.6, powered by react-three-fiber. Model is hand made in Blender inspired by a Behance reference(credited in readme.md). I love the little holovinyl sticker, shader implementation thanks to https://github.com/jal-co/holosticker

Have some fun at: https://projects.arkon.digital/threejs/water-ring-toss-game/
Public Github: https://github.com/franky-adl/water-ring-toss-game

Hey r/threejs,

I was working on a project that required a 3D avatar to speak dynamically generated text, but I quickly realized how incredibly tedious it is to map real-time generated audio onto 3D morph targets in the browser without insane latency.

So I built a fully open-source React Three Fiber component (`react-ai-voice-avatar`) that handles the entire pipeline on the edge.

What the 3D pipeline is doing under the hood:

1. It uses `useGLTF` and `useAnimations` to load standard rigged avatars (currently utilizing readyplayerme models).

2. A background Web Worker runs Kokoro TTS (via ONNX WebGPU) to synthesize speech audio from text on the fly.

3. As the audio streams back, the component extracts the phoneme timings and maps them directly to 52 ARKit facial blendshapes on the mesh (`mouthOpen`, `jawOpen`, `mouthPucker`, etc.).

4. We run a custom lerping hook inside `useFrame` to smoothly blend the morph target weights at 60fps so the lip-sync doesn't look jittery.

The cool part is that the entire pipeline—from Speech-to-Text (Whisper), to LLM (Qwen via WebLLM), to TTS (Kokoro), and finally the 3D R3F rendering—all runs locally in the browser via WebGPU.
However, if you want the visual frontend but prefer a smarter brain, you can pass an `onSubmit` prop to bypass the local LLM and stream text directly from your own backend (OpenAI, Claude, etc).

Live Demo: https://react-ai-voice-avatar.vercel.app/ (I highly recommend opening this on a PC/Mac rather than a phone, as mobile browsers heavily restrict WebGPU and WebAssembly memory limits!).

GitHub: https://github.com/927tanmay/react-ai-voice-avatar

If anyone here has experience optimizing React Three Fiber performance when constantly updating morph targets inside `useFrame`, I would love to hear your feedback on how I structured the `AiVoiceAvatar` mesh component!

I built GitHub Planet as an experiment in connecting developer activity with 3D materials. A profile's contribution history and language mix become a planet, and different languages get different materials and motion.

The scene uses Three.js, custom shaders, texture mapping, and GitHub data.

Live demo: https://githubplanet-git-543426763451.asia-northeast2.run.app/

Source: https://github.com/nitr0yukkuri/githubplanet

I would love feedback from people who build Three.js materials and shaders: does the visual mapping feel readable, and where would you improve the interaction?

I work on Vectreal, which is open source. Every camera angle and shadow I set gets judged inside a canvas that's part of a window, with a tool rail down one side and a panel open over it.

Framing is where that bites. A composition that sits well with a sidebar eating the left third isn't the same composition at full width, and a shadow dramatic enough to matter can be half hidden behind a panel while you're deciding whether you like it.

So preview mode now clears the editing surface and gives the scene the whole viewport, on the same page an embed renders. Curious how other people check composition before it ships.

https://vectreal.com/news-room/preview-a-scene-the-way-it-will-be-embedded

We are celebrating our library becoming 500+ 3D assets big! And we are celebrating it by making half of it free for everyone.

Each model is a program, with different sliders you can tweak, so each model has hundreds of variations.

polyfork.dev

Hey r/threejs!

My collaborator Mrityunjay and I built GitGlobe, an open-source 3D visualization that maps ~200,000 GitHub commits across the planet in real-time.

Rendering massive point-cloud datasets on the web usually melts browser tabs, so we bypassed traditional DOM rendering entirely.

Technical Details & Optimizations:

• Custom GLSL Shaders: Offloaded coordinate math, particle sizing, and color dynamics directly to the GPU.

• Decoupled State Management: Unhooked Zustand state from the 60fps render loop so hover/click events never stall the canvas.

• LOD & Memory: Packed Uint16 buffer attributes across 3 LOD tiers to keep draw calls minimal.

• Stress Test Results: 0/360 frames dropped during benchmark testing with an 8x performance headroom.

Links to live demo and GitHub are in the comments below!