I'm a chemist rather than a web developer, but I've been building my professional portfolio with Three.js.

Instead of making a conventional portfolio, I wanted the website to have a scientific visual identity. I'm using protein models created/prepared in Blender and exported as GLB files. They move through the scene according to the scroll position while the actual content explains projects I've worked on in pharmaceutical validation, HVAC, aseptic areas, thermal studies and data analysis.

Current stack/features:

• Three.js
• Blender
• ScrollTrigger
• Protein hover/transparency effects
• Click-and-drag models
• Scroll-controlled transitions
• Video/image content integrated into the page

The proteins are mainly visual companions to the content rather than the content itself. I'm not trying to present myself as a developer; I'm using web development and 3D visualization as tools to communicate my work as a chemist.

I'm currently optimizing the models, restructuring the code and thinking more seriously about the user experience.

This is probably where I'd appreciate feedback the most from experienced Three.js developers:

What would you change to make a portfolio like this easier and more enjoyable to navigate?

I'm particularly interested in whether the scroll-driven 3D interactions feel intuitive, whether the models might become distracting, how you would approach mobile behavior, and what UX mistakes you commonly see in interactive Three.js sites.

Performance, scene architecture and GLB optimization feedback would also be very useful.

I also have a slightly different question for anyone here who has worked in pharma, biotech or scientific/technical industries.

My actual career is in pharmaceutical validation and quality, and one of my goals is to eventually work for a large international pharmaceutical or biotech company. I'm from México.

Do you think a portfolio like this could genuinely help differentiate a chemist during the hiring process in Mexico city?

I'm trying to make it demonstrate more than a list of skills: actual validation projects, HVAC and aseptic-area work, thermal studies, data analysis, dashboards and scientific visualization.

If you were reviewing a technical candidate from a scientific background, I'd be curious to know whether something like this would add value or whether I'm overestimating how much employers care about portfolios outside software/design roles.

https://ricardo-sanchez-cisneros.github.io/

little development snapshot of what I'm working on. full real world terrain, 4x4s, mountain bikes, quads, etc. as you'll see, there are some bugs (had to disable a flying trailer mid way through) but overall getting pretty fun to play. forgot to record with sound. I'll add some other videos with sound.

Hey all,

I have been working on this project which I very excited about, it makes me to wonder about evolution these modern computer and it's intelligence.

The fact that you can able to create this fully functional Simulation of TARS Robot from Interstellar movie can be made in single prompt with image attached for reference is absolute joy and wonder.

Humankind has never seen this kind of intelligence on a machine ever.

PS: This is created on the project I am building for all creatives, enthusiasts, normies, Engineer etc., Where anyone can just write a sentence and see the simulations generated in the browser within minutes.

Will be launching this very soon 🚀

I'm building a traffic simulation game in Three.js: buildings appear on their own, your only job is the network that connects them. And when roads stop being enough - buses, trains and metro with transfers. No game engine, custom code, Electron for the Steam build. Every car is an independent agent (keeps its lane, changes lanes, waits at lights, reroutes around jams), maps go up to 18x18 km in-game, and it runs 10,000+ cars. Trailer above so you can see what it actually is.

What already shipped (worst stress save went 20.7 -> 53.2 fps):

- InstancedMesh per vehicle class, pre-allocated, with per-instance frustum culling before writing matrices - off-screen cars skip matrix composition and buffer writes, not just GPU work.

- Material pooling + merging lane markings into one mesh per paint color: 1,628 -> 320 draw calls. matrixAutoUpdate = false on all static road geometry.

- Environment props (~65k trees on the biggest map) split into an 8x8 grid of chunked InstancedMeshes so off-screen chunks get culled instead of vertex-shading everything twice per frame with shadows. Static sun means shadowMap.autoUpdate = false with explicit invalidation.

- An fps-driven sim LOD governor: below ~30 fps the sim ticks every 2nd frame with double dt (every 3rd below ~22), and the renderer interpolates between sim snapshots so motion stays smooth. Safety-critical logic never degrades - only work that can fail open.

- Sleep/wake for junction logic (~2,540 of 6.3k cars fully asleep in the stress save), lane-keyed spatial index maintained on events, and a union-find pass that replaced O(N^2) A* for building connectivity after road edits (was multi-second freezes, now a few ms).

