Web Development
Material Explorer is a production-minded interactive web app for creating, comparing, and sharing physically based 3D materials in real time. Built with React + Three.js/React Three Fiber, it now includes autosave/restore, A/B compare, texture workflows, draft history, and shareable presets for rapid iteration.
Personal Project
2026 (active)
Web Development
Product Design + Frontend Engineering / Interactive 3D Tooling / Developer Experience
3D material creation and customization typically requires specialized knowledge and software, creating barriers for designers and developers who want to experiment with materials for their web-based 3D projects. Existing tools often lack real-time feedback or are too complex for quick iterations.
How might we simplify the process of creating and customizing 3D materials for the web while providing immediate visual feedback in an intuitive interface?
With the growing popularity of 3D on the web through libraries like Three.js and React Three Fiber, there's an increasing need for accessible tools that bridge the gap between technical implementation and visual design.
The goal was to create a user-friendly web application that makes 3D material creation and customization accessible to both developers and designers. The application needed to:
by providing an intuitive interface for adjusting material properties without requiring deep technical knowledge.
through immediate visual updates as users modify material properties.
by creating a responsive design that works well on various devices and screen sizes.
Implemented real-time controls for color, metalness, roughness, emissive, clearcoat, transmission/IOR, opacity, and texture-map channels with instant preview updates.
Added draft autosave/restore, undo/redo history, compare mode, duplicate/randomize utilities, and draft JSON import/export to speed creative exploration.
Added shareable URLs for material state, JSON import/export, and GLB export options for better collaboration and reuse.
Set up CI quality gates (format, lint, type-check, tests, build, bundle checks, Playwright e2e) and tightened release/README hygiene for maintainability.
Reduced friction for testing material ideas by combining real-time preview with autosave, history, and one-click power tools.
Demonstrates modern React/TypeScript architecture, 3D interaction design, and disciplined shipping practices in an actively maintained repo.
Live demo + GitHub source + structured project narrative make the work easier for recruiters and hiring teams to evaluate quickly.