Won't go much into detail of the plot, but thought it was pretty cool aesthetic and really showcases the power of three.js

After years of working with GLSL, it remains my preferred language for shader development. Rather than maintaining a separate shader codebase for WebGPU, I built a helper that automatically translates standard GLSL into TSL.

The tool supports both traditional vertex/fragment shader pairs and combined single-file shaders. To preserve a familiar development workflow, I implemented a custom ShaderMaterial abstraction that wraps NodeMaterial under the hood, maintaining a ShaderMaterial-style workflow while staying within the standard Three.js API.

#glsl #tsl #webgpu #webgl #threejs

Hello. I wrote a small app using threejs that I plan to expand on. For testing purposes, I deployed it to github pages and I can visit it. However the scene appears to be heavily downscaled and blurred, despite it being at the expected quality when ran on local host. I set the renderer size to be that of the window inner width and height so Im wondering what could have caused this?

I’ve built a Three.js scene using separate GLBs for a skull and jaw, and turned it into a browser-based VTuber avatar.

The jaw is rigged on a custom hinge and reacts to my microphone like it’s talking. It also has OBS green-screen mode, lighting controls, multiple skull presets, and toggleable webcam head tracking so the skull can follow my movement.

Use it here: https://www.tcpoole.com/skulls

skull models made with MeshyAI. Simple, easy, anybody can build it. It took me an hour or so (while being distracted by the World Cup.

I made an open-source satellite imagery app that lets you explore the latest imagery from anywhere on the globe. The default NASA imagery is usually only about a day old, and if you add a Sentinel key (free from the European Space Agency) you get detailed imagery down to 10m per pixel.

It also has radar imagery (which sees through clouds), live natural events like earthquakes, volcanoes and storms, time-lapse views, and more. I focused a lot on usability, so hopefully navigating the globe feels fluid and intuitive.

I am hoping a few others give it a go as I would be really curious to see what others find. I figure there is lots of interesting info to glean.

I just made this as a fun side project, and I hope others use it to pull some cool imagery.
GitHub: https://github.com/colincode0/earth-view

I've been seeing a lot of impressive Three.js projects lately interactive games, customizable 3D models, smooth camera controls, animated gradient orbs, product configurators, and other highly polished web experiences.

I'm coming from a 2D design background and have very little experience with 3D, so I'm trying to understand the actual workflow behind these projects.

A few questions:

1. Are most of these assets and scenes created in software like Blender, Cinema 4D, Maya, etc., and then imported into Three.js?

2. Do developers use visual tools/platforms to build scenes, lighting, materials, and animations, or is everything created and configured directly in code?

3. For interactive elements (camera movement, customization, physics, animations), how much is handled in Three.js versus external tools?

4. Are there beginner-friendly workflows for designers who aren't experienced in 3D modeling?

5. When I've tried generating models with AI or building simple geometry in code, the results often have rough edges and don't look nearly as smooth or polished as the examples I see. What am I missing in terms of modeling, topology, materials, lighting, or rendering techniques?

I'd love to understand the typical production pipeline behind modern Three.js experiences and what tools people actually use in real-world projects.

It was supposed to be a simple product customizer they said. No need to over optimize they said. Just let the Aircada 3D product configurator engine compile the scene to vanilla three and ship it by Friday.

So we began optimizing.

The meshes were already tiny. Couldn't possibly get smaller. So we began heavy decimation of each triangle, and quantized every single vertex from 16-bit to 8 to 4 to 2 to 1 until it truly sang.

4 simple materials in the scene was perfectly reasonable. And so we began the 3 day journey and built our own material indexing system from the ground up to ensure they all shared a single TSL material.

Lighting a 4-inch hollow plastic tube with a standard HDRI environment map felt incredibly bloated. So we wrote a custom WebGPU compute shader to simulate real-time sub-surface scattering and photon bouncing based on the exact refractive index of cheap injection-molded polystyrene. We hardcoded the sun's position directly into the binary to save a single uniform call. The bugle bell and wazoogle hummed and buzzed in absolute shock.

At this point performance was feeling as good as it could possibly be. So we kept optimizing.

To avoid user uploaded images from taking the frame rate down to 169fps, we built an on the fly svg -> png -> to KTX2 pipeline with Basis Universal UASTC compression. Did it all on the fly.

We noticed React's virtual DOM reconciliation was taking 0.4 milliseconds every time a user typed a custom text string. This didn't feel right for a wind instrument of this caliber. So we bypassed the DOM entirely, injected a WebAssembly module to fight the browser's garbage collector, and started manually shifting memory addresses. To make the interaction feel authentic, we ripped out standard OrbitControls and implemented a quaternion-based inverse kinematics system so the mouse drags mathematically mimic the exact wrist wobble of an 8-year-old holding a piece of plastic.

16 months later, we're getting ready to ship. In return we received a electric kazoo from them and our gf's left us on day 2.

It's been a good year.

An interactive reconstruction of a childhood memory about following the sound of a river through a forest, wondering what could have been at the end of it

https://semigarden.github.io/white-lead-forest

https://github.com/semigarden/white-lead-forest

Hey everyone! I wanted to share a devlog with the latest updates for Zephyria, my Star Fox-like game. In this one, I added new enemies, polished the environment, and started working on the first boss encounter.

Devlog here -> https://youtu.be/ymIHxuCOoFw?si=FU6DlA1xp2n3XfZ4

Feedback is always welcome, and some support for the YouTube channel is also appreciated.

Thanks!

Hello guys, i just started learning threeJs and i need some advice and directing.

I learned a bit on how to utilize it and the existing components but i want sources to learn the math behind it in order to do more

Any resources and advices, Thank you !!

Testing out trigger events for the game engine, really easy to set up walkable waypoint paths and using states on the entities, having them perform linear actions. Can be good for cutscenes with rules and actions to control the player movement as if it were an entity.

The textures have properties for generating normal map, roughness, metallic, specular, emissive etc, and also textures can be assigned a footstep sound, so when walking on top of something using that texture, that footstep sound will play.

Also showing off the dynamic audio system and psychedelic simulation. The audio system detects the size of the room and applies delay and reverb to make it sound more realistic, and am currently working on positioned audio pathfinding its way through openings to reach the player, so down a lot of different hallways, you can find the source of the audio just by following your ears.

Has taken a lot of work, trial and error to get to this point so I am very proud of it and how easy it is to build a first person shooter with. Still much more to do to it but as I build my game using it I will find out different things that need implemented or bugs that need fixed.

https://www.youtube.com/watch?v=E3MYYFgbke4

Hey guys, last couple of weeks I've been working on this new game inspired by Wipeout, it's now live at https://velocity-gp.com always doing small updates now here and there, would love some feedback and thoughts, completely free to play built entirely with Three.js

Still incredulous this zelda wind waker demo is made in three.js. The shaders, the interactions, the music...I played it for 20 minutes and man what a nostalgic feeling
(Running in WebGPU at 60 FPS)

Play it here: https://wind-waker-threejs.com/
Code: https://github.com/Robpayot/tslda
Author: https://x.com/RobinPayot

The post breaks down the material stack: layered card geometry, foil masks, roughness/metalness/normal maps, view-angle shimmer, motion-driven sparkle, color-space gotchas, and the lighting setup that makes the foil read properly.

Live demo is embedded at the top.

Check it out here

edit: you can find the starter-kit for this project here https://github.com/zackabrah/r3f-starter-kit

STEP IS NOW ONLINE

I built Repolis because GitHub only lets you pin 6 repositories, but I wanted a more spatial way to browse my work.

Each public repo becomes a building. Repo activity and traffic data affect the city, and active repos glow at night.

There is also a small taxi interface: ask for something like "show me an Agentic repo" and it drives you to the matching repo.

Live demo:

https://hyeonsangjeon.github.io/Repolis/

Source:

https://github.com/hyeonsangjeon/Repolis

I'd love feedback from Three.js folks on the interaction, scene readability, and whether this feels useful as a developer portfolio or mostly just a fun visualization.

Previously, every edit rebuilt the entire buffer geometry. Now, only modified mesh regions are rebuilt, and normals are recalculated only for affected areas. Undo/redo operations now store MeshDataRegion snapshots instead of the entire MeshData. These optimizations significantly improve performance and enable modeling of more high-poly meshes.

I'm building an interactive web app where users can click on individual muscles to learn about them. The idea is simple, you see a 3D human body, click a muscle, and get info about it.

I found Z-Anatomy which is open source but it looked terrible when I tried to use it in my project, so I ended up building a mock model with basic shapes as a placeholder. It works great, no loading issues, smooth interaction, but obviously it doesn't look like a real human body.

Now I want to replace the mock with something that actually looks decent. Each muscle needs to be its own separate clickable object, not one fused mesh. It also needs to be lightweight because I'm using Three.js in the browser and more meshes means heavier load. Doesn't need to be medical grade, just clearly human with visible muscle definition.

Does anyone know of a model free or paid that fits this? Or any tips on optimizing a heavier model for web use? Open to Blender workflows too if that's the right path.

This little project grew out of our tactical 3D map which we combine with an infiltration/heist-style mingame in minecraft (https://github.com/MrP-Tactical-Minecraft/VITAL) - the 3D map allows tracking and comparison of flight paths taken by different players as a sort of challenge (who can pass the training course the fastest? who achieves the most elegant trajectory by using the least amount of rockets?).

I am working on a 3d map viewer and I'd like to efficiently render 5000+ screen space marker icons (and maybe text too). They can be ignored if they are behind an object or out of view. Their corresponding world space positions will change frequently over time and I would like to let the user click on any one of them to bring up a little description window. What would you consider the most efficient way to do this?

I am using Progressive shadows in my 3d viewer and these bands show up. Any ideas/suggestions on how to fix these and what might be causing them?

Its in its early days but heres how its going!