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...
    on the right
  • If you want to customize the scene, 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 strength 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...
    on the right
  • Select Create manual settings (Custom)
  • 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
          }
        }