Qt組件推薦：

Qt 3D 天文：QML 示例

下載Qt6最新試用版

演示結(jié)合Qt 3D渲染和Qt Quick 2元素。

本文演示了如何實現(xiàn) Qt 3D 渲染與 Qt Quick 2D 元素結(jié)合使用的應(yīng)用程序。該示例顯示了太陽系的八顆行星與太陽。

行星紋理貼圖由 James Hastings-Trew 版權(quán)所有 (c) //planetpixelemporium.com/planets.html經(jīng)許可使用。

行星在給定時間根據(jù)它們的軌道圍繞太陽旋轉(zhuǎn)。輪換從 2000 Jan 0.0 UT 開始。行星位置是根據(jù)此處找到的公式計算的：http : //www.stjarnhimlen.se/comp/ppcomp.html和//www.davidcolarusso.com/astro/。

運行示例

要從Qt Creator運行示例，請打開welcome模式并從Examples選擇示例。有關(guān)更多信息，請訪問構(gòu)建和運行示例。

Qt 快速二維實現(xiàn)

planets-qml/PlanetsMain.qml示例中的 Qt Quick Implementation使用Scene3D類型呈現(xiàn) 3D 內(nèi)容。

Scene3D { anchors.fill: parent aspects: ["render", "logic", "input"]  SolarSystem { id: solarsystem } }

行星相關(guān)信息存儲在一個ListModel. 行星的選擇按鈕和信息表是基于模型創(chuàng)建的。2D 元素、選擇按鈕和滑塊在planets-qml/PlanetsMain.qml.

選擇按鈕會更改 的focusedPlanet屬性mainview。隨著屬性的變化，行星信息會更新，并且相機會動畫到新的位置。

onFocusedPlanetChanged: { if (focusedPlanet == 100) { info.opacity = 0 updatePlanetInfo() } else { updatePlanetInfo() info.opacity = 1 }  solarsystem.changePlanetFocus(oldPlanet, focusedPlanet) oldPlanet = focusedPlanet }

相機位置和相機觀察點根據(jù) 中動畫的值更新planets-qml/SolarSystem.qml，由changePlanetFocus()函數(shù)觸發(fā)。

QQ2.NumberAnimation { id: lookAtOffsetAnimation target: sceneRoot properties: "xLookAtOffset, yLookAtOffset, zLookAtOffset" to: 0 easing.type: Easing.InOutQuint duration: 1250 }  QQ2.NumberAnimation { id: cameraOffsetAnimation target: sceneRoot properties: "xCameraOffset, yCameraOffset, zCameraOffset" to: 0 easing.type: Easing.InOutQuint duration: 2500 }

滑塊用于調(diào)整旋轉(zhuǎn)速度、行星大小和觀看距離。當(dāng)滑塊值發(fā)生變化時，planets-qml/SolarSystem.qml會調(diào)用一個 JavaScript 函數(shù)來調(diào)整給定的屬性。例如，更改觀看距離滑塊的值會調(diào)用該changeCameraDistance()方法。

onValueChanged: solarsystem.changeCameraDistance(value)

Qt 3D 實現(xiàn)

實現(xiàn)的主要部分，包括行星的運動和旋轉(zhuǎn)數(shù)學(xué)，在planets-qml/SolarSystem.qml.

首先，添加 a Camera、 aLight和 a Configuration，然后是Effects 代表行星Materials，最后是行星本身。例如，地球的構(gòu)造如下：

Entity { id: earthEntity  Planet { id: earth tilt: planetData[Planets.EARTH].tilt }  PlanetMaterial { id: materialEarth effect: effectDSB ambientLight: ambientStrengthPlanet diffuseMap: "qrc:/images/solarsystemscope/earthmap2k.jpg" specularMap: "qrc:/images/solarsystemscope/earthspec2k.jpg" normalMap: "qrc:/images/solarsystemscope/earthnormal2k.jpg" shininess: shininessSpecularMap }  property Transform transformEarth: Transform { matrix: { var m = Qt.matrix4x4() m.translate(Qt.vector3d(earth.x, earth.y, earth.z)) m.rotate(earth.tilt, tiltAxis) m.rotate(earth.roll, rollAxis) m.scale(earth.r) return m } }  components: [ earth, materialEarth, transformEarth ] }

移動和旋轉(zhuǎn)計算等所需的行星數(shù)據(jù)是planets-qml/planets.js通過loadPlanetData()在組件完成時調(diào)用的JavaScript 來構(gòu)建的。其他初始化，例如將行星插入數(shù)組以便于處理，計算土星環(huán)和天王星環(huán)的環(huán)半徑，以及設(shè)置默認(rèn)比例、速度和相機偏移，也已完成：

QQ2.Component.onCompleted: { planetData = Planets.loadPlanetData() // Push in the correct order planets.push(sun) planets.push(mercury) planets.push(venus) planets.push(earth) planets.push(mars) planets.push(jupiter) planets.push(saturn) planets.push(uranus) planets.push(neptune) planets.push(moon) // TODO: Once support for creating meshes from arrays is implemented take these into use //saturnRing.makeRing() //uranusRing.makeRing() saturnRingOuterRadius = planetData[Planets.SATURN].radius + Planets.saturnOuterRadius saturnRingInnerRadius = planetData[Planets.SATURN].radius + 0.006630 uranusRingOuterRadius = planetData[Planets.URANUS].radius + Planets.uranusOuterRadius uranusRingInnerRadius = planetData[Planets.URANUS].radius + 0.002 ready = true changeScale(1200) changeSpeed(0.2) setLookAtOffset(Planets.SUN) }

場景通過調(diào)用該animate()函數(shù)進行動畫處理。這也是時間提前的地方，計算所有行星的新位置。行星positionPlanet()根據(jù)它們的軸向傾斜和它們的恒星自轉(zhuǎn)周期在函數(shù)中旋轉(zhuǎn)。最后，在updateCamera()函數(shù)中計算新的相機位置。

function animate(focusedPlanet) { if (!ready) return  advanceTime(focusedPlanet) for (var i = 0; i <= Planets.NUM_SELECTABLE_PLANETS; i++) positionPlanet(i)  updateCamera(focusedPlanet) }

====================================================

想要了解或購買Qt正版授權(quán)的朋友，歡迎

Qt技術(shù)交流交流群開通，QQ搜索群號“765444821”或者掃描二維碼加入