As an avid Vans shoe collector and owner of at least two custom pairs, I wanted to take a shot at making a true in-browser shoe customizer.
This tool utilizes fabric.js for the 2D art creation. Fabric is an extremely powerful javascript library built for HTML5’s native Canvas element. The library provides a huge array of functions that can be used to create in browser 2D editors. I opted for the most simple tools that could be used to paint just about anything!
Because this tool is built in React, any adjustment made to the 2D canvas is immediately reflected on the 3D shoe model. The 2D image is sent as a URL string to a Three.js material and updated instantly! This method only replaces the base color texture for the canvas cloth portions of the shoe. The normal maps and other portions of the shoe remain the same.
The shoe was modeled in Blender3D and textured in Substance Painter.