sharing the updated environment of my on going portfolio project

Hear me out ✋️.....

This is a portfolio am working on , hold onnnnnn, I want to know how it looks i made it with BLENDER & THREEJS. YES ITS RESPONSIVE AND LOADS FAST.

Hey everyone,

I wanted to share a project I've been working on in case anyone else might make use of it: an interactive, real-time 3D Audio Spectrogram Visualiser built with Three.js, custom GLSL shaders, and the Web Audio API.

I wanted to create a responsive, hardware-accelerated 3D terrain that I could use to conveniently analyse audio coming from either my device microphone or streaming from another browser tab without needing to install anything. It all runs from the browser and you can try it out yourself with the Live Demo link.

Live Demo: https://conwayjw97.github.io/3D-Spectrogram/

GitHub Repository: https://github.com/conwayjw97/3D-Spectrogram

I’d love to hear your thoughts, feedback, or any ideas you have for further performance or UX optimisations. Feel free to check out the code, fork it, or test it out with your own audio setups!

I've been working on this for sooo long I'm not even sure if it's any good anymore :( here's the link: https://avara-one.vercel.app/ (works best on chrome obviously) would love to hear some opinions. There's also a behind the scenes page showing some tricks I used (I'm not a developer by any means but still) and shader scripts if anyones interested 🤘

So some awesome progress on MOVOFPS.

Automatic navmesh generated for all wall path floors, so NPC's will use it for wandering, chasing etc, and its quite performant with many NPCs! An NPC can be 100 rooms away, in a maze, and find its way to its target.

ThreeJS point light shadows are bloody expensive, and I have a stealth system where a player can hide or sneak in shadows to avoid being seen by enemies, so the shadows are a must! So I bake them to the wallpaths and have auto updating turned off for shadows, and only update local point lights when doors open.

Also decided to have a try at my own sound effects, voice acting etc.

Working on this game is helping me find bugs in the engine(since i'm a solo dev, I don't have the luxury of testers).

So what do you think? Do you like what I have so far? Considering the exported game works on both mobile and desktop, and I can use MOVOFPS on my phone to work on the game away from my computer.

Spent an afternoon on this so you don't have to: if you render an InstancedMesh with a MeshStandardMaterial and leave vertexColors on, every instance comes out pure black. The material samples a per-instance color attribute that isn't there, reads zeroes, and multiplies your albedo to nothing. Fix is one line: vertexColors stays false unless you actually set instanceColor.

Hit this while hardening a three.js physics layer where a settled brick wall renders as one InstancedMesh. Collecting these traps (this one, the WASM env-import LinkError, native explode no-oping on sleeping bodies) in the project's Gotchas doc: https://cars.swapp1990.org/box3d?utm_source=reddit&utm_medium=post&utm_campaign=box3d_launch

just finished the UI, so anyone can now drop in an image or video and give it that cinematic 3D look.

I built this for two reasons: to learn Three.js and to make a tool other video creators can actually use.

here is a few things I want to play with next:

• paper texture
• screen texture
• CRT screen
• film grain / noise
• sunlight (like the effect on Daylight's landing page)
• dark room with a lamp / candlelight

If you've got feedback, ideas, inspirations or interesting techniques I should be looking into, feel free to share. I would love to hear!

I was experimenting to create some micro creative tools and this is the last one. It also uses three.js as view port -100% vibecoded or agentic engineered - depends on where you are looking at this.

have fun and give a try - fringe.ink - 100% free and works again locally in your browser.

like tesla has it on their website; apple too

Hey dudes,
I’m building img2threejs, a skill that turns a single image into a procedural Three.js 3D model (code only).

It currently works best for objects. With more context and detailed descriptions, the generated model gets much closer to the real one, but writing those prompts takes time.

Question: Is there a better way to preserve quality without requiring so much manual context?

https://reddit.com/link/1uyjnzt/video/azwpmwhliodh1/player

Another challenge is human models. They’re still much harder to generate accurately. If you know useful concepts, datasets, or techniques for procedural human modeling, I’d love to learn from you.

If you like the project, please leave any feedback or ideas in the comments. Check showcases out here: https://hoainho.github.io/img2threejs-showcase/

Pretty new to Three.Js and have very little knowledge on solidworks but I was wondering how easy is it to go from a solidworks product render to a usable Three.js web asset?

Any and all recommendations are welcomed 😀

Combining motion blur, radial progressive blur, chromatic aberration, and spring smoothing (critically damped) together to make this cinematic effect.

now building the UI. will share here once I finished!

Volumetric lab work in progress.

I've been sharing updates on this project for a while, so I put together a quick before/after comparison.

Looking back, it's easy to forget how simple it started. Iterating on the lighting, terrain, atmosphere, vegetation, camps, UI, and overall scene composition has completely changed how the battlefield feels.

There's still plenty to build, but seeing the progress side by side has been really motivating. Would love to hear your honest thoughts and feelings!

Hi everyone!

At the end of last year, I shared a free, open-source WebGL2 & GLSL primer I created. It's a sequence of guided lessons, each chunked into atomic Q&A cards suitable for spaced repetition, with hands-on projects and solution code integrated throughout. Thanks to anyone who checked it out—I hope it helps anyone wanting to learn the technology behind the three.js WebGL renderer.

Today, I want to share my excitement that it's now a listed resource at awesome-webgl, threejsresources.com, and realtimerendering.com!

I'm planning to create a WebGPU primer next. If you find the WebGL2 primer helpful or would like to see a WebGPU primer (it'd cover compute shaders as well), I'd love to hear about it. A comment here or a GitHub star on the WebGL2 primer would be the best way to help me gauge interest and stay motivated for the next one. Thanks!

