Scene Tab

The Scene tab is the section within the template editor where you configure the primary, interactive 3D model view for the customizer. This is distinct from the Perspectives tab, which is used to generate the 2D image snapshots of the model.

The Scene tab is where you load your 3D models, apply default materials to define their initial appearance, set up the main camera for the interactive scene, and configure the lighting.

Detailed Guide to Configuring the Scene Tab for a New Template

Here is a step-by-step guide to configuring the Scene tab when creating a new template.

1

Load Your 3D Model(s):

The first step is to load the actual 3D model file(s) into the scene.

1. Prepare Your Model File: Ensure your 3D model file (typically a .glb file) is available. This file should be placed in the /models folder within the system.

2. Add a Model Loader: In the Scene tab, add a new model loader. You can load multiple models into the same scene if needed.

3. Link the Model: In the model loader settings, you will need to specify the model's properties:

   • File: Enter the name of the model file (e.g., your-model.glb). The system will automatically look for it in the models folder.

   • ID: You must give the model a unique ID (e.g., shirt). This ID is crucial because it will be prepended to all the mesh names within that model. For instance, a mesh named collar on the model file would be referenced in the configuration as shirt_collar.

2

Apply Default Materials:

To ensure the model doesn't load as a plain, uncolored object, you can apply default materials. This sets the initial appearance of the product when a user first opens the customizer.

1. Choose a Material: Select a material from your material library that you want to apply by default (e.g., a specific blue colour).

2. Select the Model and Mesh: Specify which model the material should be applied to (using the ID you set in Step 1) and then select the specific mesh(es) that should receive that material. For example, you can apply a "blue" material to the shirt_body mesh.

3

Configure the Main Camera

This configuration controls the interactive 3D view that appears next to the customization tabs.

• FOV (Field of View): Defines the extent of the observable world that is seen at any given moment, similar to a setting in a video game.

• Aspect Ratio: Sets the proportional relationship between the width and height of the viewing area. This is typically kept square (1:1).

• Near and Far: These values define the depth of the 3D scene, essentially creating a viewing cube. 'Near' is the front plane and 'Far' is the back plane.

• Position: Sets the initial position of the camera within the 3D scene.

• Zoom: Controls the minimum and maximum zoom levels allowed for the user.

• Polar: Restricts the up and down rotation of the model. You define a minimum and maximum angle to limit how far the user can tilt the model vertically

• Azimuth: Restricts the left and right rotation. If you leave this blank, the user can perform a full 360-degree horizontal rotation.

4

Set Up Scene Lighting

Lighting is critical for making the 3D model look realistic and showcasing its textures and materials properly.

1. Upload a Lighting File: In the Lighting section of the Scene tab, you can upload an HDR file.

2. Function of the HDR File: This file is what applies lighting to the entire scene. For example, you might use a "photo booth" HDR that lights the model from all sides, or a "top lit" HDR that acts like a spotlight from above. You will typically be provided with a default HDR file to use.