主代码结构
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
View3D {
id: view3D
anchors.fill: parent
environment: SceneEnvironment {
clearColor: "skyblue"
backgroundMode: SceneEnvironment.Color
}
PerspectiveCamera {
id: camera
position: Qt.vector3d(0, 200, 300)
eulerRotation.x: -30
eulerRotation.y: 0
}
WasdController {
id: wasd_control
controlledObject: camera
}
DirectionalLight {
eulerRotation.x: -30
eulerRotation.y: -70
}
Model {
id: plate
position: Qt.vector3d(0, -200, 0)
source: "#Cylinder"
scale: Qt.vector3d(4, 0.1, 1)
materials: [ DefaultMaterial {
diffuseColor: "red"
}
]
}
}
}
View3D加载3D场景，将其转换为2D在屏幕上显示
environment：设置环境样式，如下：
clearColor: "skyblue"
backgroundMode: SceneEnvironment.Color//可展示天蓝色背景
SceneEnvironment.Transparent//透视模型后边的内容
SceneEnvironment.SkyBox//？？？
antialiasingQuality :SceneEnvironment.Medium//抗锯齿质量
设置相机，如下：
PerspectiveCamera：设置透视相机（近大远小），可以设置位置和旋转角度（欧拉角）。
OrthographicCamera：设置正交相机（远近等大）。
还可设置相机移动，wsad和上下左右，以及鼠标拖动改变方向，但滚轮没有前进后退效果
WasdController {
id: wasd_control
//指定受控对象，通常受控节点是相机
controlledObject: cameraId //cameraId是相机的id
}
设置灯光，如下：
DirectionalLight：平行光，默认从z轴的正方向向负方向照射，不可设置光源位置，但可设置旋转角度。
PointLight：点光源，设置位置、强度等。
SpotLight：聚光灯，设置位置角度强度等。
以上设置好，即可放置模型并显示。
放置模型
一般用Model设置一个模型，多个模型的组合可以由Node包裹多个Model。Node在3D场景中可用作锚点。
Node {
id: xyz
Model {
id: model1
source: "#Cylinder"
scale: Qt.vector3d(1000,0.01,0.01)
eulerRotation: Qt.vector3d(-90,0,0)
materials: DefaultMaterial {
diffuseColor: "blue"
}
}
Model{
id: model2
source: "#Cylinder"
scale: Qt.vector3d(0.01,1000,0.01)
materials: DefaultMaterial {
diffuseColor: "blue"
}
}
}
放置2D组件
在Quick3D中放置2D组件，可以用Node进行包裹，设置其3D属性，即可将其中的2D组件进行相应的三维操作。
//在3维场景中的一个平面上，画线
View3D {
id: view3D
Node{//放在模型的地面上
eulerRotation.x: -90
Rectangle {
anchors.horizontalCenter: parent.horizontalCenter
color: "orange"
width: 110
height: 110
Canvas{
id: canvas
anchors.fill: parent
onPaint: {
var ctx = getContext("2d")
ctx.strokeStyle = "blue"
ctx.lineWidth = 2
// 起点坐标
var startX = 0
var startY = 10
// 终点坐标
var endX = 50
var endY = 50
// 绘制线条
ctx.beginPath()
ctx.moveTo(startX, startY)
ctx.lineTo(endX, endY)
ctx.stroke()
}
}
}
}
}
用Canvas画线。
使用 Canvas 组件来创建一个 400x400 的矩形，并在其中添加了一个 onPaint 事件处理程序。在事件处理程序中，我们获取了 2D 绘图上下文对象，设置了线条颜色和宽度，然后定义了起点和终点的坐标，并使用 moveTo 和 lineTo 方法绘制了一条线条。
通过使用 getContext("2d") 方法来获取 Canvas 组件的 2D 绘图上下文对象，即 ctx 对象。这是因为 Canvas 组件是一个 HTML5 Canvas 元素的封装，它提供了一个可编程的 2D 或 3D 绘图 API，通过使用这个 API，我们可以在 Canvas 上绘制自定义的图形和图像。