Mike Chaves | AI-Native Design Engineer

Back to projects

project_details.sh

$ cat material-explorer.json

title: Material Explorer

category: web

client: Personal Project

date: 2026 (active)

stack:TypeScriptReact 19Three.jsReact Three FiberVite 7Playwright

proof role: concrete evidence for the operating model

Project Overview

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.

Revisit operating model

View on GitHub Live Demo

artifact_viewer.sh

1 artifact

Primary artifact

Primary project image for Material Explorer.

Situation

•Overview

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.

•Challenge

How might we simplify the process of creating and customizing 3D materials for the web while providing immediate visual feedback in an intuitive interface?

•Context

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.

Task

•Overview

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:

•Simplify Material Creation

by providing an intuitive interface for adjusting material properties without requiring deep technical knowledge.

•Provide Real-time Feedback

through immediate visual updates as users modify material properties.

•Ensure Cross-device Compatibility

by creating a responsive design that works well on various devices and screen sizes.

Action

1.Built a full PBR material lab

Implemented real-time controls for color, metalness, roughness, emissive, clearcoat, transmission/IOR, opacity, and texture-map channels with instant preview updates.

2.Shipped rapid-iteration workflows

Added draft autosave/restore, undo/redo history, compare mode, duplicate/randomize utilities, and draft JSON import/export to speed creative exploration.

3.Improved sharing and portability

Added shareable URLs for material state, JSON import/export, and GLB export options for better collaboration and reuse.

4.Hardened quality for ongoing delivery

Set up CI quality gates (format, lint, type-check, tests, build, bundle checks, Playwright e2e) and tightened release/README hygiene for maintainability.

Result

•Faster iteration loops

Reduced friction for testing material ideas by combining real-time preview with autosave, history, and one-click power tools.

•Portfolio-ready engineering signal

Demonstrates modern React/TypeScript architecture, 3D interaction design, and disciplined shipping practices in an actively maintained repo.

•Better project communication

Live demo + GitHub source + structured project narrative make the work easier for recruiters and hiring teams to evaluate quickly.