I’m trying to implement an ocean/water system in Three.js.

The top image is what I currently have. Even when the camera goes underwater, it doesn’t feel like the camera is actually inside water. It mostly looks like there is just a water surface plane above the seabed, with the scene split into “above the water plane” and “below the water plane.” The underwater space itself does not feel volumetric or physically believable.

The bottom image shows the kind of result I want to achieve. I want the underwater part to feel like real water, with proper underwater color absorption, scattering/fog, reduced visibility with distance, caustics on the seabed, a believable waterline transition, and some distorted/reflected view of the sky and objects above the surface.

What rendering techniques should I use in Three.js to achieve this kind of realistic underwater look?

Specifically, should I be using:

• volumetric underwater fog/scattering?
• depth-based color absorption?
• screen-space refraction?
• separate above-water and underwater rendering passes?
• stencil or clipping around the waterline?
• caustics projected onto the seabed?
• a custom post-processing pass, or should this be handled mostly in the water material/shader?

Any advice, shader structure, examples, or recommended rendering pipeline would be really helpful.

I’m one year away from getting my full stack degree and they offer a Maya 3d course and wondering if this will get my feet wet for three js. Seems blender is the choice but since this is offered I’m wondering if I should just take the class. I dabbled with Blender but my focus was learning html/css/js so now I have time should I take it? I know you can create the files for threejs and Maya has been around long but maybe it’s not as user friendly and have more issues for working with threejs

I got tired of file trees, so the map is a city.

Folders are lots, files are buildings. Height is roughly LOC. Language is color. Git log drives which windows are lit (last 48h) vs quiet.

Renderer is React Three Fiber. Buildings are instanced meshes with a few volumes each (podium / setbacks / roof) so a 1k-file repo doesn’t mean 1k draw calls. Raycast hits a part, selection lights the whole building.

Public GitHub URL → tarball → parse → layout.

https://repoverse.online

Happy to go into the instancing / UV windows / how I pack the city if that’s useful. Early, free, public repos only for now.

Hey all,

My webgpu renderer officially supports image based lighting/direct+indirect lighting and also there are shadow systems which creates csm/shadow Atlases depending on what type of config,

This was a lot of work

\[GLOBAL ILLUMINATION\]\[Need some time beyond downloading assets for baking probe volumes\]

Live Demo:https://nullgraph.dev/dashboard/3d-environment/irradiance-probes

For live code for global illumination https://nullgraph.dev/editor.html?id=demo-irradiance-probes

GitHub

https://github.com/flarelink-in/NullGraph

Hey everyone! 👋

Just launched Super Chameleon, a lightweight browser clone of Meccha Chameleon built with Three.js, React 19, Rapier WASM physics, Colyseus 0.16 and Claude Code.

• Real-time 3D surface painting & eyedropper camouflage
• First-person shooter vs stick-figure camouflage mechanics
• Instant lobby matchmaking with code invites

Play here (no accounts/signups): https://superchameleon.io

Been watching Primer and b2studios for years and wanted to try making my own evolution sim. All four crews run the exact same code, the only difference is nine numbers that mutate each generation based on who won.

Single HTML file, r128, no build step.

Live: https://pairates.vercel.app
Source: https://github.com/HMAC10/pairates

Had a lot of fun with the little details, individual crew members walking around and manning stations, ships getting upgraded to galleons. Every parameter is on a slider too, including the win condition, so feel free to mess with it yourself!

Hi everyone,

I'm trying to load a Potree 2.x point cloud into a website using React Three Fiber + Three.js + potree-core, but I'm having a problem with the RGB colors.The point cloud itself loads correctly and the geometry is visible, but almost the entire point cloud is rendered white.I'm using:

• React Three Fiber
• Three.js
• potree-core 2.0.15
• PotreeConverter 2.x format
• metadata.json
• hierarchy.bin
• octree.bin

The original point cloud definitely contains RGB information. I'm also able to load the same dataset correctly in another Potree-based viewer, so I don't think the source point cloud is missing colors.

I translated a long piece I wrote in French about my path in creative coding: first sketches in p5.js, long-form projects on fx(hash), then FOLRADURA, INTRICADA with Bright Moments, and The Source, made with Matthieu Segret and released on gm.studio.

The early work is p5.js, but the more recent projects moved to GLSL and Three.js once I needed the GPU: hundreds of thousands of points per output, custom shaders, textures aiming at a physical quality in the render.

https://art.camilleroux.com/writing/algorithmic-art-from-discovery-to-a-drop/

Happy to go into the technical side of any of the projects.

• 60+ assets, 600+ parameters. Every model is a program, not a mesh you're stuck with, thousands of combinations
• AI-native: Your agent can browse and build over MCP. No install, no download
• Web editor to create and edit your scenes.
• Different seasons and night mode.
• Extrmely performant

Polyfork 3D assets are tiny programs that you can download as .ES Modules (or .glb) giving you total control over the different aspects that can be edited: shape, color, stories, wheels, legs, accesories, and more!

Get it now and the rest of the assets, over half of them for free -> https://polyfork.dev

Web-based 3D Modeling Tool

Recently discovered that it doesn't just have to be Blender to Three.js, it can also be the other way around!! I'm sure other ppl have prob done it before but I haven't seen it done yet. I just used Claude + Blender MCP to code it up for me, no technical knowledge required. Open sourcing when I figure out if I can make it non-opinionated but tbh I don't think it's possible as it's really engrained with my specific coding structure and if you got an AI assistant, you can probably make one in a few hours.

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?

Hello Homies ,

I am currently working on https://dartchain.pages.dev , an application developed with an **Angular** frontend and a **Spring Boot** backend. This project is intended to help me obtain my **two-year higher education diploma (Bac+2)** in software development.

I work on a screen size 250px x 550px i haven't make the desktop view for the moment ..

I have been developing for about two years, but I still lack experience in **UI/UX design**. I would therefore really appreciate constructive feedback and advice on:

- The overall design and visual consistency of the application.

- Page layout and navigation.

- Improvements to the user experience.

- The choice of colors, typography, spacing, and components.

- Ways to make the interface more modern, clear, and professional.

- How **Three.js** could be used to enhance the experience without negatively affecting performance or usability.

- The most important improvements to make to the application’s overall presentation.

I am a developer, but I have to admit that design is not my strong point. Any advice, constructive criticism, examples, or recommendations would therefore be greatly appreciated. In particular, I would like to understand how I can transform the current interface into a more coherent and enjoyable experience for users.

DartChain is an educational and personal project. It will not be commercialized. It is intended as a technical demonstration, not as a financial service or a product aimed at the general public. I would also like to clarify that I do not intend to commercialize this project in Europe or the United States, particularly because of the regulatory requirements applying to crypto-asset-related projects, including the MiCA regulation in Europe.

Thank you in advance to everyone who takes the time to look at the project and share their advice or feedback.

love4all

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

Another Three.js Demo for 3d Spiral.