Car Configurator

A car model example that demonstrates using Qt Quick 3D cameras, extended scene environment and Qt Quick 3D.

3D side-angle view of a black sports car against a desert backdrop

Car Configurator shows a car in different scene environments and in different colors. It's implemented with QML and relies on a number of Qt modules, most prominently Qt Quick and Qt Quick 3D.

Running the Example

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, see Qt Creator: Tutorial: Build and run.

Platform notes

This example does download some assets from an internet server at runtime. Therefore, you will need an internet connection when launching it for the first time.

You can interact with the car model in two modes:

  • Demo mode
  • User mode

Demo mode

The camera perspective moves along different paths and shows different views of the car.

User mode

Users can rotate around the car using a mouse or touch input.

Reset Camera

The camera moves to its initial position.

Scene environments

There are four scene environments available for this example:

  • Garage
  • Desert
  • Animated
  • Studio
Garage Environment

The garage environment serves as the default setting and provides a clean, industrial presentation space:

 ExtendedSceneEnvironment {
     id: showhall

     glowBloom: 0
     glowStrength: 0
     glowEnabled: false
     depthOfFieldFocusDistance: 600
     depthOfFieldFocusRange: 627
     depthOfFieldBlurAmount: 19.97
     depthOfFieldEnabled: false
     exposure: 1.2

     lightProbe: _Hall
     backgroundMode: SceneEnvironment.SkyBox
     tonemapMode: SceneEnvironment.TonemapModeLinear
     probeExposure: 1
     depthPrePassEnabled: false
     depthTestEnabled: true
     antialiasingMode: SceneEnvironment.MSAA
     antialiasingQuality: perfMode ? SceneEnvironment.Medium : SceneEnvironment.VeryHigh
     clearColor: "#000000"
     probeHorizon: 0.5

     Texture {
         id: _Hall
         source: rootWindow.downloadBase + "/content/images/HDR/_Hall.ktx"
         mipFilter: Texture.Linear
         scaleV: 2
     }
     temporalAAEnabled: false
 }
Desert Environment

The desert environment features HDR sky dome lighting, atmospheric fog effects, and specialized ground geometry:

 ExtendedSceneEnvironment {
     id: desert

     lightProbe: _Desert
     glowStrength: 2
     glowBloom: 0.11191
     glowEnabled: true

     depthPrePassEnabled: false
     probeExposure: 1.5
     tonemapMode: SceneEnvironment.TonemapModeLinear
     backgroundMode: SceneEnvironment.SkyBox
     depthTestEnabled: true
     antialiasingMode: SceneEnvironment.MSAA
     antialiasingQuality: perfMode ? SceneEnvironment.Medium : SceneEnvironment.VeryHigh
     clearColor: "#000000"
     probeHorizon: 0.5
     temporalAAEnabled: false
     fog: Fog {}
 }
Animated Environment

The animated environment showcases dynamic content with video wall effects:

 ExtendedSceneEnvironment {
     id: videoRoom

     aoSoftness: 0
     aoDistance: 0
     probeExposure: 1
     tonemapMode: SceneEnvironment.TonemapModeLinear
     antialiasingMode: SceneEnvironment.MSAA
     antialiasingQuality: perfMode ? SceneEnvironment.Medium : SceneEnvironment.VeryHigh
     clearColor: "#000000"
     depthPrePassEnabled: false
     backgroundMode: SceneEnvironment.Color
     depthTestEnabled: true
     probeHorizon: 0
     Vignette {
         id: vignette
         vignetteStrength: 15
         vignetteColor: Qt.vector3d(0, 0, 0)
     }
     temporalAAEnabled: false
 }
Studio Environment

The studio environment provides a clean, professional presentation setting with controlled lighting:

 ExtendedSceneEnvironment {
     id: studio
     aoEnabled: false
     antialiasingQuality: SceneEnvironment.VeryHigh
     antialiasingMode: SceneEnvironment.MSAA

     tonemapMode: SceneEnvironment.TonemapModeLinear
     probeExposure: 1
     probeHorizon: 1
     clearColor: "#000000"
     temporalAAEnabled: false
     depthTestEnabled: true
     backgroundMode: SceneEnvironment.Color
     depthPrePassEnabled: false
 }

Car Colors

There are four colors available for the car:

  • White
  • Black
  • Yellow
  • Red

Lights

You can turn the lights of the car on and off.

Source files

Example project @ code.qt.io

See also All Qt examples.