qml如何绘制三维笛卡尔坐标系并向其中添加折线?

Question

如题，最好能够支持缩放功能(譬如鼠标滚轮控制缩放)。版本 QT6.7.2.
另外，别直接复制粘贴AI的答案，试过好多次都是错的，别浪费大家时间

Answer 1

🕖上午好，题主！目前：🟢[在线]
📢参考通义千问、由郭老师整理提供！
📣今日诗号：水晶帘动微风起，满架蔷薇一院香。

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick3D 2.15
import QtQuick.Controls 2.15

Window {
    id: window
    width: 800
    height: 600
    visible: true
    title: qsTr("3D Cartesian Coordinate System with Line")

    View3D {
        anchors.fill: parent

        PerspectiveCamera {
            id: camera
            position: Qt.vector3d(5, 5, 10)
            lookAt: Qt.vector3d(0, 0, 0)
        }

        // Lighting
        DirectionalLight {
            color: "white"
            ambientColor: "lightgray"
            direction: Qt.vector3d(-1, -1, -1)
        }

        Model {
            source: "#Cube"
        }

        // Coordinate Axes
        Node {
            id: axes

            Cylinder {
                id: xAxis
                radius: 0.05
                height: 5
                rotation: Qt.vector3d(0, 0, 90)
                material: Material {
                    diffuseColor: "red"
                }
            }

            Cylinder {
                id: yAxis
                radius: 0.05
                height: 5
                rotation: Qt.vector3d(0, 0, 0)
                material: Material {
                    diffuseColor: "green"
                }
            }

            Cylinder {
                id: zAxis
                radius: 0.05
                height: 5
                rotation: Qt.vector3d(90, 0, 0)
                material: Material {
                    diffuseColor: "blue"
                }
            }

            // Add cones at the end of each axis for better visualization
            Cone {
                topRadius: 0
                bottomRadius: 0.1
                height: 0.3
                x: 2.5
                material: Material { diffuseColor: "red" }
            }

            Cone {
                topRadius: 0
                bottomRadius: 0.1
                height: 0.3
                y: 2.5
                material: Material { diffuseColor: "green" }
            }

            Cone {
                topRadius: 0
                bottomRadius: 0.1
                height: 0.3
                z: 2.5
                material: Material { diffuseColor: "blue" }
            }
        }

        // Polyline
        Polyline3D {
            id: polyline
            points: [
                Qt.vector3d(-1, 1, 1),
                Qt.vector3d(0, 2, -1),
                Qt.vector3d(1, 0, 1),
                Qt.vector3d(2, 1, -1),
            ]
            width: 3
            color: "yellow"
        }
    }

    // Zoom functionality using MouseWheel
    MouseArea {
        anchors.fill: parent
        onWheel: {
            if (wheel.angleDelta.y > 0) {
                camera.position *= 0.9 // Zoom in
            } else {
                camera.position *= 1.1 // Zoom out
            }
        }
    }
}

代码解释:

1. 导入模块:

   • QtQuick, QtQuick.Window, QtQuick3D: 用于创建窗口、基本UI元素和3D场景。
   • QtQuick.Controls: 如果需要添加按钮等控件。

2. 创建窗口 (Window):

   • 设置窗口标题、大小和可见性。

3. 设置 3D 场景 (View3D):

   • PerspectiveCamera: 定义一个透视相机，设置其位置和观察目标。
   • DirectionalLight: 添加光源，使场景中的对象可见。
   • Model: 加载一个简单的立方体模型 (#Cube) 到场景中，你可以替换成自己的模型。

4. 绘制坐标轴 (Node & Cylinder):

   • 使用 Cylinder 创建代表三个坐标轴的圆柱体。
   • 使用 rotation 属性旋转圆柱体，使其与坐标轴对齐。
   • 使用 material 属性设置坐标轴的颜色。
   • 添加 Cone 在坐标轴末端，增强可视化效果。

5. 绘制折线 (Polyline3D):

   • points 属性定义了折线的各个顶点坐标。
   • width 设置线条宽度。
   • color 设置线条颜色。

6. 实现缩放功能 (MouseArea):

   • 使用 MouseArea 覆盖整个窗口，监听鼠标滚轮事件。
   • onWheel 处理鼠标滚轮事件:
     • wheel.angleDelta.y 获取滚轮滚动方向和距离。
     • 根据滚轮滚动方向，调整相机的 position 属性，实现缩放效果。

使用方法:

1. 将代码保存为 .qml 文件 (例如 3DCartesian.qml)。
2. 使用 Qt Creator 打开该文件并运行，或者使用 qmlscene 命令运行。

注意:

• 代码中使用了 #Cube 模型，你需要确保你的 Qt 环境中已经包含了该模型，或者将其替换为你自己的模型文件。
• 你可以根据需要修改线条颜色、坐标轴长度、相机初始位置等参数来定制你的 3D 坐标系。