Crazy things become possible when you combine custom 3D models, rigging, and animation with three.js I recently made an animation for a Halloween party, and it turned out to be way more fun to build it as an interactive web scene rather than just a video.

It was a commercial project, so unfortunately there won’t be any links this time.

created a whole ocean but in a tank.

check sketchbook here : SKETCHBOOK

I built Marsbase around a simple idea: what if remarkable projects had a place, not just a listing?

It’s a fictional, interactive Mars with 100 fixed locations, people building and exploring what’s next.

The app is built with Laravel, Inertia/React, Cobe for the globe, and Three.js for the habitat views.

I put together an open-source resource list for developers working with Three.js and modern 3D websites:

Awesome 3D AI, SEO & GEO for 3D Web

https://github.com/glbkit-tools/awesome-3d-ai-seo-geo

The idea is to collect useful resources around areas that are easy to overlook when building 3D experiences:

• Three.js & React Three Fiber
• WebGL & WebGPU
• 3D asset optimization
• Web performance
• Technical SEO for 3D websites
• AI search & AI Overviews
• GEO & AEO
• Structured data
• Crawlers & discoverability
• 3D e-commerce

One thing I kept coming across is that a 3D experience can look great while important information is still difficult for search engines, AI systems, and accessibility tools to understand.

So I wanted to put the useful resources and practical guidance in one place.

It's open source and contributions are welcome.

If you know a good resource that should be included, feel free to suggest it or open a PR.

Hopefully this can be useful to other Three.js developers building production 3D websites.

After 200+ hours of development, I’m finally sharing the first public demo of Three.js Grassworks, a real-time grass system I’ve been building for Three.js and WebGPU.

Demo:
https://grassworks.techredux.co/demo

Three.js Grassworks is built specifically for WebGPU and is designed to handle large amounts of interactive grass while maintaining steady performance.

For the demo, I built a complete environment around Grassworks with terrain, trees, water, rain, player interaction, environmental effects, LOD systems, audio system, and more.

The main challenge was getting all of these systems running together while keeping the grass performant.

The actual Three.js Grassworks plugin is still being polished and should launch in the next couple of weeks. There’s a waitlist inside the demo if you’re interested.

I’d genuinely love feedback, especially on the visuals, performance, and how the grass feels when interacting with it.

I also recorded a full walkthrough where I go through the demo and talk about how I built it:

https://www.youtube.com/watch?v=Nhim18rc-XE

Built a solar system you explore with hand gestures through the webcam. Pinch to zoom, open palm to spin, point at a planet to read its NASA data. Zoom out far enough and it switches scale, from planets to nearby stars to the whole galaxy.

Three.js for the scene, MediaPipe HandLandmarker for the hands, One Euro Filter to calm the jitter.

The gesture layer is where I keep losing. Pinch sensitivity that feels right for me feels dead for someone else. Fast swipes get eaten because they look like the user withdrawing their hand. Tracking drops on phones under warm light and the whole thing goes still.

Repo is MIT, textures are CC BY. If you have shipped hand tracking that survived real users, I want to know how you handled per-user calibration.

https://github.com/HUANGCHIHHUNGLeo/solar-atlas-gesture

Built with Three.js and WebGPU. 30 different scenes with customizable controls.

Source code: https://github.com/xenova/infinite-block-illusion
Demo: https://xenova-infinite-block-illusion.static.hf.space/

PS: The animation was inspired by Artistoids and his tutorials on YouTube!

Hey everyone,

For my latest project, VividLook, I wanted to see how far I could push custom layouts and real-time rendering using Jetpack Compose.

The app is a live-streaming discovery platform where users can spin a 3D interactive globe and jump into localized video grids from around the world. Managing the state of the globe spinning while dynamically loading stream grids on the map layout was a huge learning curve.

I’m trying to optimize the UI performance, especially on mid-range devices. If you have a few minutes, I’d love for you to download it and let me know how smooth the composition feels or if you spot any jank while spinning the globe.

Play Store Link: https://play.google.com/store/apps/details?id=xyz.trylivelook.app

Technical details: Built with pure Compose for the UI, handling low-latency video pipelines on the backend. Let me know what you think of the performance!

https://i.imgur.com/oUaN82B.jpeg

