Resources

Freelance Three.js Developer

Interactive 3D Experiences for the Web

I specialize in Three.js math—leveraging my background in 4D sacred geometry to build performant WebGL experiences that most agencies find technically impossible. My 8 years include custom GLSL shaders, 100k+ vertex optimization for mobile, and particle systems with physics simulation. I write the shaders myself, not just configure presets.

Three.js
React Three Fiber
WebGL
GLSL
Postprocessing

The Artist/Engineer Pivot

My path to Three.js wasn't through coding tutorials—it was through mathematics.

From Sacred Geometry to WebGL

I spent years studying 4D polytopes—geometric shapes in four dimensions that project into 3D space. Hypercubes, 120-cell polytopes, Penrose tilings. This isn't abstract art; it's applied mathematics. The same thinking applies directly to WebGL:

  • →Vertex generation: Parametric equations → geometry buffers
  • →Shader math: Trigonometry, noise functions, transformations
  • →Animation: Time-based interpolation, easing curves
  • →Optimization: LOD systems, instancing, frustum culling

This is why I can write custom shaders, optimize geometry at the vertex level, and debug visual issues by understanding the render pipeline—not just stack overflow answers.

What I Build

Custom Shaders

Simplex noise plasmas, mouse-reactive distortion, procedural textures. I write GLSL, not just configure presets.

Particle Systems

Physics-based particles with spring dynamics, repulsion forces, and Bloom post-processing for that neon glow.

Interactive Scenes

Mouse tracking, scroll-based animations, camera controls. 3D that responds to user input.

Mobile Optimization

100k+ vertices on mobile. DPR clamping, graceful fallbacks, progressive loading. Performance is non-negotiable.

Technical Deep-Dive: Interactive Particle Text

One example from my portfolio—the particle text system on this site's homepage.

// Particle Count: Thousands of points
// Canvas Resolution: 4000×1500 for text sampling
// Physics: Spring return (0.08), friction (0.90), repulsion radius (2.5 units)
// Colors: HDR multiplied by 2.0 for Bloom pickup
// Post-processing: Bloom (threshold 0.2, intensity 0.8)
// Mobile: Fallback to simplified rendering, no Bloom

This isn't a library component—it's custom code built from scratch. The full implementation is documented in /llms-full.txt.

My Three.js Stack

React Three Fiber ecosystem with custom shader support.

3D Graphics

Three.js

Core WebGL library, custom geometry, BufferGeometry optimization

React Three Fiber

Declarative React renderer for Three.js, scene management

@react-three/drei

Helpers library—shaders, loaders, controls, effects

@react-three/postprocessing

Bloom, tonemapping, vignette, SSAO, custom effects

Shaders

GLSL

Custom vertex and fragment shaders, noise functions, procedural textures

Framework

Next.js

SSG for initial render, dynamic imports for 3D code splitting

Frequently Asked Questions

I approach Three.js from first principles—my background is in 4D polytope mathematics and parametric architecture. This means I write custom GLSL shaders, not just library presets. I can optimize geometry at the vertex level and debug visual issues by understanding the render pipeline, not just googling error messages.