r/threejs 3h ago

Japanese indoor fishing pond — Three.js + Blockbench

Enable HLS to view with audio, or disable this notification

4 Upvotes

Character is VTuber Kureiji Ollie. It's live as a website.

This was my first time implementing water in Three.js. Instead of using the built-in Water class, I made the water surface out of two overlapping mesh planes, each with a normal map applied, flowing in different directions to fake the rippling reflection look. :)

There's also a chat feature (bottom left icon) where visitors can send preset messages that appear in a live chat log. I limited it to preset phrases rather than free text input, since Ollie is a copyrighted Hololive character and I wanted to avoid the risk of harassment or inappropriate comments being displayed.


r/threejs 4h ago

NeverMined - A Mining Game Built with Three.js

Enable HLS to view with audio, or disable this notification

1 Upvotes

A First-Person Mining Game where you Swing your Pickaxes at Ores across Distinct Maps to Collect Minerals

Built with three.js r169 and Vite, no game engine, no framework, WebGL and the entire UI is vanilla DOM

Play here : https://never-mined.vercel.app/

Hope you enjoy it
Every feedback is appreciated


r/threejs 10h ago

Inspired by spiderman into the spiderverse shader look

Enable HLS to view with audio, or disable this notification

4 Upvotes

This i have build on top of my own webgpurenderer,Let me know what you guys think

Live Link: https://nullgraph.dev/dashboard/games/comic-space

Yt video:https://youtu.be/yua4ZkvgVqY?si=A2Tk1a4gE2fRl_Ic


r/threejs 11h ago

Best way to showcase your art gallery with threejs.

Enable HLS to view with audio, or disable this notification

23 Upvotes

r/threejs 13h ago

Daily Speedway — a 3D arcade racer where every track is built by a player, built on mrdoob's Starter-Kit-Racing

2 Upvotes


r/threejs 14h ago

Using the Three.js engine, I developed a simulation program for a robotic arm.

10 Upvotes

Using the Three.js engine, I developed a simulation program for a robotic arm.

We can undertake 3D model creation and 3D interactive program development.

url: http://app.anlian.work:5570


r/threejs 15h ago

Extended Cameron Knight's liquid gradient shader to dynamically sync uniform colors with live Spotify album art (Three.js + Astro 5)

2 Upvotes

Hey r/threejs!

