• QML 3D入门知识路线

    目前使用的版本

            v5.14.0

    模块导入

            使用QML 3D时需要 import Qt3D.Core 2.14

    核心模块类

            V6以上的版本已经发布，所以有很多module会发生变化，主要有核心module、输入、逻辑、渲染、动画和扩展module，以及2D/3D场景模块       

    类名        能力

    View3D

    		为绘制3D数据提供了在2D场景中显示的窗口

    OrbitCameraController

    		按照轨道路线来控制场景相机

    QAbstractAnimation

    		3D动画的顶层root类，派生的动画类提供了动画效果能力

          

    学习路线

            3d效果中离不开动画，所以要想学好3d部分，需要将动画部分也掌握。然后再从最基础的3d理论知识入门

    Demo

            官方给出了很多例子，可以根据官方demo进行由浅入深的学习。地址在source code中：SourceCode Root Path/qt3d/

            此外，网络上还提供了不少入门的demo，从较小的纬度（基础的加载3d资源、鼠标处理等操作）提供了演示操作，下面是收集来的各种操作集合。

            1、加载3D模型资源+将.obj文件转换成.mesh类型文件       

    1. import QtQuick 2.15
    2. import QtQuick.Window 2.15
    3. import QtQuick3D 1.15
    4.  
    5. Window {
    6.     width: 640
    7.     height: 480
    8.     visible: true
    9.     title: qsTr("Hello World")
    10.  
    11.     View3D {
    12.         id: view3D
    13.         anchors.fill: parent
    14.         environment: sceneEnvironment
    15.         SceneEnvironment {
    16.             id: sceneEnvironment
    17.             antialiasingQuality: SceneEnvironment.High
    18.             antialiasingMode: SceneEnvironment.MSAA
    19.         }
    20.  
    21.         Node {
    22.             id: node
    23.             DirectionalLight {
    24.                 id: directionalLight
    25.             }
    26.  
    27.             PerspectiveCamera {
    28.                 id: camera
    29.                 z: 15
    30.             }
    31.  
    32.             Model {
    33.                 id: cubeModel
    34.                 source: "test.mesh"
    35.                 DefaultMaterial {
    36.                     id: cubeMaterial
    37.                     diffuseColor: "#4aee45"
    38.                 }
    39.                 materials: cubeMaterial
    40.             }
    41.         }
    42.     }
    43. }

          2、鼠标控制场景缩放和旋转

    1. import QtQuick 2.15
    2. import QtQuick.Window 2.15
    3. import QtQuick3D 1.15
    4.  
    5. Window {
    6.     width: 640
    7.     height: 480
    8.     visible: true
    9.     title: qsTr("Hello World")
    10.  
    11.     View3D {
    12.         id: view3D
    13.         anchors.fill: parent
    14.         environment: sceneEnvironment
    15.         SceneEnvironment {
    16.             id: sceneEnvironment
    17.             antialiasingQuality: SceneEnvironment.High
    18.             antialiasingMode: SceneEnvironment.MSAA
    19.         }
    20.  
    21.         MouseArea{
    22.             id:mouse
    23.             anchors.fill: parent
    24.             property int cx: 0
    25.             property int cy: 0
    26.             onWheel: {
    27.                 if(wheel.angleDelta.y>0)
    28.                     camera.z = camera.z+5
    29.                 else
    30.                     camera.z = camera.z-5
    31.             }
    32.             onPressed: {
    33.                 cx = mouse.x
    34.                 cy = mouse.y
    35.             }
    36.  
    37.             onPositionChanged: {
    38.                 var intervalX = mouse.x-cx
    39.                 var intervalY = mouse.y-cy
    40.                 cameraNode.eulerRotation.y = intervalX+cameraNode.eulerRotation.y
    41.                 cameraNode.eulerRotation.x = cameraNode.eulerRotation.x-intervalY
    42.                 cx = mouse.x
    43.                 cy = mouse.y
    44.             }
    45.         }
    46.         Node {
    47.             id: node
    48.             DirectionalLight {
    49.                 id: directionalLight
    50.             }
    51.  
    52.             Model {
    53.                 id: cubeModel
    54.                 source: "test.mesh"
    55.                 DefaultMaterial {
    56.                     id: cubeMaterial
    57.                     diffuseColor: "#4aee45"
    58.                 }
    59.                 materials: cubeMaterial
    60.             }
    61.         }
    62.  
    63.         Node{
    64.             id:cameraNode
    65.             PerspectiveCamera {
    66.                 id: camera
    67.                 z: 15
    68.             }
    69.         }
    70.     }
    71. }

         

            3、设置模型的金属光泽材质

    1. import QtQuick 2.15
    2. import QtQuick.Window 2.15
    3. import QtQuick3D 1.15
    4.  
    5. Window {
    6.     width: 640
    7.     height: 480
    8.     visible: true
    9.     title: qsTr("Hello World")
    10.  
    11.     View3D {
    12.         id: view3D
    13.         anchors.fill: parent
    14.         environment: sceneEnvironment
    15.         SceneEnvironment {
    16.             id: sceneEnvironment
    17.             antialiasingQuality: SceneEnvironment.High
    18.             antialiasingMode: SceneEnvironment.MSAA
    19.         }
    20.  
    21.         MouseArea{
    22.             id:mouse
    23.             anchors.fill: parent
    24.             property int cx: 0
    25.             property int cy: 0
    26.             onWheel: {
    27.                 if(wheel.angleDelta.y>0)
    28.                     camera.z = camera.z+5
    29.                 else
    30.                     camera.z = camera.z-5
    31.             }
    32.             onPressed: {
    33.                 cx = mouse.x
    34.                 cy = mouse.y
    35.             }
    36.  
    37.             onPositionChanged: {
    38.                 var intervalX = mouse.x-cx
    39.                 var intervalY = mouse.y-cy
    40.                 cameraNode.eulerRotation.y = intervalX+cameraNode.eulerRotation.y
    41.                 cameraNode.eulerRotation.x = cameraNode.eulerRotation.x-intervalY
    42.                 cx = mouse.x
    43.                 cy = mouse.y
    44.             }
    45.         }
    46.         Node {
    47.             id: node
    48.             DirectionalLight {
    49.                 id: directionalLight
    50.             }
    51.  
    52.             Model {
    53.                 id: cubeModel
    54.                 source: "test.mesh"
    55.  
    56.                 materials: PrincipledMaterial {
    57.                     id: cubeMaterial
    58.                     baseColor: "#e9d805"
    59.                     roughness: 0.4
    60.                     metalness: 0.8
    61.                 }
    62.             }
    63.         }
    64.  
    65.         Node{
    66.             id:cameraNode
    67.             PerspectiveCamera {
    68.                 id: camera
    69.                 z: 15
    70.             }
    71.         }
    72.     }
    73. }

            4、使用2d的动画类来操作3d模型

    1. import QtQuick 2.15
    2. import QtQuick.Window 2.15
    3. import QtQuick3D 1.15
    4.  
    5. Window {
    6.     width: 640
    7.     height: 480
    8.     visible: true
    9.     title: qsTr("Hello Qt Quick 3D")
    10.  
    11.     View3D {
    12.         id: view3D
    13.         anchors.fill: parent
    14.         environment: sceneEnvironment
    15.         SceneEnvironment {
    16.             id: sceneEnvironment
    17.             antialiasingQuality: SceneEnvironment.High
    18.             antialiasingMode: SceneEnvironment.MSAA
    19.         }
    20.  
    21.         Node {
    22.             id: node
    23.             DirectionalLight {
    24.                 id: directionalLight
    25.             }
    26.  
    27.             Model {
    28.                 id: cubeModel
    29.                 source: "test.mesh"
    30.                 DefaultMaterial {
    31.                     id: cubeMaterial
    32.                     diffuseColor: "#4aee45"
    33.                 }
    34.                 materials: cubeMaterial
    35.             }
    36.         }
    37.  
    38.         Node{
    39.             id:cameraNode
    40.  
    41.             PerspectiveCamera {
    42.                 id: camera
    43.                 z: 15
    44.             }
    45.  
    46.             NumberAnimation {
    47.                 id:camerAnimation
    48.                 target: cameraNode
    49.                 property: "eulerRotation.y"
    50.                 duration: 5000
    51.                 from: 0
    52.                 to: -360
    53.                 loops: Animation.Infinite
    54.                 running: true
    55.             }
    56.         }
    57.     }
    58. }

     

            5、综合性的显示3D模型（材质颜色、动画以及鼠标缩放等）

             如果需要自定义背景图片时，需要设置View3D的背景色为透明，方法在上面链接中

    1. import QtQuick 2.15
    2. import QtQuick.Window 2.15
    3. import QtQuick3D 1.15
    4.  
    5. Window {
    6.     width: 480
    7.     height: 450
    8.     visible: true
    9.     title: qsTr("Hello Qt Quick 3D")
    10.     color: "#00192e"
    11.  
    12.     Image{
    13.         opacity: 0.3
    14.         anchors.fill: parent
    15.         source: "qrc:/bg1.png"
    16.         fillMode: Image.PreserveAspectCrop
    17.     }
    18.  
    19.     View3D {
    20.         id: view3D
    21.         anchors.fill: parent
    22.         environment: SceneEnvironment {
    23.             id: sceneEnvironment
    24.             //需要设置3D视图背景透明
    25.             backgroundMode: SceneEnvironment.Transparent
    26.             clearColor: "transparent"
    27.             antialiasingQuality: SceneEnvironment.High
    28.             antialiasingMode: SceneEnvironment.MSAA
    29.         }
    30.  
    31.  
    32.         MouseArea{
    33.             id:mouse
    34.             anchors.fill: parent
    35.             property int cx: 0
    36.             property int cy: 0
    37.             onWheel: {
    38.                 if(wheel.angleDelta.y>0)
    39.                     cameraPerspective.z = cameraPerspective.z+5
    40.                 else
    41.                     cameraPerspective.z = cameraPerspective.z-5
    42.             }
    43.             onPressed: {
    44.                 camerAnimation.pause()
    45.                 cx = mouse.x
    46.                 cy = mouse.y
    47.             }
    48.             onReleased: {
    49.                 camerAnimation.resume()
    50.             }
    51.             onPositionChanged: {
    52.                 var intervalX = mouse.x-cx
    53.                 var intervalY = mouse.y-cy
    54.                 cameraNode.eulerRotation.y = intervalX+cameraNode.eulerRotation.y
    55.                 cameraNode.eulerRotation.x = cameraNode.eulerRotation.x-intervalY
    56.                 cx = mouse.x
    57.                 cy = mouse.y
    58.  
    59.             }
    60.         }
    61.  
    62.         Node {
    63.             id: scene
    64.  
    65.             DirectionalLight {
    66.                 x: 56
    67.                 eulerRotation.y: 90
    68.  
    69.                 ambientColor: "#1c1a17"
    70.                 brightness: 163
    71.             }
    72.             Node {
    73.                 id: rootNode
    74.                 scale:Qt.vector3d(0.1,0.1,0.1)
    75.                 Node {
    76.                     x: 12.4775
    77.                     y: 36.2141
    78.                     z: 10.5153
    79.                     eulerRotation.x: 180
    80.                     eulerRotation.y: 32.0597
    81.                     eulerRotation.z: -180
    82.  
    83.                     Model {
    84.                         x: 121.16
    85.                         y: -17.21
    86.                         z: 86.29
    87.                         eulerRotation.x: 180
    88.                         eulerRotation.y: -32.0597
    89.                         eulerRotation.z: -180
    90.                         source: "meshes/Plane.mesh"
    91.  
    92.                         materials: PrincipledMaterial {
    93.                             baseColor: "#a0a2a3"
    94.                             roughness: 0.6
    95.                             metalness: 0.5
    96.  
    97.                         }
    98.                     }
    99.                 }
    100.  
    101.  
    102.                 PointLight {
    103.                     x: 80.1709
    104.                     y: 382.888
    105.                     z: -150.021
    106.                     eulerRotation.x: -69.997
    107.                     eulerRotation.y: 59.9021
    108.                     eulerRotation.z: -180
    109.                     color: "#fffff5e1"
    110.                 }
    111.  
    112.                 PointLight {
    113.                     x: -305.432
    114.                     y: 199.762
    115.                     z: 163.037
    116.                     eulerRotation.x: 173
    117.                     eulerRotation.y: -59.9035
    118.                     color: "#ffecf9ff"
    119.                 }
    120.  
    121.                 PointLight {
    122.                     x: 238.189
    123.                     y: 380.379
    124.                     z: 252.482
    125.                     eulerRotation.x: 138.592
    126.                     eulerRotation.y: 36.109
    127.                     color: "#ff3b5966"
    128.                 }
    129.             }
    130.  
    131.             Node{
    132.                 id:cameraNode
    133.                 eulerRotation.x: -20
    134.                 eulerRotation.y: 120
    135.                 PerspectiveCamera {
    136.                     id: cameraPerspective
    137.                     y: 5
    138.                     clipNear: 0.1
    139.                     fieldOfView: 50
    140.                     z:90
    141.                     clipFar: 800
    142.                 }
    143.                 NumberAnimation {
    144.                     id:camerAnimation
    145.                     target: cameraNode
    146.                     property: "eulerRotation.y"
    147.                     duration: 5000
    148.                     from: 0
    149.                     to: 360
    150.                     loops: Animation.Infinite
    151.                     running: true
    152.                 }
    153.             }
    154.  
    155.  
    156.  
    157.         }
    158.  
    159.         Text {
    160.             text: qsTr("鼠标左键：旋转；鼠标滚轮：缩放")
    161.             anchors.right: parent.right
    162.             anchors.bottom: parent.bottom
    163.             font.pointSize: 12
    164.             font.bold: true
    165.             anchors.rightMargin: 10
    166.             anchors.bottomMargin: 10
    167.             font.family: "微软雅黑"
    168.             color:"ghostwhite"
    169.         }
    170.     }
    171. }

     

    基本元素

            三维坐标

            两个坐标，连接起来就是北面墙。什么意思?想象一下，其中一个坐标是东北方的下墙角，以墙角为原点，往南是X轴；往上是Y轴；往西是Z轴。另一个坐标是西北方的下墙角，还是以墙角为原点，往南是X轴；往上是Y轴；往东是Z轴。两个坐标系相互延伸、连接起来就是一面北墙。

            坐标旋转方向

            半握右手，大拇指朝上，从手背到四指的延伸方向就是坐标轴旋转方向

            

  • 相关阅读:
    拷贝对象时编译器的一些优化
    golang_iota
    【OpenCV 例程 300篇】247. 特征检测之最大稳定极值区域（MSER）
    解决方案：读取两个文件夹里不同名的文件，处理映射不对应的文件
    【Maven】SpringBoot多模块项目利用reversion占位符,进行版本管理.打包时版本号不能识别问题
    Git获取本地仓库及基本操作指令
    数据结构之：数组
    拼多多快捷回复怎么设置
    怒冲GitHub榜首，京东T8幕后打造高并发面试手册，狂虐阿里面试官
    一致性哈希的简单认识
  • 原文地址：https://blog.csdn.net/weixin_43935710/article/details/136456214