QtQuick3D-例子-modelview3d

最新推荐文章于 2025-06-10 00:36:56 发布
转载 最新推荐文章于 2025-06-10 00:36:56 发布 · 1.8k 阅读 · 4

本文介绍了一款使用Qt Quick和Qt3D实现的动态立方体元素生成器，允许用户通过方向按钮在3D空间中创建和移动立方体，并通过颜色选择器更改立方体颜色。立方体可以通过点击进行删除操作。此应用展示了3D空间交互和实时渲染的基本概念。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

代码：

modelview3d.qml

import QtQuick 1.0
import Qt3D 1.0
import Qt3D.Shapes 1.0

Rectangle {
    id: topLevel
    width: 800; height: 480

   //数据模型
    ListModel {
        id: dynamicModel
        ListElement { x:0; y:0; z:0; color:"#ffffff"}
    }

    function addItem() {
        var newModelData = {
                                    "x": navigator.currentX/5,
                                    "y": navigator.currentY/5,
                                    "z": navigator.currentZ/5,
                                    "color": colorPicker.currentColor
        }
        dynamicModel.append( newModelData );
        viewport.update3d();
    }

    //立方体元素组件
    Component {
        id: cubeDelegate
        Cube {
            id: item
            x: model.x;y: model.y; z: model.z;
            effect: Effect {
                id: itemEffect
                color: model.color
                blending: true
            }
            scale:  1 / 5
            enabled: index != -1

            // You can have your own functions, signals, animations etc.
            onClicked: {
               onClicked: console.log("Cube("+index+") color: " + itemEffect.color);
                removeAnimation.start();
            }

            SequentialAnimation  {
                id: removeAnimation
                ColorAnimation { target: itemEffect; property: "color" ;from: model.color; to: Qt.rgba(0,0,0,0); duration: 500 }
                ScriptAction { script: {
                        dynamicModel.remove(index);
                        viewport.update3d();
                    }
                }
            }
            Component.onCompleted: {
                console.log("Cube Completed");
            }
        }
    } //--cubeDelegate end

    //三维视图
    Viewport {
        id: viewport
        picking: true
        blending: true

        Repeater {
            delegate: cubeDelegate
            model: dynamicModel
        }

        anchors.left: controlPanel.right
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.bottom: parent.bottom

        camera: Camera {
            id: main_camera
            eye: Qt.vector3d(0, 4, 12)
        }
    }

   //颜色框 导航按钮以及说明
    Rectangle {
        id: controlPanel
        color: "#ffffff"
        width: 210
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.left: parent.left

        Rectangle {
            id: colorPicker
            color: "white"
            height: sliderContainter.height + titleText.height + 5
            anchors.margins: 5
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top

            Text {
                id: titleText
                text: qsTr("Color Picker")
                font.bold: true

                anchors.top: parent.top
                anchors.left:parent.left
                anchors.margins: 5
            }

            property color currentColor: "white"
            property real currentRed:       1.0
            property real currentGreen:    1.0
            property real currentBlue:      1.0
            property real currentAlpha:    1.0

            // We use Qt.rgba() to build the colour, which breaks the bindings,
            // so we update manually when the color components change.
            //和上面的属性绑定，当改变时自动调用
            onCurrentRedChanged: updateColor();
            onCurrentGreenChanged: updateColor();
            onCurrentBlueChanged: updateColor();
            onCurrentAlphaChanged: updateColor();

            function updateColor() {
                currentColor = Qt.rgba( colorPicker.currentRed,
                                                   colorPicker.currentGreen,
                                                   colorPicker.currentBlue,
                                                   colorPicker.currentAlpha);
                redSlider.updateColors();
                greenSlider.updateColors();
                blueSlider.updateColors();
                swatch.color = currentColor;
            }

            Rectangle {
                id: swatch
                anchors.margins: 5
                height: 90
                y: 5
                border.width: 2
                border.color: "black"
                color: Qt.rgba(colorPicker.currentRed,
                               colorPicker.currentGreen,
                               colorPicker.currentBlue,
                               colorPicker.currentAlpha);
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.right: parent.right
                anchors.left: sliderContainter.right
            }

            Rectangle {
                id: sliderContainter
                anchors.bottom: parent.bottom
                width: 125
                height: 110

                Rectangle {
                    id: redSlider
                    property real currentValue: 1.0
                    rotation: -90
                    x: 30
                    y: -20
                    height: 80
                    width: 30
                    border.width: 2
                    border.color: "black"
                    radius: 5

                    property color zeroColor: Qt.rgba(0,
                                                      colorPicker.currentGreen,
                                                      colorPicker.currentBlue,
                                                      colorPicker.currentAlpha)
                    property color fullColor: Qt.rgba(1.0,
                                                      colorPicker.currentGreen,
                                                      colorPicker.currentBlue,
                                                      colorPicker.currentAlpha)

                    function updateColors()
                    {
                        zeroColor = Qt.rgba(0,
                                            colorPicker.currentGreen,
                                            colorPicker.currentBlue,
                                            colorPicker.currentAlpha);
                        fullColor = Qt.rgba(1.0,
                                            colorPicker.currentGreen,
                                            colorPicker.currentBlue,
                                            colorPicker.currentAlpha);
                    }

                    //定义一个颜色梯度
                    gradient: Gradient {
                        GradientStop {
                            position: 0.0
                            color: redSlider.zeroColor}
                        GradientStop {
                            position: 1.0
                            color: redSlider.fullColor
                        }
                    }
                    MouseArea {
                        anchors.fill: parent
                        onMousePositionChanged: {
                            redSlider.currentValue = mouseY / redSlider.height;
                            colorPicker.currentRed = redSlider.currentValue;
                        }
                    }
                }

                Rectangle {
                    id: redSwatch
                    width: redSlider.width
                    height: redSlider.width
                    color: Qt.rgba(1.0, 0, 0);
                    border.width: 2
                    border.color: "black"

                    x: redSlider.height + 10
                    y: 5
                    radius: 5
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {colorPicker.currentRed = 1.0;
                            colorPicker.currentGreen = 0;
                            colorPicker.currentBlue = 0}
                    }
                }

                Rectangle {
                    id: greenSlider
                    rotation: -90
                    x: 30
                    y: 15
                    height: 80
                    width: 30

                    property color zeroColor: Qt.rgba(colorPicker.currentRed,
                                                      0.0,
                                                      colorPicker.currentBlue,
                                                      colorPicker.currentAlpha)
                    property color fullColor: Qt.rgba(colorPicker.currentRed,
                                                      1.0,
                                                      colorPicker.currentBlue,
                                                      colorPicker.currentAlpha)

                    function updateColors()
                    {
                        zeroColor = Qt.rgba(colorPicker.currentRed,
                                            0.0,
                                            colorPicker.currentBlue,
                                            colorPicker.currentAlpha);
                        fullColor = Qt.rgba(colorPicker.currentRed,
                                            1.0,
                                            colorPicker.currentBlue,
                                            colorPicker.currentAlpha);
                    }

                    gradient: Gradient {
                        GradientStop {
                            position: 0.0
                            color: greenSlider.zeroColor
                        }
                        GradientStop {
                            position: 1.0
                            color: greenSlider.fullColor
                        }
                    }
                    border.width: 2
                    border.color: "black"
                    radius: 5
                    MouseArea {
                        anchors.fill: parent
                        onMousePositionChanged: {
                            colorPicker.currentGreen = mouseY / greenSlider.height;
                        }
                    }
                }

                Rectangle {
                    id: greenSwatch
                    width: greenSlider.width
                    height: greenSlider.width
                    color: Qt.rgba(0, 1, 0);
                    border.width: 2
                    border.color: "black"

                    x: greenSlider.height + 10
                    y: 40
                    radius: 5
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            colorPicker.currentRed = 0;
                            colorPicker.currentGreen = 1;
                            colorPicker.currentBlue = 0
                        }
                    }
                }

                Rectangle {
                    id: blueSlider
                    rotation: -90
                    x: 30
                    y: 50
                    height: 80
                    width: 30
                    property color zeroColor: Qt.rgba(colorPicker.currentRed,
                                                      colorPicker.currentGreen,
                                                      0.0,
                                                      colorPicker.currentAlpha)
                    property color fullColor: Qt.rgba(colorPicker.currentRed,
                                                      colorPicker.currentGreen,
                                                      1.0,
                                                      colorPicker.currentAlpha)

                    function updateColors()
                    {
                        zeroColor = Qt.rgba(colorPicker.currentRed,
                                            colorPicker.currentGreen,
                                            0.0,
                                            colorPicker.currentAlpha);
                        fullColor = Qt.rgba(colorPicker.currentRed,
                                            colorPicker.currentGreen,
                                            1.0,
                                            colorPicker.currentAlpha);
                    }

                    gradient: Gradient {
                        GradientStop {
                            position: 0.0
                            color: blueSlider.zeroColor
                        }
                        GradientStop {
                            position: 1.0
                            color: blueSlider.fullColor
                        }
                    }
                    border.width: 2
                    border.color: "black"
                    radius: 5
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            colorPicker.currentBlue =
                                    mouseY / blueSlider.height;
                        }
                        onMousePositionChanged: {
                            colorPicker.currentBlue =
                                    mouseY / blueSlider.height;
                        }
                    }
                }

                Rectangle {
                    id: blueSwatch
                    width: blueSlider.width
                    height: blueSlider.width
                    color: Qt.rgba(0, 0, 1);
                    border.width: 2
                    border.color: "black"

                    x: blueSlider.height + 10
                    y: 75
                    radius: 5
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            colorPicker.currentRed = 0;
                            colorPicker.currentGreen = 0;
                            colorPicker.currentBlue = 1
                        }
                    }
                }
            }
        }

        //导航
        Rectangle {
            id: navigator
            height: 200
            anchors.margins: 5
            anchors.top: colorPicker.bottom
            anchors.left: parent.left
            anchors.right: parent.right

            // These properties contain are used by the modelview to populate
            // new elements
            property int currentX:0;
            property int currentY:0;
            property int currentZ:0;

            property int buttonWidth: 45
            property int buttonHeight: 30

            Button {
                width: navigator.buttonWidth
                height: navigator.buttonHeight
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                text: qsTr("Up")
                onClicked: {
                    navigator.currentY += 1;
                    topLevel.addItem();
                }
            }

            Button {
                width: navigator.buttonWidth
                height: navigator.buttonHeight
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.bottom: parent.bottom
                text: qsTr("Down")
                onClicked: {
                    navigator.currentY -= 1;
                    topLevel.addItem();
                }
            }

            Button {
                width: navigator.buttonWidth
                height: navigator.buttonHeight
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                text: qsTr("Left")
                onClicked: {
                    navigator.currentX -= 1;
                    topLevel.addItem();
                }
            }

            Button {
                width: navigator.buttonWidth
                height: navigator.buttonHeight
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                text: qsTr("Right")
                onClicked: {
                    navigator.currentX += 1;
                    topLevel.addItem();
                }
            }

            Button {
                width: navigator.buttonWidth
                height: navigator.buttonHeight
                anchors.right: parent.right
                anchors.top: parent.top
                text: qsTr("In")
                onClicked: {
                    navigator.currentZ -= 1;
                    topLevel.addItem();
                }
            }

            Button {
                width: navigator.buttonWidth
                height: navigator.buttonHeight
                anchors.left: parent.left
                anchors.bottom: parent.bottom
                text: qsTr("Out")
                onClicked: {
                    navigator.currentZ += 1;
                    topLevel.addItem();
                }
            }

            Image {
                id: axesImage
                anchors.centerIn: parent
                source: "axes.png"

                property color buttonColor: "#448888"
            }
        }

        //说明文字
        Rectangle {
            id: instructions
            anchors.margins: 5
            anchors.top: navigator.bottom
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            anchors.right: navigator.right
            Text {
                anchors.fill: parent
                id: instructionsText
                wrapMode: Text.WordWrap
                text: qsTr("Use this navigator to create new boxes and move around"
                           + " 3d space.\n"
                           + "Use the color picker to change the color of "
                           + "generated cubes."
                           //                       + "\n  Click on cubes to remove them from the scene."
                           )
            }
        }
    }
}

 

