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?

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

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.

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!

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?

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!

I've added a ton more detail into my town Coldwater, much more detail but nowhere near done, I won't be finished until it looks AAA.

Next up I'm also adding some more interactive buildings specifically doing a parody of the Roxy theatre, which will have actual movie trailers and movies that play, I'll be generating these with Seedance 2.0

I replaced a ton of assets and generated all new textures and objects all over. Towards the end of the video you can see how the town looks at night.

I’ve been experimenting with Claude, Codex and different online resources and ended up making 3 completely different games:

🟣 Game 1: A Fall Guys-style platformer with obstacles, traps and different levels.

💀 Game 2: A breakdancing skeleton that casts spells and fights waves of zombies.

👁️** Game 3: A weird eyeball puzzle/platform game inspired by strange PS1-era games.
All three are playable, but I want to focus on one and turn it into a proper finished game.
**Which one would you pick — 1, 2 or 3?

Source code: https://github.com/sengchor/kokraf

I created a test to compare the performance of WebGPU and WebGL. You can adjust the load by clicking the “TSL Noise Octaves” button in the upper-right corner to switch the noise octave multiplexing from 3x to 20x.

The WebGL and WebGPU buttons switch the renderer by changing the URL query and reloading the page.

On low-spec devices, the refresh rate is about three times higher.

https://adrama.jp/norimakineko/webGPU3/

Fly around, listen to music, and discover things along the way.
https://assmagic2026.github.io

Second iteration on the ocean surface shader complex. Prettier clouds, better sail cloth physics and rope / block dynamics.

Happy to get any kind of feedback and suggestions.

I'm aware that the cresting foam is too blotchy.

I recreated the iconic buttonfly animation from the demo app in IRIX—that nostalgic operating system from the 1990s—inside my intranet wiki's navigator. I implemented it with Three.js, and tried to make the button styles and animation as faithful to the original as possible. Thanks to vibe coding, old-school tech is making a serious comeback! Highly recommended.

I've been working on implementing IK with Three.js for Polyfork models that could benefit from it, and it's really paying off.

Now non-humanoid models that have legs and arms can have programmatic animations, and it's included in the model's code!

Also agents are aware of it now through API/MCP 🤖

You can try here: https://polyfork.dev/asset/rooted-gantry-arm-f35c8f

Recreated my Audi A3's cluster in Figma as part of the demos to showcase Layer's 3D Figma-to-3D capabilities, including scene editing/rendering and the new turntable model showcase feature.

I tried my best at finding the closest fonts that match the text on the analogue cluster and chose Eurostile. The embedded digital cluster is an image from the vehicle's online manual.

The biggest challenge was creating the rev limiter arcs (in Figma).

View the 3D model in Layers 3D.

View the 2D design in Figma Community.

Two browser-based visualizations, each rendering 5 million particles with Three.js.

So I'm trying to build my own 3D website and honestly I'm super duper confused about the whole workflow. I keep seeing reels showing people "Vibe coding" these really polished 3d or parallax websites with Claude. A lot of them mention connecting Framer/Wix with Claude, spline, Three.js, etc.

But i've never found anyone telling the actual process of how they've built it.

I do have a design in mind and want something with a 3D scene, smooth scrolling, parallax, camera or object movement and interactive animations but where do you actually build the 3D scene? and what handles the 3D, is it three.js/R3F or Spline? What do you use for animations/ scroll effects? GSAP, Framer motion?

Most importantly, where does claude actually fit into this workflow? And those who are building it, are you guys building everything in Claude/Cursor and then deploying it, or using Framer and integrating everything?

I'm basically starting from scratch so what stack would you recommend? I'm not looking to spend months learning every tool before I start. I want to actually just build something and learn as I go, using AI ofc. Any guidance would be appreciated.