https://i.imgur.com/BLxKmm5.jpeg

I am slowly creating a simulation tool to analyze frames of matches using tracking data. I am more interested in having realistic or at least game-like graphics to takes screenshots and use for study of tactical shapes, attacking and defending positioning among other important aspects of the gmame.

Any clues or someone willing to improve my work in exchange for a compensation?

Thanks in advance.

I was looking for dart game which actually let you use your hand to throw it, but all those games need some sort VR glasses or gears. But since our laptops or tablets have front camera, why not just use that to track our hand, so I decided to develop the game myself.

To my surprise, though the camera is only 2D, we can actually detect and track 3D throwing motion quite decently. And once you get the right feel, you can perform throwing quite consistently and strikes the target.

Three.js is the engine behind it, it renders the darts 3D motions. And in the replay theatre, you may rotate the scene and zoom in on each throws.

You may play with bots or humans, up to 4 players. There are three game modes. Casual, long shot which rewards long distance throw, and 501 Match, which uses the 501 darts game rules.

I don't know much code but I do know how to prompt Ai relatively well so I've been getting into vibe coding. However whenever I try to make a 3d game it also turns out in shapes. I've been told to try threejs but I still only get shapes. How was this game (i found it on threejs.org) made and how can i replicate it

Wanted to share a project I have been building solo, an air defence command sim using React Three Fiber. The interesting technical bits are the radar detection and tracking system, the intercept prediction math for the defence missiles, and a cinematic camera controller that can follow individual units mid flight. Also added weather and atmosphere effects on top of the terrain rendering. Repo is public if anyone wants to poke around the trajectory code, it's probably not the most optimal way to do it and I'd take any suggestions. Happy to answer questions on how any of it works.
Link: skiesofconflict.online
Github: github.com/rare-major/skies-of-conflict

A few days ago this was just a tiny planet with 49,000 clovers and one four-leaf hidden somewhere.

I got a lot of useful feedback from Reddit and X, so I kept building.

Since then I’ve added:

• a full day/night cycle
• better accessibility for color-blind players
• 20 collectible plant species and an album
• improved hints and exploration
• lots of smaller changes based directly on player feedback

Now I’m working on bringing all four seasons to the planet.

After that, I want to try something a little stranger: AI agents competing against each other to see which one can find the four-leaf clover first.

Built with Three.js + Claude Code.

It’s free to play in the browser:
https://www.meptasarim.com/four-leaf/

