The colormass configurator can be used to render custom fabric designs, which are provided as color images. Internally, the configuator embeds those images into a scanned, high-quality base material. This material contributes to the overall appearance and makes your design look like wool, cotton or linen.
Examples
The following images were created using this sample code and these two images as input:
Setting the scene
For this example, we set up a test scene on the colormass platform. It consists of a chair and uses a wool-like base material. The Overlay Material Color node takes care of replacing the color information of this material and scales your pattern to the desired width and height.
While the base material is fixed, the overlay image as well as the width and height are transferred to the configurator via the corresponding input node (image input and number input).
Adding the markup
Once the scene has been prepared, the configurator component can be added to the page.
// wait for the configurator component to be available
customElements.whenDefined("cm-configurator-main").then(() => {
cmConfigurator = document.querySelector("cm-configurator-main")
})
// pass the width input to the configurator
async function updateWidth(width) {
cmConfigurator.setParameter("width", "number", Number(width))
}
// pass the height input to the configurator
async function updateHeight(height) {
cmConfigurator.setParameter("height", "number", Number(height))
}
// pass the image input to the configurator as an object URL
// note: the image parameter supports passing an image via
// - URL
// - data URL (inlined base64)
// - raw data (Uint8Array)
async function updateOverlayImage(files) {
const file = files[0]
const image = await fetch(file)
const imageBlob = await image.blob()
const imageUrl = URL.createObjectURL(imageBlob)
await cmConfigurator.setParameter("overlayImage", "image", imageUrl)
}
We use the ‘setParameters’ API, which is provided by the configurator component, to transfer the input data to the renderer. You can find a detailed explanation in our guide on .
The complete example code can also be found in our .
