Text Inputs
  • Dark
    Light

Text Inputs

  • Dark
    Light

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.
2020-08-04_10-32-13.png

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.
CanvasText.png

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'
2020-07-02_10-31-40.png

5.) Create a Rule, name it
2020-07-02_13-42-21.png

6.) Create a set property Action
2020-07-02_12-47-54.png

7.) Set the Text property on the Canvas Text operator as the target
2020-07-02_13-43-36.png

8.) Set the toggle to 'Attribute' and ensure the Text Input Attribute is selected
2020-07-02_13-46-42.png

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

2020-07-02_10-31-40.png

10.) Ensure that the Text Input Texture is assingned to the Opacity slot on the Material
2020-08-04_12-35-01.png

11.) On the relevant Model Asset, create a String Attribute, 'Text Input'
2020-07-02_10-31-40.png

12.) Ensure the relevant Material is referenced on the appropriate mesh node
2020-07-02_14-49-57.png

13.) Create the Catalog Item and include a String Attribute, 'Text Input'
2020-08-04_12-13-29.png

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

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?