Button.qml

import QtQuick 1.0

Rectangle {
    id: button
    color: mouseArea.pressed ? "#000000" : "#ffffff"
    border.width: 1
    anchors.margins: 5
    radius: 5

    property alias text : text.text //页面显示的文字
    signal clicked; //单击信号

    Text {
        id: text
        color: mouseArea.pressed ? "#ffffff" : "#000000";
        anchors.centerIn: parent
        text: qsTr("A Button")
    }
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: button.clicked()

    }
}

 

操作：

点击当方向按钮时动态向模式中添加立方体元素，

点击模式中立方体元素时，删除

问题：

1.属性绑定

 propertyreal currentRed:       1.0

和currentRed属性自动绑定，当值改变自动调用下面的函数

onCurrentRedChanged:updateColor();

2. 通过Repeater动态向Viewport中添加三维元素


Button.qmlButton.qmlButton.qml

 

 

2.qml 3D-View3D类学习
抵抗时间扭曲，坚持做一件有意义的事
12-01 1912
设置公共的Node，比如有多个View3D,其内容都是相同的Node，只是相机位置不一致而已，具体参考示例(View3D Example),注意：该属性只能设置一次，后续更改将无效。QtQuick3D::Camera,指定用哪个相机来显示QtQuick3D::SceneEnvironment，设置渲染场景,比如背景色QtQuick3D::Node,设置公共的Node，比如有多个View3D,其内容都是相同的Node，只是相机位置不一致而已，具体参考示例(View3D Example)
Qt6.1教程：Qt Quick3D渲染实例
qq_42444778的博客
03-04 2633
Qt是一个跨平台框架，通常用作图形工具包，它不仅创建CLI应用程序中非常有用。而且它也可以在三种主要的台式机操作系统以及移动操作系统（如Symbian，Nokia Belle，Meego Harmattan，MeeGo或BB10）以及嵌入式设备，Android（Necessitas）和iOS的端口上运行。现在我们为你提供了免费的试用版。 下载Qt6最新试用版 Qt组件推荐： QtitanRibbon|下载试用:遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribb..
Qt Quick 3D架构
aggs1990的专栏
05-30 375
Qt Quick 3D由几个模块和插件组成，这些模块和插件公开了额外的3D API以及用于调节和导入现有3D资产的实用程序。
附加模块--Qt Quick 3D模块功能及架构
最新发布
kangjunfei的博客
06-10 1205
Qt Quick 3D模块主要功能及架构解析
Qt Quick 3D
aggs1990的专栏
05-14 235
​Qt Quick 3D提供了一个高级API，用于创建基于Qt Quick的3D内容和3D用户界面。Qt Quick 3D没有使用外部引擎（这会产生同步问题和额外的抽象层），而是为空间内容提供了对现有Qt Quick Scene Graph的扩展，并为扩展的场景图提供了渲染器。使用空间场景图时，可以将Qt Quick 2D内容与3D内容混合使用。​Qt Quick 3D还通过Qt Quick 3D XR提供XR和VR应用程序。
Quick3D 学习文档
feipigwang
07-02 502
一.介绍 quick3d是把qt3d部分以插件的形式导出，在QML中通过包含的形式来进行使用的。 quick3d部分，使用的包含有 import Qt3D 1.0 import Qt3D.Shapes 1.0 Import Qt3D是包含主要的一些Qt3D模块，而Qt3D.Shapes包含的是一些立方体，球体，圆柱体等的信息，方便使用各种简单模型。 二.具体的说明(这里没有按照原来...
Qt Quick 3D6.0：更深入集成2D内容，跨平台渲染不是梦
qq_42444778的博客
11-04 963
Qt是一个跨平台框架，通常用作图形工具包，它不仅创建CLI应用程序中非常有用。而且它也可以在三种主要的台式机操作系统以及移动操作系统（如Symbian，Nokia Belle，Meego Harmattan，MeeGo或BB10）以及嵌入式设备，Android（Necessitas）和iOS的端口上运行。现在我们为你提供了免费的试用版。赶快点击下载Qt最新试用版吧>> 【Qtitan组件集】 QtitanRibbon:遵循Microsoft Ribbon UI Paradigm for Q.
QT quick3d
03-15
import QtQuick3D 1.15 Window { visible: true width: 640 height: 480 title: qsTr("Simple Cube Rotation") View3D { anchors.fill: parent Camera { id: camera position: Qt.vector3d(0, 0, 40) } ...
qt quick 3d视角拖拽
01-01
import QtQuick3D ``` 接着定义场景以及其中的一个立方体作为要操作的目标物体，并设置其初始位置和大小： ```qml View3D { id: view environment: SceneEnvironment { clearColor: "#e0e0e0" background...
qtquick3D中geometry
01-23
### QtQuick3D 中 Geometry 的使用方法 #### 定义自定义几何形状 为了创建自定义几何形状，在Qt Quick 3D中可以继承`QQuick3DGeometry`类。这允许开发者封装顶点列表、索引列表以及材质等资源，从而形成可在三维...
Qt Quick 3D编程
QT性能优化QT原理源码QT界面美化
04-10 364
创建和应用自定义材质创建和应用自定义材质在Qt Quick中，通过自定义材质可以为3D对象赋予独特的视觉效果。自定义材质允许开发者根据特定需求调整纹理、颜色、透明度等因素，从而显著提升应用程序的外观和功能。理解Qt Quick中的材质基础首先，要理解Qt Quick中材质的基本概念。材质决定了物体表面如何与光线交互，包括反射、折射、漫反射等特性。在Qt Quick里，材质可以通过Rectangle或特定3D几何体的属性来应用，并使用Material类进行定制。使用自定义纹理。
Qt6 QML Book/Qt Quick 3D/Qt Quick 3D
aggs1990的专栏
06-29 421
The Qt Quick 3D module takes the power of QML to the third dimension. Using Qt Quick 3D you can create three dimensional scenes and use the property bindings, state management, animations, and more from QML to make the scene interactive. You can even mix 2
Qt Quick 3D场景，包含2D内容
aggs1990的专栏
09-18 753
Qt Quick 3D提供了结合3D和2D元素的场景的高效创建和渲染。我们所说的组合3D-2D场景是什么意思？.​本质上，表示2D场景中3D视口的View3D对象可以很容易地与Qt Quick项组合，例如矩形、图像、文本、View3D项周围、下方或上方，而View3D项本身就是Qt Quick项目。​这里的3D场景是具有灰色背景的区域。窗口的其余部分由2D Qt Quick项目组成。它们可以与View3D重叠，但不是3D世界的一部分，不使用3D坐标系，也不参与3D场景的变换。and。
Qt Quick 3D系列（一）：加载3d模型
热门推荐
zjgo007的专栏
02-14 1万+
如果我们想在QML中使用3D且你之前没有三维程序开发的基础，使用Qt Quick 3D是个不错的选择，下面我介绍如何使用Qt Quick 3D加载3d模型。
Qt Quick 3D介绍：Qt Quick的高级3D API
Qt中国的博客
06-18 5372
我们创建了一个名为Qt Quick 3D的新项目，提供高级API，用于从Qt Quick为用户界面创建3D内容。 我们没有使用会导致动画同步问题和需要多层抽象的外部引擎，而是在Qt Quick Scenegraph中扩展了3D的部分，并为这些扩展的场景图节点（scene graph node）提供了对应的渲染器。
Qt 6.4中的Qt Quick 3D物理
aggs1990的专栏
07-18 572
顾名思义，这是一个在QtQuick3D上添加物理模拟功能的模块。特别是，它支持使用简单的基本体（球体、长方体、平面和胶囊）以及凸面和三角形网格和高度图进行刚体模拟。这使得在3D场景中创建物理上正确的行为成为可能，而无需手工制作动画。​QtQuick3DPhysics是一个纯QMLAPI，目前在Qt6.4中作为技术预览版提供。关于这个模块还有很多要说的，但因为一张图片能说千言万语，我想这个例子的视频会说得更多。我希望你觉得这篇博文很有趣，我期待着看到你将用这个新模块创建什么。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值