Image Upload
  • Dark
    Light

Image Upload

  • Dark
    Light

Including an image is a common way to personalize a product. The following steps provide a walk-through of setting up a canvas to accomodate an image uploaded via a configuration attribute.

1.) Navigate to Assets, create a new Texture
2020-08-04_13-30-05.png

2.) From the properties panel, include a 'Canvas Composite' Operator
2020-08-04_13-08-12.png

3.) From the properties panel, include a 'BlackWhite' Operator
2020-08-04_13-08-12 BW.png

4.) Navigate to Logic Mode, create a Texture Asset Attribute. (It will be named "Logo" for the purposes of this example)
2020-08-20_10-34-37.png

5.) Create a Rule and name it
2020-08-04_14-39-28.png

6.) Create a set property Action
2020-08-04_14-41-28.png

7.) Set the sourceImage property of the Canvas Composite Operator as the target
2020-08-04_14-42-55.png

8.) Set the toggle to 'Attribute' and ensure the Logo Attribute is selected
2020-08-04_14-44-24.png

9.) On the relevant Material Asset, create a Texture Asset Attribute, using the same name as above.
2020-08-20_10-34-37.png

10.) Ensure the Logo Texture is assigned to a slot on the Material (Base Image is used in this example)
2020-08-04_14-45-47.png

11.) On the relevant Model, create a Texture Asset Attribute, using the same name as above
2020-08-20_10-34-37.png

12.) Ensure the relevant Material is referenced on the appropriate mesh node
2020-08-04_14-49-26.png

13.) Create the Catalog Item and include an Image Upload Attribute
2020-08-04_14-51-59.png

14.) Associate the appropriate Model with the Catalog Item
2020-08-04_14-53-07.png

15.) Test

window.threekitPlayer({ authToken: "c2135b28-a743-435d-b458-ab8940c8ec22", el: document.getElementById("threeplayerdiv"), assetId:"600c76d8-ffb1-4fde-aafb-4ecd53deed70", showConfigurator: true})
Was This Article Helpful?