Qt 3D教程:Scene2D QML 示例

转帖|使用教程|编辑:鲍佳佳|2021-09-01 10:41:47.750|阅读 34 次

概述:文本演示了在 Qt 3D 场景中使用 Qt Quick 2 的 QML 应用程序。

# 31款JAVA开发必备控件和工具 # 开发软/控件产品年终优惠

文本演示了在 Qt 3D 场景中使用 Qt Quick 2 的 QML 应用程序。

下载Qt6最新试用版

Qt组件推荐:

  • QtitanRibbon| 下载试用: 遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件,致力于为Windows、Linux和Mac OS X提供功能完整的Ribbon组件。
  • QtitanChart | 下载试用 :是一个C ++库,代表一组控件,这些控件使您可以快速地为应用程序提供漂亮而丰富的图表。并且支持所有主要的桌面

Scene2D演示了如何将 Qt Quick 2 场景渲染为纹理并在 Qt 3D 应用程序中使用该纹理,包括处理鼠标事件。3D 场景包含一个单独的活动相机,并渲染一个 3D Qt 徽标以及一些使用 Qt Quick Controls 声明的控件。

运行示例

要从Qt Creator运行示例,请打开欢迎模式并从示例中选择示例。有关更多信息,请访问构建和运行示例

设置 3D 场景

我们在充当对象树根的实体中设置 3D 场景。虚拟摄像机在main.qml 中指定:

 Camera {
        {
        id:  camera
        projectionType:  CameraLens.PerspectiveProjection
        position:  Qt.vector3d(  0.0,  0.0,  20 ))
    }

该RenderSettings指定使用的渲染算法,也使这是需要突出的Qt Quick的场景在3D几何时妥善处理的鼠标事件三角形基于采摘:

   RenderSettings {
            {
            activeFrameGraph:  ForwardRenderer {
                {
                camera:  camera
                clearColor:  "white"
            }
            pickingSettings.pickMethod: pickMethod: PickingSettings.TrianglePicking
        },},

将由 Qt Quick 场景中的控件控制的 3D Qt 徽标声明为:

   Entity {
        {
        id:  logoEntity

        Transform {
            {
            id:  logoTransform
            scale:  1
            translation:  Qt.vector3d(  0,  0,  logoControls.logoCentreZ )
            )
            rotation:  fromEulerAngles(  logoControls.rotationX,
                                       
                                       logoControls.rotationY,
                                       
                                       logoControls.rotationZ ))
        }

        Mesh {
            {
            id:  logoMesh
            source:  "Qt_logo.obj"
        }

        PhongMaterial {
            {
            id:  logoMaterial
            diffuse:  Qt.rgba(  logoControls.colorR/255,
                              
                              logoControls.colorG/255,
                              
                              logoControls.colorB/255,  1.0 )
            )
            ambient:  Qt.rgba(  0.1,  0.1,  0.1,  1.0 )
            )
            shininess:  logoControls.shininess
        }

        components: [  [ logoTransform,  logoMesh,  logoMaterial ]]
    }

它只是由一个用于加载几何体的 Mesh 组件组成;一个 PhongMaterial 组件给它一个表面外观,一个 Transform 组件来指定它的位置、方向和比例。这些组件的属性绑定到 logoControls 元素上的属性,我们将在接下来讨论。

将 Qt Quick 渲染为纹理

我们首先声明将成为我们的控制面板的实体。它由一个CuboidMesh组成,我们将在其上放置包含 Qt Quick 场景渲染的纹理。在这种情况下,我们为几何体使用了一个简单的立方体,但我们可以使用任何有效的 3D 几何体,只要它具有纹理坐标即可。纹理坐标用于将纹理投影到 3D 表面上,也用于计算要传递到原始 Qt Quick 场景的鼠标事件的坐标。

  Entity {
        {
        id:  cube

        components: [ [cubeTransform,  cubeMaterial,  cubeMesh,  cubePicker]

        property property real rotationAngle:  0

        Transform {
            {
            id:  cubeTransform
            translation:  Qt.vector3d(2,  0,  10)
            
            scale3D:  Qt.vector3d(1,  4,  1)
            
            rotation:  fromAxisAndAngle(Qt.vector3d(0,1,0),  cube.rotationAngle)
        }

        CuboidMesh {
            {
            id:  cubeMesh
        }}

我们还包含一个ObjectPicker组件,以便我们可以使用鼠标与控件交互:

 ObjectPicker {
            {
            id:  cubePicker
            hoverEnabled:  true
            dragEnabled:  true

            // Explicitly require a middle click to have the Scene2D grab the mouse
            // events from the picker
            onPressed: {
                 {
                if ((pick.button === PickEvent.MiddleButton) {
                     {
                    qmlTexture.mouseEnabled = !!qmlTexture.mouseEnabled
                    logoControls.enabled = !!logoControls.enabled
                }
            }
        }

对于此示例,我们选择使用一种交互机制,您必须明确地用中键单击控件才能启用它们。

要将纹理应用于网格,我们使用内置的 TextureMaterial:

   TextureMaterial {
            id: cubeMaterial
            texture: offscreenTexture
        }

最后剩下的部分是如何从 Qt Quick 场景渲染上述纹理。这是通过Scene2D元素完成的:

  Scene2D {
            id: qmlTexture
            output: RenderTargetOutput {
                attachmentPoint: RenderTargetOutput.Color0
                texture: Texture2D {
                    id: offscreenTexture
                    width: 256
                    height: 1024
                    format: Texture.RGBA8_UNorm
                    generateMipMaps: true
                    magnificationFilter: Texture.Linear
                    minificationFilter: Texture.LinearMipMapLinear
                    wrapMode {
                        x: WrapMode.ClampToEdge
                        y: WrapMode.ClampToEdge

我们使用Texture2D和RenderTargetOutput类型来创建目标纹理并将其附加为Scene2D渲染器的输出。

接下来,我们告诉Scene2D对象哪些实体可以为其提供输入事件,并且我们最初禁用鼠标事件的处理:

        }
                }
            }

            entities: [  [ cube ]]

最后,我们可以通过将自定义 QML 组件作为子元素添加到Scene2D元素来指定要渲染的 Qt Quick 场景:

LogoControls {
                id: logoControls
                width: offscreenTexture.width
                height: offscreenTexture.height
            }
        }

当ObjectPicker将 mouseEnabled 属性设置为 true 时,Scene2D对象将处理来自附加到所列实体的任何 ObjectPicker 的鼠标事件。通过这种方式,您可以自由地以任何您希望的方式使用Scene2D对象生成的纹理,即使在多个实体上也是如此。

LogoControls.qml文件只是一个普通的Qt Quick的2场面在这种情况下还使用Qt Quick的控制组件。


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自:the Qt Company

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线咨询
联系我们
TOP
在线客服系统
live chat