下載Qt6最新試用版

Qt組件推薦：

Scene2D演示了如何將 Qt Quick 2 場(chǎng)景渲染為紋理并在 Qt 3D 應(yīng)用程序中使用該紋理，包括處理鼠標(biāo)事件。3D 場(chǎng)景包含一個(gè)單獨(dú)的活動(dòng)相機(jī)，并渲染一個(gè) 3D Qt 徽標(biāo)以及一些使用 Qt Quick Controls 聲明的控件。

運(yùn)行示例

要從Qt Creator運(yùn)行示例，請(qǐng)打開(kāi)歡迎模式并從示例中選擇示例。有關(guān)更多信息，請(qǐng)?jiān)L問(wèn)構(gòu)建和運(yùn)行示例。

設(shè)置 3D 場(chǎng)景

我們?cè)诔洚?dāng)對(duì)象樹(shù)根的實(shí)體中設(shè)置 3D 場(chǎng)景。虛擬攝像機(jī)在main.qml 中指定：

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

該RenderSettings指定使用的渲染算法，也使這是需要突出的Qt Quick的場(chǎng)景在3D幾何時(shí)妥善處理的鼠標(biāo)事件三角形基于采摘：

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

將由 Qt Quick 場(chǎng)景中的控件控制的 3D Qt 徽標(biāo)聲明為：

   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 ]]
    }

它只是由一個(gè)用于加載幾何體的 Mesh 組件組成；一個(gè) PhongMaterial 組件給它一個(gè)表面外觀，一個(gè) Transform 組件來(lái)指定它的位置、方向和比例。這些組件的屬性綁定到 logoControls 元素上的屬性，我們將在接下來(lái)討論。

將 Qt Quick 渲染為紋理

  我們首先聲明將成為我們的控制面板的實(shí)體。它由一個(gè)CuboidMesh組成，我們將在其上放置包含 Qt Quick 場(chǎng)景渲染的紋理。在這種情況下，我們?yōu)閹缀误w使用了一個(gè)簡(jiǎn)單的立方體，但我們可以使用任何有效的 3D 幾何體，只要它具有紋理坐標(biāo)即可。紋理坐標(biāo)用于將紋理投影到 3D 表面上，也用于計(jì)算要傳遞到原始 Qt Quick 場(chǎng)景的鼠標(biāo)事件的坐標(biāo)。

  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
        }}

我們還包含一個(gè)ObjectPicker組件，以便我們可以使用鼠標(biāo)與控件交互：

 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
                }
            }
        }

對(duì)于此示例，我們選擇使用一種交互機(jī)制，您必須明確地用中鍵單擊控件才能啟用它們。

要將紋理應(yīng)用于網(wǎng)格，我們使用內(nèi)置的 TextureMaterial：

   TextureMaterial {
            id: cubeMaterial
            texture: offscreenTexture
        }

最后剩下的部分是如何從 Qt Quick 場(chǎng)景渲染上述紋理。這是通過(guò)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類型來(lái)創(chuàng)建目標(biāo)紋理并將其附加為Scene2D渲染器的輸出。

接下來(lái)，我們告訴Scene2D對(duì)象哪些實(shí)體可以為其提供輸入事件，并且我們最初禁用鼠標(biāo)事件的處理：

        }
                }
            }

            entities: [  [ cube ]]

最后，我們可以通過(guò)將自定義 QML 組件作為子元素添加到Scene2D元素來(lái)指定要渲染的 Qt Quick 場(chǎng)景：

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

當(dāng)ObjectPicker將 mouseEnabled 屬性設(shè)置為 true 時(shí)，Scene2D對(duì)象將處理來(lái)自附加到所列實(shí)體的任何 ObjectPicker 的鼠標(biāo)事件。通過(guò)這種方式，您可以自由地以任何您希望的方式使用Scene2D對(duì)象生成的紋理，即使在多個(gè)實(shí)體上也是如此。

該LogoControls.qml文件只是一個(gè)普通的Qt Quick的2場(chǎng)面在這種情況下還使用Qt Quick的控制組件。