Qt 3D教程：Scene2D QML 示例

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

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

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的控制组件。

标签：

来源：慧都