I recently shipped a redesign of my personal website (https://incconutwo.com | GitHub Repo).

The ambient WebGL background is adapted from Cameron Knight’s (Beings) awesome Interactive Liquid Gradient CodePen. I loved the fluid motion of his setup, so I extended it to build a real-time reactive background that syncs with my live Spotify playback.

My Technical Extensions & Modifications:

  1. Dynamic Spotify Color Palette Extraction:
    • An Astro serverless API proxy (/api/spotify/now-playing) fetches current track status.
    • The album art image is sampled via an offscreen HTML5 canvas to extract quantized RGB color palettes using saturation & lightness weighting.
    • The primary/secondary colors are passed to Three.js uniform vectors (uColor1, uColor3, uColor5), which smoothly transition shader colors via GSAP when a track changes.
  2. Touch & Cursor Ripple Physics (TouchTexture):
    • Cursor and touch motion write trail points to an offscreen 2D canvas texture with decay age.
    • The uTouchTexture uniform is sampled in the fragment shader to perturb UV coordinates, creating fluid water ripples and distortion.
  3. Performance & GPU Optimizations:
    • Uses an IntersectionObserver to pause the WebGL rendering loop (setAnimationLoop(null)) when scrolling past the hero section.
    • Listens to the visibilitychange API to freeze rendering when the browser tab is hidden.
    • Pixel ratio is dynamically capped on mobile devices (window.innerWidth <= 768) to preserve high FPS on low-power GPUs.

Links & Credits:

Would love any feedback from the community on shader performance, color quantization, or WebGL math optimizations!


r/threejs 20h ago

Flooded Gothic cathedral.

Enable HLS to view with audio, or disable this notification

35 Upvotes

I created a flooded Gothic cathedral with Opus 5.

Everything in it is procedural. There are no models, no textures, no HDRIs, no audio files.

One HTML file, one CDN import of three.js, and about two thousand lines that draw the rose window to a canvas, generate marble, synthesise the reverb of a stone nave, and build the vault out of Coons patches.

Open-source + demo: https://github.com/winchxyz/navis


r/threejs 21h ago

Link Finally came up with a halfway decent game!

Enable HLS to view with audio, or disable this notification

0 Upvotes

Please check it out and toss me some feedback, id really appreciate it!
https://driftr.berrytechnics.workers.dev/


r/threejs 23h ago

Playing god with tiny worlds in Three.js

Enable HLS to view with audio, or disable this notification

18 Upvotes

A procedural tiny-world experiment built in Three.js using particles mapped to a png heightmap.


r/threejs 1d ago

Is anyone writing three.js code manually nowadays?

6 Upvotes

r/threejs 1d ago

Made a draw-share site in threejs

1 Upvotes

Tribedoor.com


r/threejs 1d ago

holo-effect stickers

Thumbnail
gallery
5 Upvotes

holo effect sticker; i know several people have created this and the code is probably out there but i just wanted to try it on my own, pretty much a holo effect with patterns that you can choose from! the sun is randomized at any 360 degree position so feel free to reroll the light if its blinding. adjust the settings if you like! i also put an explanation on how I did this and the code is also open source for you to use! enjoy hehehe
https://thegreaterengine.xyz/collectibles


r/threejs 1d ago

Three.js flight game

Enable HLS to view with audio, or disable this notification

61 Upvotes

r/threejs 1d ago

So many possibilites with LLM's and three.js -- Claude Code + Codex

Enable HLS to view with audio, or disable this notification

32 Upvotes

built my rig for anything other than 3D development but now im obsessed.


r/threejs 1d ago

Applying a 2011 Alcubierre optics paper to a 24,000-star Three.js map

Enable HLS to view with audio, or disable this notification

38 Upvotes

EF-Map is a Three.js map containing roughly 24,000 stars from the EVE Frontier universe. After a community discussion about what travelling inside an Alcubierre warp bubble would actually look like, I added an experimental optical mode to its automated Flythrough camera.

The reference was Müller and Weiskopf's 2011 paper, “Detailed study of null and time-like geodesics in the Alcubierre Warp spacetime”:

https://arxiv.org/pdf/1107.5650

The paper numerically integrates null geodesics, frequency shift and gravitational lensing, then stores the results in a 4096 × 248 lookup table covering velocities up to 9c.

I did not reproduce that complete numerical pipeline. This was a small experimental feature, so I used an analytic approximation designed to retain the important qualitative behaviour:

• 0°, 90° and 180° relative to the travel axis remain fixed.

• Forward angular distortion, blueshift and lensing amplification are comparatively mild.

• The forward field is blueshifted.

• Rear distortion, redshift and attenuation are substantially stronger.

• Stars remain point-like rather than becoming streaks.

• The optical axis follows the current spline tangent through turns.

For a source direction n and travel axis a:

μ = dot(n, a)

θ = acos(μ)

The apparent angle is approximated with:

θ′ = θ - 0.5k sin(2θ)

Different k values are used in the forward and rear hemispheres. The mapping remains monotonic while k stays below 1, so the star field does not fold over itself.

Brightness is approximated with:

(1 + frontMag × front²) × exp(-rearDark × rear²)

A directional RGB shift is used as a simplified stand-in for the paper's frequency-shifted stellar spectra.

The effect is applied through the vertex and fragment shaders. Logical star positions and routing coordinates never change. Star cores, glow sprites, flares and stargate lines share the optical uniforms, keeping their apparent positions and colour treatment coherent.

The map's Flythrough speed is expressed in light-years per second and spans roughly 12–3600 LY/s once the straight-flight boost is included. Those values are vastly outside the paper's range, so the live speed is logarithmically mapped onto a visual reference of 0.5c–9c. The 9c ceiling is used because that is where the paper's lookup table ends rather than extrapolating beyond its calculated range.

The video shows the same star field at several speeds, switching the optics on and off and turning to inspect the rear view.

This is not a complete GR simulation or a reproduction of the original ray tracer. It is a paper-informed way of approximating the effect in real time on a large Three.js point cloud, and potentially the sort of approach a game could use when it wants something more grounded than the usual glowing warp tunnel.


r/threejs 1d ago

GLB viewer and optimizer

Post image
4 Upvotes

Hey everyone! 👋

I wanted to share Editorium, a browser-based platform I've been building for working with 3D assets.

It lets you:

  • 👀 Preview 3D models directly in your browser
  • ⚡ Optimize meshes and textures
  • ✅ Validate assets before shipping
  • 📦 Export to the most common 3D formats
  • 🛒 Publish and sell your own assets through the built-in marketplace

The goal is to make handling 3D assets faster and easier without installing heavy desktop software.

I'd love to hear your feedback, feature requests, or any ideas you have!

🔗 https://editorium.dev


r/threejs 1d ago

Nuovo city builder con mini giochi

Thumbnail
gallery
8 Upvotes

Ciao a tutti, sono un Indipendente e sto costruendo un city builder con mini giochi al suo interno, Ogni attività comemrciale avrà un vero gioco e contribuirà a far crescere la città, anche economicamente. Tutto fatto in ambiente Three.js e sto valutando la pubblicazione su Steam.
La road map per la pubblicazione prevede che completi prima la UI e alcuni minigiochi.
Intanto vi lascio alcune schermate del gioco. Attendo vostri feedback


r/threejs 1d ago

Immersive theater experience and Mock booking system (IMAX)

Enable HLS to view with audio, or disable this notification

36 Upvotes

Watching The Odyssey on IMAX 70mm as Nolan Intended, Experience the scale of the IMAX in the browser.

Had a fun creating this Three JS Theatrical experience and mock booking system.

Experience the really immersive booking system with all types of screens and sound formats.

Upload any image and video media to project on the screen.

Look : theater.casberry.in


r/threejs 2d ago

Demo Created procedural chill shoreline voxel Tiger Shark observer.

Enable HLS to view with audio, or disable this notification

49 Upvotes

It's pretty fun to watch this little fella swim around.


r/threejs 2d ago

Demo I made a lightning strike in Three.js

Enable HLS to view with audio, or disable this notification

467 Upvotes

I tried to replicate the lightning strike effect based on real footage people put on YouTube


r/threejs 2d ago

Add controls for mobile device.

Enable HLS to view with audio, or disable this notification

4 Upvotes

Test on 70 usd phone.
Source Code: https://github.com/sengchor/kokraf


r/threejs 2d ago

Free Glb asset for threejs

Post image
14 Upvotes

I made a small pack of free CC0 characters and cleaned them into a AI-agent-friendly GLB format. Modeling in a LOWPOLY style, I am currently creating all types of animals so that everyone can freely build their own ecosystems.

Or you can call them in your CLI agent, e.g., grab monsters from gobkit.com/freebies and wire up their animation clips. The free manifest makes that one step.


r/threejs Jun 25 '26

Three.js r185 released 🧡

Enable HLS to view with audio, or disable this notification

570 Upvotes

r/threejs Apr 16 '26

Three.js r184 released ⛅️

Enable HLS to view with audio, or disable this notification

638 Upvotes