ZE.

Zefolio

Cover Image for Zefolio
TypeScript
React
WebGL
Three.js
React-Three-Fiber
Cypress
Nx

What

A WebGL-based 3D landing page for the portfolio.

Features

  • HTML and WebGL merging
    • HUD display
    • iframe embedding
    • HTML rendering
    • State managed through React and R3F
  • staging
    • dynamic lighting using ambient, directional, spot lights
    • environment map
  • animations
    • custom GLSL shaders for special effects
    • react spring based animation
  • SDF-based text rendering
  • models
    • GLTF models (with draco compression)
    • model animation
  • tuning and debug
    • parameters tuning using Leva
  • an easter egg

Feedbacks