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类型文件       

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick3D 1.15Window {width: 640height: 480visible: truetitle: qsTr("Hello World")View3D {id: view3Danchors.fill: parentenvironment: sceneEnvironmentSceneEnvironment {id: sceneEnvironmentantialiasingQuality: SceneEnvironment.HighantialiasingMode: SceneEnvironment.MSAA}Node {id: nodeDirectionalLight {id: directionalLight}PerspectiveCamera {id: cameraz: 15}Model {id: cubeModelsource: "test.mesh"DefaultMaterial {id: cubeMaterialdiffuseColor: "#4aee45"}materials: cubeMaterial}}}
}

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

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick3D 1.15Window {width: 640height: 480visible: truetitle: qsTr("Hello World")View3D {id: view3Danchors.fill: parentenvironment: sceneEnvironmentSceneEnvironment {id: sceneEnvironmentantialiasingQuality: SceneEnvironment.HighantialiasingMode: SceneEnvironment.MSAA}MouseArea{id:mouseanchors.fill: parentproperty int cx: 0property int cy: 0onWheel: {if(wheel.angleDelta.y>0)camera.z = camera.z+5elsecamera.z = camera.z-5}onPressed: {cx = mouse.xcy = mouse.y}onPositionChanged: {var intervalX = mouse.x-cxvar intervalY = mouse.y-cycameraNode.eulerRotation.y = intervalX+cameraNode.eulerRotation.ycameraNode.eulerRotation.x = cameraNode.eulerRotation.x-intervalYcx = mouse.xcy = mouse.y}}Node {id: nodeDirectionalLight {id: directionalLight}Model {id: cubeModelsource: "test.mesh"DefaultMaterial {id: cubeMaterialdiffuseColor: "#4aee45"}materials: cubeMaterial}}Node{id:cameraNodePerspectiveCamera {id: cameraz: 15}}}
}

     

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

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick3D 1.15Window {width: 640height: 480visible: truetitle: qsTr("Hello World")View3D {id: view3Danchors.fill: parentenvironment: sceneEnvironmentSceneEnvironment {id: sceneEnvironmentantialiasingQuality: SceneEnvironment.HighantialiasingMode: SceneEnvironment.MSAA}MouseArea{id:mouseanchors.fill: parentproperty int cx: 0property int cy: 0onWheel: {if(wheel.angleDelta.y>0)camera.z = camera.z+5elsecamera.z = camera.z-5}onPressed: {cx = mouse.xcy = mouse.y}onPositionChanged: {var intervalX = mouse.x-cxvar intervalY = mouse.y-cycameraNode.eulerRotation.y = intervalX+cameraNode.eulerRotation.ycameraNode.eulerRotation.x = cameraNode.eulerRotation.x-intervalYcx = mouse.xcy = mouse.y}}Node {id: nodeDirectionalLight {id: directionalLight}Model {id: cubeModelsource: "test.mesh"materials: PrincipledMaterial {id: cubeMaterialbaseColor: "#e9d805"roughness: 0.4metalness: 0.8}}}Node{id:cameraNodePerspectiveCamera {id: cameraz: 15}}}
}

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

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick3D 1.15Window {width: 640height: 480visible: truetitle: qsTr("Hello Qt Quick 3D")View3D {id: view3Danchors.fill: parentenvironment: sceneEnvironmentSceneEnvironment {id: sceneEnvironmentantialiasingQuality: SceneEnvironment.HighantialiasingMode: SceneEnvironment.MSAA}Node {id: nodeDirectionalLight {id: directionalLight}Model {id: cubeModelsource: "test.mesh"DefaultMaterial {id: cubeMaterialdiffuseColor: "#4aee45"}materials: cubeMaterial}}Node{id:cameraNodePerspectiveCamera {id: cameraz: 15}NumberAnimation {id:camerAnimationtarget: cameraNodeproperty: "eulerRotation.y"duration: 5000from: 0to: -360loops: Animation.Infiniterunning: true}}}
}

 

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

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

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick3D 1.15Window {width: 480height: 450visible: truetitle: qsTr("Hello Qt Quick 3D")color: "#00192e"Image{opacity: 0.3anchors.fill: parentsource: "qrc:/bg1.png"fillMode: Image.PreserveAspectCrop}View3D {id: view3Danchors.fill: parentenvironment: SceneEnvironment {id: sceneEnvironment//需要设置3D视图背景透明backgroundMode: SceneEnvironment.TransparentclearColor: "transparent"antialiasingQuality: SceneEnvironment.HighantialiasingMode: SceneEnvironment.MSAA}MouseArea{id:mouseanchors.fill: parentproperty int cx: 0property int cy: 0onWheel: {if(wheel.angleDelta.y>0)cameraPerspective.z = cameraPerspective.z+5elsecameraPerspective.z = cameraPerspective.z-5}onPressed: {camerAnimation.pause()cx = mouse.xcy = mouse.y}onReleased: {camerAnimation.resume()}onPositionChanged: {var intervalX = mouse.x-cxvar intervalY = mouse.y-cycameraNode.eulerRotation.y = intervalX+cameraNode.eulerRotation.ycameraNode.eulerRotation.x = cameraNode.eulerRotation.x-intervalYcx = mouse.xcy = mouse.y}}Node {id: sceneDirectionalLight {x: 56eulerRotation.y: 90ambientColor: "#1c1a17"brightness: 163}Node {id: rootNodescale:Qt.vector3d(0.1,0.1,0.1)Node {x: 12.4775y: 36.2141z: 10.5153eulerRotation.x: 180eulerRotation.y: 32.0597eulerRotation.z: -180Model {x: 121.16y: -17.21z: 86.29eulerRotation.x: 180eulerRotation.y: -32.0597eulerRotation.z: -180source: "meshes/Plane.mesh"materials: PrincipledMaterial {baseColor: "#a0a2a3"roughness: 0.6metalness: 0.5}}}PointLight {x: 80.1709y: 382.888z: -150.021eulerRotation.x: -69.997eulerRotation.y: 59.9021eulerRotation.z: -180color: "#fffff5e1"}PointLight {x: -305.432y: 199.762z: 163.037eulerRotation.x: 173eulerRotation.y: -59.9035color: "#ffecf9ff"}PointLight {x: 238.189y: 380.379z: 252.482eulerRotation.x: 138.592eulerRotation.y: 36.109color: "#ff3b5966"}}Node{id:cameraNodeeulerRotation.x: -20eulerRotation.y: 120PerspectiveCamera {id: cameraPerspectivey: 5clipNear: 0.1fieldOfView: 50z:90clipFar: 800}NumberAnimation {id:camerAnimationtarget: cameraNodeproperty: "eulerRotation.y"duration: 5000from: 0to: 360loops: Animation.Infiniterunning: true}}}Text {text: qsTr("鼠标左键：旋转；鼠标滚轮：缩放")anchors.right: parent.rightanchors.bottom: parent.bottomfont.pointSize: 12font.bold: trueanchors.rightMargin: 10anchors.bottomMargin: 10font.family: "微软雅黑"color:"ghostwhite"}}
}

 

基本元素

        三维坐标

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

        坐标旋转方向

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