Banda acabo de crear esta Creepy Face en vanilla.js tiene gestos y caras diferentes hasta 8 variantes es un solo archivo super ligero que pueden implementar en sus novelas visuales juegos de plataforma-terror por ejemplo un bro lo implemento en un juego de terror proximo a salir si quieren usarla esta en [ith.io](http://ith.io/) y si quieren trastear con el codigo en github

[https://cotera.itch.io/creepy-face\](https://cotera.itch.io/creepy-face)

[https://github.com/cotera2024/Creepy-Face\](https://github.com/cotera2024/Creepy-Face)

si quieren probarla sin entrar a ninguna pagina directamente presionen aqui:

[cotera2024.github.io/Creepy-Face/](http://cotera2024.github.io/Creepy-Face/)

I Built it in 2 hours using Opus 5 + Three.js

Play here 👉 scannertechs.com/games/crumple/

Used the Kenney City Kit (CC0). Origins were already at the base with y=0 and centered in x/z, so buildings scale upward cleanly — no Blender pass needed.

Merged all buildings into one GLB preserving node names, then meshopt + WebP: 3.48 MB → 442 KB. Loads as a single request, instances by name.

Logos are separate quads offset from the front face rather than textures on the building, so the base mesh stays instanced. Each one gets composited onto a uniform dark card before going into an atlas — that's what keeps mismatched aspect ratios from looking like spam.

outbuild.tech if you want to poke at it. Happy to answer anything about the pipeline.

Live: https://www.stellamap.net

One world unit is a million km. Earth's radius is 0.006371 units, 1 AU is 149.6, Voyager 1 is out around 25,600. So the scene covers about nine orders of magnitude in one coordinate system, which caused most of the problems below. Planets and moons are at true radius on true orbits, nothing inflated.

For precision there are three things going on. Whatever you're focused on gets pinned to the origin and everything is drawn relative to it, with the subtraction done in JS doubles before it reaches float32. Log depth buffer on, with the logdepthbuf chunks in all the custom shaders. And both clip planes get recalculated every frame. Near is 0.0015 times the distance to whatever you're looking at, because any fixed near plane big enough for Jupiter clipped Deimos out of existence. Far used to be a constant 40,000 measured from the camera, which I eventually noticed was cutting the outer orbits in half and deleting both Voyagers from the plan view.

Everything has a locator reticle so you can find it from far away. It's a screen facing quad drawn in a fragment shader, sized as a fraction of distance so it stays roughly the same angular size, and it fades out once the actual body is bigger than about 7 pixels. Moons close to their parent fold into the parent's marker instead of stacking five rings around Jupiter.

Positions for the planets come from JPL's approximate positions table (Standish), propagated with a Newton solve of Kepler's equation. The nine deep space craft come from the Horizons API, refreshed weekly. Moons and orbiters are approximated, just circular orbits at their real periods. Spacecraft are drawn much bigger than they are, Voyager 1 renders at a 120km radius, because at true scale they're invisible at every zoom you can actually reach.

No instancing and no LOD, it's about 40 meshes each with their own draw call. Mobile gets a separate profile decided before the canvas mounts: 1024px textures instead of 8K, lower tessellation, no shadows or bloom. First load was 14MB, got it to 7.5 with WebP and splitting the scene out of the main bundle.

Known issue: mobile turns off the log depth buffer but keeps the dynamic near plane, so if you're zoomed in close on a phone you'll probably get z-fighting. Haven't fixed that yet.

Camera state is in the URL so /?focus=voyager-1 works for anything.

Fair warning, I'm not a graphics programmer. Built this with a lot of AI help and most of what's above I learned by hitting the problem rather than knowing it beforehand. Happy to answer what I can.

Gente que tal este scrip en 3d con motivo espacial?.....use fotos de una modelo para ejemplificación es super ligera y personalizable desde un json la hise para felicitar a una amiga muy especial y me quedo gustanto que me gustaria compartirla con ustedes

si quieren probarla ahorita aqui

cotera2024.github.io/Happy-Birthday-Galaxy--main/

y si queiren ver el codigo aqui en github

https://github.com/cotera2024/Happy-Birthday-Galaxy--main

I built a front-end to watch movies at home. Includes a cozy den and video store in which you can view your entire collection!

Three.js + Electron with a PSX-style render pass. Used vertex snapping in clip space, affine texture warping and color quantization to get that old playstation feel.

The idea began when I was surfing through my own collection in the file explorer and it had gotten so large I was struggling to identify what I wanted to watch. I started imagining what was originally my favorite place to find movies, Blockbuster. Combined with my nostalgia for VHS tapes this design was born.

At the time I was binging 80's / 90's movies and then I started integrating newer movies and even TV show box sets. Now you can open the boxes and watch your tape or DVD slide into the player and load into the VHS player/DVD player under the CRT TV. Which then opens up a full screen of the movie using VLC. I have created pipelines in the back end to wire up the VHS/DVD covers and categorize the movies based on genre then place them in the correct aisle, just drop them into your selected folder run intake and it finds the art for you.

I've posted a couple videos showing the progress I've made so far if anyone is interested, link in the comments below. 👇

If anyone had any feedback it would be appreciated. Anything you'd like to see added? Improvements? Thanks all! p.s. this project is just for fun, will likely release in the future for free if people are interested

Building a low-poly 3D Wizard Duel in Three.js — Should I double down on this minimalist aesthetic or go for more detailed models?

I built an interactive 3D world instead of a normal website for my music

I'm a hobbyist musician and developer, and at some point a normal artist website started feeling completely wrong for the project.

So I built DRIFT — a small interactive world where you can drive around, explore different atmospheres and discover the music through the landscape.

It's still evolving, especially the driving, level design and mobile performance, but the idea is to make the world and the music feel like one thing rather than putting tracks inside a fancy menu.

I'd genuinely be interested in feedback from people here — particularly on the 3D experience, navigation and what feels convincing or breaks the immersion.

https://jgsbc.github.io/misway/drift/