目前使用的版本
v5.14.0
模块导入
使用QML 3D时需要 import Qt3D.Core 2.14
核心模块类
V6以上的版本已经发布,所以有很多module会发生变化,主要有核心module、输入、逻辑、渲染、动画和扩展module,以及2D/3D场景模块
类名 | 能力 |
为绘制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轴。两个坐标系相互延伸、连接起来就是一面北墙。
坐标旋转方向
半握右手,大拇指朝上,从手背到四指的延伸方向就是坐标轴旋转方向