I made a web app to visualize my next hair color

4 months ago 2

Tress Assistant is an advanced 3D visualization tool that lets you preview new hair colors and styles before making a change. Experiment with a variety of looks under different environments and lighting conditions, explore both natural and creative options, and find the perfect match for your personality—all in an intuitive, user-friendly, and mobile-friendly interface. Discover confidence in your next hair transformation with Tress Assistant.

🌞 Realistic lighting and environment simulation (time, latitude, solar declination, and more)
👤 Customizable head models (male/female) with adjustable skin tones
💇‍♂️ Multiple hair styles and a wide range of natural and creative hair colors
🔄 Interactive 3D controls: rotate, zoom, and pan
⚙️ Advanced rendering options: axes helper, FPS limiter, and stats
💾 User settings persisted locally
🔒 Privacy: No login or account required, no 3rd-party trackings, no ads, all data stays on your device

Node.js v20 (recommended)
npm (comes with Node.js)

# Clone the repository git clone https://github.com/TressAssistant/Tress-Assistant-Web cd Tress-Assistant-Web # Install dependencies npm install

Start the development server:

Open http://localhost:5173 in your browser.

Preview the production build:

To optimize loading of 3D models, configure your server to set the following cache headers for files in /public/models:

Cache-Control: public, max-age=31536000, immutable

├── public/ │ ├── fonts/ # Custom font files │ ├── images/ # UI and preview images │ ├── models/ # 3D model files (.glb) │ └── robots.txt ├── textures/ # Texture assets ├── src/ │ ├── blocks/ # UI blocks and overlays │ ├── components/ # Reusable UI components │ ├── enums/ # Enumerations for options │ ├── environment/ # Lighting and environment logic │ ├── objects/ # 3D object components │ ├── pages/ # Page components (Home, etc.) │ ├── services/ # Utility and simulation logic │ ├── stores/ # Zustand state management │ └── styles/ # Tailwind and global styles ├── package.json ├── vite.config.js ├── tailwind.config.js └── README.md

Contributions are welcome! Please open an issue or submit a pull request for improvements or bug fixes.

See the About tab in the app for model and library attributions.

This project is licensed under the MIT License.

Made with ❤️ using React, Three.js, and Vite.

Read Entire Article