Skip to main content

Can I design the 3D scene?

The 3D scene can be designed in various ways:

Use main model​

If you want to display your product in an environment, e.g. in a room or in front of a house, then you need this environment as a 3D model. Please make sure that this model is not too large is not too large.

You then load the model wie üblich into your configurator, before saving it, check the Check the Main model box. This ensures that this model is always displayed. You do not need to show it via rules.

Customize scene​

You customize the 3D scene as follows:

  • Open the editor of your configurator
  • Click on
    Loading...
    in the main menu
  • Select the 3D scene tab (only available for 3D configurators)
  • Select one of the ready-made 3D templates from the tiles or customize it

Use 3D templates​

Several ready-made scene templates are available for 3D configurators, which have been specially optimized for different products and use cases. These templates are displayed as tiles and can be selected directly or customized.

The templates include various environments and lighting scenarios - from neutral, professional presentation areas and homely atmospheres to special scenes for industrial products or atmospheric displays. Each template is optimized to provide good performance and appealing presentation.

Select and customize template​

  1. Open the editor of your configurator
  2. Click on
    Loading...
    in the main menu
  3. Switch to the 3D scene tab
  4. Select a template from the displayed tiles
  5. Click on Customize to open the template in a large editor modal
  6. Make your desired changes and save them
Tip

You can switch between the templates at any time or use a template as a starting point for your own customizations. All templates are optimized to offer good performance and attractive presentation. The Customize button opens a large editor in which you can edit the scene configuration in detail.

Manual settings​

If you want to customize the scene individually, click on Customize for the selected template. A large editor modal opens in which you can edit the scene configuration in detail.

Alternatively, you can also access the scene settings via the previous menu:

  • Click on
    Loading...
    on the right
  • Select Create manual settings and adjust the generated scene configuration

Camera​

You can set the parameters of the 3D cameras as follows:

  • canvasProps:
    • camera:
      • near: Minimum distance from the camera to be displayed.
      • color: Maximum distance from the camera to be displayed.
      • fov: Field of View: Telephoto or macro lens?
      • position: Initial position of the camera
  • children
    • component=Bounds
      • props
        • margin: Sets a zoom in on the focused object
        • damping: Speed of the camera animation

These parameters have an effect on alle Kameras.

Mouse movement​

Search for or insert the following object under children:

  • children
    • component=OrbitControls
      • props
        • minPolarAngle: Minimum inclination
        • maxPolarAngle: Maximum inclination

Environment​

  • children
    • component=Environment
      • props
        • files: URL to an HDR that is used for lighting
    • component=Sky Represents a sunny day
      • props
        • distance: Distance of the light source
        • sunPosition: Direction from which the sunlight comes
    • component=ContactShadows Represents a sunny day
      • props
        • resolution: Resolution of the shadows
        • position: Zero point of the shadow plane
        • scale: Size of the shadows
        • blur: Blur
        • opacity: Transparency of the shadows
        • color: Maximum distance
    • component=plane Reflective floor surface
      • props
        • args: x and y extent of the surface
        • position: POsition of the surface
      • children
      • component=MeshReflectorMaterial
        • props
          • blur: Blur intensity for ground reflections, defined by width and height. A value of 0 means no blur.
          • mixBlur: How much the blur is mixed with the surface roughness. Default value is 1.
          • mixStrength: Strength of the reflections.
          • mixContrast: Contrast of the reflections.
          • resolution: Resolution of the off-buffer. A lower value increases the speed, while a higher value improves the quality.
          • Mirror: Mirroring of the surroundings. 0 means that texture colors are used, 1 mirrors surrounding colors.
          • depthScale: Scales the depth factor. 0 means no depth, the default value is 0.
          • minDepthThreshold: Lower limit for the interpolation of the depth texture (default value = 0).
          • maxDepthThreshold: Upper limit for the interpolation of the depth texture (default value = 0).
          • depthToBlurRatioBias: Adds a bias factor to the depth texture before the blur is calculated. Accepts values between 0 and 1, default is 0.25. A value above 0 ensures that the texture blur is not too sharp.
          • Distortion: Distortion.

Shadow​

To activate realistic shadows in your K3 configurator, follow these instructions:

1. Activate shadows in the 3D scene​

  • Open the editor of your configurator
  • Click on
    Loading...
    in the main menu
  • Switch to the 3D scene tab
  • Select a template and click on Customize
  • Add the shadow activation to canvasProps:
"canvasProps": {
  "shadows": true,
  "camera": {
    ...
  }
}

2. Configure shadows for models​

For each model that is to cast or receive shadows:

  • Open the model settings
  • Activate "Casts shadows " - the model casts shadows on other objects
  • Activate "Is shaded " - the model receives shadows from other objects

3. Set up light sources with shadow casting​

  • Go to "Models " and select a light source:
    • Spotlight - directional light with sharp shadows
    • Point light - light that shines in all directions
    • Directional light - light from a specific direction
  • Activate the Shadow cast for the selected light source

4. Integrate light source via rules​

  • Create a new rule in the configurator
  • Integrate the light source specifically into the scene
  • The light source only works with activated shadow casting if it is integrated via a rule

Optimize shadow parameters​

You can also refine the shadows using these components in the 3D scene:

  • ContactShadows: For soft contact shadows on the ground
  • Environment: For natural ambient lighting
  • Sky: For sunlight with natural shadows

3D effects​

Further effects can be added at this point:

    {
      "component": "EffectComposer",
      "children": [
        ...
      ]
    }

Here are some examples:

Blurring:

        {
          "component": "DepthOfField",
          "props": {
            "focusDistance": 0,
            "focalLength": 3,
            "bokehScale": 2
          }
        },

Vignette:

        {
          "component": "Vignette",
          "props": {
            "darkness": 0.3
          }
        },

General brightness and contrast:

        {
          "component": "BrightnessContrast",
          "props": {
            "brightness": -0.03,
            "contrast": 0.01
          }
        },

Ambient occlusion, corner darkening:

        {
          "component": "N8AO",
          "props": {
            "samples": 30,
            "aoRadius": 2,
            "intensity": 5
          }
        }