Create a basic 3D configurator

1. Create a new configurator based on the Mokapot step by step example template.
   • Name: Use a meaningful name of your choice
   • ID and Asset bundles are prefilled correctly
   If the assigned bundles are changed/renamed, it cannot be guaranteed that the following example can be implemented without any problems.

1. Use the asset manager to upload the mokapot.glb file.
   Asset bundle: Assets3DMoka
   Folder: Models3d
   
   See the documentation for detailed information.

   Handling textures when uploading your model

   The bundle already contains some textures (see folder Textures3d) which will automatically be linked with the respective material when uploading your model. In general, textures need to be uploaded separately as GLB files encode textures into base64 strings, which might lead to warnings in your Materials3d folder. If such warnings occur, just select the detected asset and set the Image in Channels to - and save the changes. It's best practice to save your textures separately when exporting your models to GLB (e.g. in Blender or Autodesk Maya). That way you won't run into the described issues with textures being encoded to base64.
   

2. Add the following line of code to the ViewerParams value component.

        Viewer3d.modelParameter(Models3d.mokapot, "visible", true)
   

   To gain more information about this component, have a look at our documentation.

3. To make the 3D model visible in the viewer, connect the viewer control with the viewer parameters component. Add the following SigSlo.

   

1. Create a new value component named LidOpened, to store if the lid should be opened or closed.

2. Set the input type of the component to Logic and add the following script

       if Input is Empty then false else Input end
   

3. To store the user input, connect the checkbox with the value component. To do this, create a SigSlo (the button with the node-like icon in the top right corner of the Controls panel) with the shown settings below.

   

4. You also need a connection in the other direction. If the value in LidOpened changes, the checkbox has to be updated.
   For that, enable Hive for the checkbox value property by clicking on the code icon next to the input field.
   

5. Set the position of the opened/closed lid. To do this, you have to adapt the ViewerParams component. Add the following line of code to make the animation visible in 3D.

           Viewer3d.nodeParameter("Toplid", "rotation", if LidOpened then "(-45,0,0)" else "(0,0,0)" end)
   

1. Upload the images graphic1.svg, graphic2.svg, graphic3.svg and graphic4.svg as text assets in the asset manager. Make sure that the uploaded SVG files do not contain any DOCTYPE or xml tags as they must only include the pure svg.
   Asset bundle: ProductDataMoka
   Folder: Visualization
   Asset type: Text
   

   The corresponding data is already available in the configurator (components Graphic_Tbl and LowerGraphic).

2. Create a new Graphic component named TextureView.
   

   • Set the size to 1024 x 1024px. Please click on the texts (Width, Height) to bring up the component editor rather than entering the values directly into the input field.
   • Add a new Visual of type Single Visual → SVG and name it Graphic.
   • To show the chosen image, set the Texture.Source to

         """<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"  version="1.1" viewBox="5 -25 100 512">
             {=LowerGraphic.VIS_IMG.getText()}
         </svg>"""
     

1. To display the motive on the mokapot use a so called paintable.
   Add the following line of code to the ViewerParams component.

       Viewer3d.materialParameter(Materials3d.matLogo_2, "paintable", { src: TextureView.Value.ToText(), uScale: 1, vScale: -1 }.ToText())
   

To make the AR button work, you have to create a SigSlo with the Start AR slot.

Adjust the parameters below. These parameters are essentially texts displayed in the User Interface. By default, those values are static and filled with texts in English. If you want this texts to be dependent on the currently selected language, you might want to link to a component containing translations. In our example that's the GeneralUI component which holds dedicated columns for those AR-related texts.

For detailed information about the AR mode have a look at the documenation.

The auto-focus camera is used to find a default position, where all nodes are visible in the scene. To make the CenterCamera_btn work you have to create a SigSlo with the following settings.

For a good camera perspective, adjust the parameters as follows

• Alpha to 180,
• Beta to 90 and
• Radius factor to 1.4.

See auto focus camera for detailed information.