Qt 3D开发案例：音频可视化器示例（附源码）

Qt自带集成开发环境（IDE），名为Qt Creator。它可以在Linux、OS X和Windows上运行，并提供智能代码完成、语法高亮、集成帮助系统、调试器和剖析器集成，还集成了所有主要的版本控制系统（如git、Bazaar）。除了Qt Creator外，Windows上的开发人员还可以使用Qt的Visual Studio插件。也可以使用其他的IDE（如KDE上的KDevelop）。但当然绝不是必须使用任何IDE。

前往慧都网下载Qt6最新试用版

演示结合了Qt 3D渲染和Qt Quick 2元素。

Audio Visualizer演示了如何实现将Qt 3D渲染与Qt Quick 2D元素结合使用的应用程序。该示例使用媒体播放器播放音乐，并将音乐的大小可视化为动画条。

运行示例

要从Qt Creator运行示例，请打开“Welcome”模式，然后从“demo”中选择demo。

Qt Quick 2D实施

该audio-visualizer-qml/main.qml示例中的Qt快速实现MediaPlayer用于播放音频内容。

1.  
   MediaPlayer {
2.  
   id: mediaPlayer
3.  
   autoPlay: true
4.  
   volume: 0.5
5.  
   source: "qrc:/music/tiltshifted_lost_neon_sun.mp3"

播放器由playButton和c {stopButton}控制。基于点击的按钮state的mainview变化。

使用该Scene3D类型渲染3D内容。音频可视化器的状态保留在中mainview。它会传递给visualizerbar动画所需的。

Scene3D { anchors.fill: parent Visualizer { id: visualizer animationState: mainview.state numberOfBars: 120 barRotationTimeMs: 8160 // 68 ms per bar } }

Qt 3D实施

该示例的3D元素在中创建audio-visualizer-qml/Visualizer.qml。

1.  
   Camera {
2.  
   id: camera
3.  
   projectionType: CameraLens.PerspectiveProjection
4.  
   fieldOfView: 45
5.  
   aspectRatio: 1820 / 1080
6.  
   nearPlane: 0.1
7.  
   farPlane: 1000.0
8.  
   position: Qt.vector3d(0.014, 0.956, 2.178)
9.  
   upVector: Qt.vector3d(0.0, 1.0, 0.0)
10.  
    viewCenter: Qt.vector3d(0.0, 0.7, 0.0)
11.  
    }

ANodeInstantiator用于创建使音乐大小可视化的小节。

1.  
   // Bars
2.  
   CuboidMesh {
3.  
   id: barMesh
4.  
   xExtent: 0.1
5.  
   yExtent: 0.1
6.  
   zExtent: 0.1
7.  
   }
8.  
    
9.  
   NodeInstantiator {
10.  
    id: collection
11.  
    property int maxCount: parent.numberOfBars
12.  
    model: maxCount
13.  
     
14.  
    delegate: BarEntity {
15.  
    id: cubicEntity
16.  
    entityMesh: barMesh
17.  
    rotationTimeMs: sceneRoot.barRotationTimeMs
18.  
    entityIndex: index
19.  
    entityCount: sceneRoot.numberOfBars
20.  
    entityAnimationsState: animationState
21.  
    magnitude: 0
22.  
    }
23.  
    }

该visualizer还包含一个Entity显示进度。该元素具有曲线形状的网格，并根据播放曲目的持续时间在一个级别上旋转以显示进度。

1.  
   // Progress
2.  
   Mesh {
3.  
   id: progressMesh
4.  
   source: "qrc:/meshes/progressbar.obj"
5.  
   }
6.  
    
7.  
   Transform {
8.  
   id: progressTransform
9.  
   property real defaultStartAngle: -90
10.  
    property real progressAngle: defaultStartAngle
11.  
    rotationY: progressAngle
12.  
    }
13.  
     
14.  
    Entity {
15.  
    property Material progressMaterial: PhongMaterial {
16.  
    ambient: "#80C342"
17.  
    diffuse: "black"
18.  
    }
19.  
     
20.  
    components: [progressMesh, progressMaterial, progressTransform]
21.  
    }

在audio-visualizer-qml/BarEntity.qml其中有用于旋转条形和更改条形颜色的动画。这些条在遵循环形的水平上旋转。同时，条的颜色被设置为动画。

1.  
   QQ2.NumberAnimation {
2.  
   id: angleAnimation
3.  
   target: angleTransform
4.  
   property: "barAngle"
5.  
   duration: rotationTimeMs
6.  
   loops: QQ2.Animation.Infinite
7.  
   running: true
8.  
   from: startAngle
9.  
   to: 360 + startAngle
10.  
    }
11.  
    QQ2.SequentialAnimation on barColor {
12.  
    id: barColorAnimations
13.  
    running: false
14.  
     
15.  
    QQ2.ColorAnimation {
16.  
    from: lowColor
17.  
    to: highColor
18.  
    duration: animationDuration
19.  
    }
20.  
     
21.  
    QQ2.PauseAnimation {
22.  
    duration: animationDuration
23.  
    }
24.  
     
25.  
    QQ2.ColorAnimation {
26.  
    from: highColor
27.  
    to: lowColor
28.  
    duration: animationDuration
29.  
    }
30.  
    }

每个小节的大小都从一个单独的.raw文件中读取，该文件基于正在播放的曲目。当小节围绕环旋转时，高度将缩放以突出显示当前播放的位置。旋转一整圈后，将获取一个新值。

Qt相关组件：

• QtitanRibbon: 遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件，致力于为Windows、Linux和Mac OS X提供功能完整的Ribbon组件。
• QtitanChart :是一个C ++库，代表一组控件，这些控件使您可以快速地为应用程序提供漂亮而丰富的图表。并且支持所有主要的桌面操作系统。
• QtitanDataGrid  :这个Qt数据网格组件使用纯C++创建，运行速度极快，处理大数据和超大数据集的效果突出。QtitanDataGrid完全集成了QtDesigner，因而极易适应其他相似的开发环境，保证100%兼容Qt GUI。