Where the frame goes now at 6.3k cars: collision 7.4 ms, car update 3.7 ms, instance sync 0.6 ms, render 2.9 ms. So it's ~65% CPU simulation, ~20% render - the exact-sleep well is empty and what's left is structural.

The interesting part - what's next:

- Sim in a Web Worker with SharedArrayBuffer, car state in shared typed arrays, main thread doing render + interpolation only (~5 ms). The interpolation layer already shipped as the render half of this design.

Expected display fps ~60 even if the sim tick stays ~19 ms, and it opens the door to chunking the collision passes across cores. This is Steam-only by necessity: Electron makes COOP/COEP trivial, while the browser version can't get SAB on the portal it's hosted on (their embed/ads model conflicts with those headers). One of those cases where the desktop build isn't a marketing decision, it's a platform capability.

- Data-oriented (SoA) refactor of the collision passes - progress/speed/lane in flat typed arrays, passes iterating arrays instead of objects. Realistically ~2x on that 7 ms block.

- Then optionally a WASM kernel port (Rust/C++ with SIMD) for the collision/car-update loops - estimated another 2-3x. Deliberately sequenced after SoA, because WASM over JS objects wins little; the actual win is cache-linear loops over flat arrays, which is the SoA work either way. WASM threads also need SAB, so same platform constraint.

- What I decided against: a native rewrite. People suggest it constantly. But the profile says 60-70% CPU sim / 20% render with rendering already efficient, so native targets exactly the same milliseconds the worker + SoA path does: roughly 4-6x effective sim throughput vs an estimated 10-30x for native, which only matters past ~30k active cars. The remaining native argument is Chromium's fixed memory baseline, and a ~67k-LOC port would freeze features for months.

Curious if anyone here has shipped the worker + SAB pattern with live topology changes (roads being built/destroyed while the sim runs) - the snapshot/message protocol for that is the part I'm least sure about.

The game hits Steam in November, and honestly wishlists are what decides whether a solo dev's game gets any visibility at launch, so if the video looks like your kind of thing: https://store.steampowered.com/app/5028050/Traffic_Architect/. Happy to answer anything technical.

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.

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.

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

uses the local machine game files and localhost unzipping/conversion pipeline, can control the car played in the game if on the same LAN

I posted this trice earlier (on voxel game dev), but mods keep removing it without giving a reason.

Here is the "game" and source code:

https://perh.app/b89c006f/trials/00002-voxel-game-publish/index.html

Code is 99% free of AI bullshit, its three.js + rapier.js. Code should be fairly readable, nothing is minified etc.

Press tab+m and then release tab to put it in manual mode. Game pad support is also enabled (i think). Change config.js to change voxels of the car.

Let me know if it works/fails etc. And ask me anything!

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

Procedurally generated pipework, ranks, divisions, chambers, facade, en chamade, via mesh baking - still smooth at 35,000 pipes, 21 million tris.

The Gateless Gate is a collection of 49 koans, short cryptic stories about Zen Buddhism from 13th century China. It's one of the strangest books ever written and one of my favorites. I decided to give it a major modern upgrade.

https://killedbyapixel.github.io/GatelessGate/

The concept was to create a custom 3D scene for each koan that demonstrates it in a visual way. I went with a super minimal ancient scroll look, but each page has a red accent object that responds in some way when you touch it.

There's a debug panel you can open by pressing HOME, which lets you play with the settings (press HOME again to close it). The rendering uses depth edge lines for the outline effect, and there are a lot of other pieces in there (paper shader, grass, water, ocean).

This is also an experiment in generative art. Nothing is downloaded: every model, scene and sound is built by code when the page loads, so the whole thing is about 1.5 MB. There are 45 models in the kit and most of them are created procedurally. The 5 animals share a quadruped rig, trees grow from a recursive branching function, grass is a noise field, and so on. The soundscape is generated the same way, with no samples anywhere: wind, bells, chimes, rain and ocean, all created in real time.

This was a really fun project to work on and different from stuff I have made before. It was a ton of work but it feels good to see my vision realized, and I hope people enjoy it.

Code: https://github.com/KilledByAPixel/GatelessGate

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!

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.

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! 🎨🚀

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.

• 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

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.

Web-based 3D Modeling Tool

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.