Text Inputs
  • Dark

Text Inputs

  • Dark

Product personalization provides an added boost to any configuration experience. To create a canvas for text input on a Catalog Item, make use of Operators on the Texture Asset. An example is provided below:

1.) Navigate to Assets, create a new Texture.

2.) From the properties panel, include a 'Canvas' Operator.
2020-08-04_09-24-04 copy.png

Adjust the size as necessary. For the purposes of this example, the background will be left black, as this texture will be plugged into the opacity slot of the material used to display the canvas which reads black as fully transparent and white as fully opaque.

3.) From the properties panel, include a 'Canvas Text' Operator.

Since the background was left black in step 2, it is necessary to adjust the text color, which is black by default, to white. This will ensure that the background of the canvas is fully transparent, and the text is black.

Within the properties panel, experiment with the positional font settings as preferred. Additionally, custom fonts (.ttf) can be imported and are accessible via the 'Font File' value in the Font Type dropdown of the Canvas Text Operator Properties.

4.) Navigate to Logic Mode, create a String Attribute, 'Text Input'

5.) Create a Rule, name it

6.) Create a set property Action

7.) Set the Text property on the Canvas Text operator as the target

8.) Set the toggle to 'Attribute' and ensure the Text Input Attribute is selected

9.) On the relevant Material Asset, create a String Attribute, 'Text Input'


10.) Ensure that the Text Input Texture is assingned to the Opacity slot on the Material

11.) On the relevant Model Asset, create a String Attribute, 'Text Input'

12.) Ensure the relevant Material is referenced on the appropriate mesh node

13.) Create the Catalog Item and include a String Attribute, 'Text Input'

14.) Associate the appropriate Model with the Catalog Item

15.) Test

window.threekitPlayer({ authToken: "44502a93-247e-4a43-81f5-f943311eb55d", el: document.getElementById("threeplayerdiv"), assetId:"b890eee1-5a37-442d-8985-06787ea87a33", showConfigurator: true})
Was This Article Helpful?