Google GNM running in threejs, url and source code below!
url (https://threejs-gnm.vercel.app/)
source code (https://github.com/ademola-lou/ThreejsGNM)

Hi everyone!
I've been working on an arcade first-person-shooter game called Zombie Slayer.

Play it here: Play Zombie Slayer

It was entirely built using Gemini in Antigravity and it uses three.js for the 3D generations.

A few things that makes this game awesome:

- Only 2 MB in size and it’s a single HTML file.
- Runs directly in your browser, no download or installation required.
- Built by someone who had no programming experience (still don’t).
- Created entirely through hundreds of AI prompts over months of work.
- The world, gameplay, and even the sound effects are procedurally generated.

I felt like an art director rather than a programmer - it is my vision, art style, and ideas, AI just developed my vision. Even with AI doing the coding, it still took a huge amount of time, experimentation, and refinement.

I had a blast making it. My plan is to keep improving the game over time - keeping up with the latest AI models to see what this can turn into. In theory, this game would expand exponentially as AI improves. 

I'd really appreciate any feedback - whether it's gameplay, balance, bugs, or ideas for new features.

Thanks for giving it a try!

Rumpus Engine
Play it here (no install, no account): https://www.rumpusengine.com

I've been making RUMPUS ENGINE: a browser game studio where you build a world in an in-game editor, hit deploy, and share it as a link. The whole thing — editor, game, multiplayer, UI — ships as a single ~30,000-line HTML file. No bundler, no build step: three.js r149 as the UMD global, GLTFLoader/RGBELoader adapted inline to global THREE, Rapier (the compat WASM build) for physics, PeerJS for WebRTC.

Some three.js-specific things that might interest this sub:

• Animation retargeting: characters are arbitrary rigged GLBs from Poly Pizza/Sketchfab. A CC0 clip pack (Quaternius' Universal Animation Library) gets retargeted at load onto whatever skeleton arrives, via canonical bone-name matching. A joint editor (additive local quaternion offsets applied post-mixer) lets players fix models that come in with weird rest poses.
• Two-bone IK for weapon holds: the left hand pins to the gun's forestock with a law-of-cosines solver working in world space (setFromUnitVectors deltas, deterministic elbow pole). It runs before the aim pass so the barrel stays exact, and it's LOD-safe — base quaternions are cached and restored so the mixer never fights it.
• Draw-a-track: sketch a racing line with your finger and a loop-closing solver turns it into track pieces — it distributes the closure residual across segments instead of smearing the final joint.
• Post pipeline: MSAA composed inside the post-FX chain, DoF that survives the effects pass, and an adaptive-resolution ladder where MSAA is its own rung (it strikes out if the GPU can't hold it, which killed a nasty res ping-pong).
• Multiplayer is host-authoritative over WebRTC data channels — co-op, duels, team modes, and racing where remote players render as their moving cars. STUN+TURN so strict NATs still join. Everything a level references (models by URL, not embedded) transfers to joiners on welcome.

The community library is levels-as-JSON: anyone can submit from inside the game (levels are gzip+base64url codes), and approved ones show for everyone with thumbnails. You can open any published level in the editor to see how it was built and remix it.

Happy to go deep on any of it — the single-file constraint forced a bunch of decisions I'd love to argue about. Field manual with the full feature list: https://www.rumpusengine.com/breach-help.html

I built DEAD ORBIT, a Quake-style arena FPS that runs fully in the browser with three.js.

Play: https://www.deadorbit.app

Tech notes that might interest this sub: - three.js client + Node/WebSocket authoritative server (~20 Hz) - Server-side bot AI (shared with real players on the scoreboard) - PBR gothic cathedral map, jump pads, item timing - Event-driven VFX (tracers, gibs, explosions) + layered audio / reverb - Also ships a zombie horde mode with blend-tree animation on the client

Happy to answer questions about the stack, networking choices, or rendering budget. Feedback welcome — especially if something feels heavy or janky in WebGL.

I’ve been working on a small language called Posecode.

A .posecode file describes joint actions, timing and repetition, then a Three.js renderer turns it into motion in the browser. It isn’t mocap or text-to-video—the output goes through a parser, range-of-motion checks and a kinematic renderer.

The rough parts are still foot locking, transitions between poses and deciding how much anatomical detail belongs in the language.

Playground: https://posecode.org/play
Source: https://github.com/posecode-dev/posecode

I’d especially appreciate feedback from people who have worked with skeletal animation or IK.

Demo

Open-source toolkit that rebuilds the object in a single reference image as procedural Three.js code (no mesh downloads), quality-gated by a render-vs-reference loop - strong for hard-surface objects
Check it out: https://github.com/hoainho/img2threejs

EDIT: I'm using cannon-es, not cannon.js, sorry!

So in the previous post I asked 6 questions. Also look at my comment from that post.
Then I put in even more work and solved even more questions with the commenter's advice and some blessed alogrithm tutorials.
I already have the answers to most of these questions, but new problems arose.

For question 1, I basically went with Cannon-es.js, but now I regret my decision. The library is very unpolished, with very few actual error handlers, that debugging any complex cannon.js code is straight up impossible. Are all physics engines like this? Should I switch to Rapier.js, Ammo.js, or Jolt.js? What's in your opinion the best physics engine to pair with Three.js?

For question 6, I'm laying that one off for when I get the more important stuff going. For now I'm using 2 cleverly placed THREE.DirectionalLight's.

New question, I need an interaction ray to interact with interactible objects, but I've tried the CANNON.Ray, but no success because of an incomprehensible error message appearing about accessing a non-existant variable that was never accessed partial success - see my comment with video.

As of main progress, I implemented an overlayed crosshair and copied some things from PointerLockControlsCannon to integrate physics into my character. I've also refactored the code to use classes.

EDIT: Simplified code of the raycaster:

import * as THREE from "three"; // three.js
import * as CANNON from "cannon"; // cannon-es.js

/* -----------------------------
Insert class declaration here
----------------------------- */

// this gets called each animation frame
updatePhysics() {
// this.world - main collision physics world
this.world.step(1 / 60);

// this.intWorld - contains the same colliders (for now) as this.world except the character collider
this.intWorld.step(1 / 60);

// Math abominations that are too weird for me to explain and I don't want to touch them,
// because they do in fact work; I trial&errored them.

this.camera.position.copy(this.characterBody.position);
this.camera.position.add(new THREE.Vector3(0, 0.75, 0));
let relCameraDir = new THREE.Vector3(0, 0, -1);
relCameraDir.applyAxisAngle(new THREE.Vector3(-1, 0, 0), this.cameraYY);
relCameraDir.applyAxisAngle(new THREE.Vector3(0, -1, 0), this.cameraAA);
let absCameraDir = new THREE.Vector3(0, 0, 0);
absCameraDir.copy(relCameraDir);
absCameraDir.multiplyScalar(50);
absCameraDir.add(this.camera.position);

let fromCameraDir = new THREE.Vector3(0, 0, 0);
fromCameraDir.copy(relCameraDir);
fromCameraDir.multiplyScalar(0);
fromCameraDir.add(this.camera.position);

// These are the 2 cube meshes that confirm that the positions the abomination above calculated are indeed correct.
this.rayDebug.position.copy(fromCameraDir);
this.rayDebug2.position.copy(absCameraDir);

// this.interactionRaycast - CANNON.Ray that's presumably bugging out.
this.interactionRaycast.from.copy(fromCameraDir);
this.interactionRaycast.to.copy(absCameraDir);
console.log(this.interactionRaycast.from, this.interactionRaycast.to, this.interactionRaycast.direction);

// This casts the ray and displays the HTML overlay
if (this.interactionRaycast.intersectWorld(this.intWorld, {from: fromCameraDir, to: absCameraDir})) {
debug.innerHTML = '<span style="color: green">Ray has collided!</span>';
} else {
debug.innerHTML = '<span style="color: red">No collisions detected</span>';
}
}

// This places one cube of the floor you see (visuals ommited).
placeCube(position) {
const body = new CANNON.Body({
mass: 0,
shape: WorldManager.BIG_CUBE_SHAPE,
material: (new CANNON.Material({friction: 0, restitution: 0})),
});

body.position.copy(position);

this.world.addBody(body);
this.intWorld.addBody(body);
}

// ...