qt3d5-doc-html 5.5.1-4ubuntu3 / usr / share / qt5 / doc / qt3drenderer / qt3drenderer-planets-qml-example.html

This file is indexed.

/usr/share/qt5/doc/qt3drenderer/qt3drenderer-planets-qml-example.html is in qt3d5-doc-html 5.5.1-4ubuntu3.

This file is owned by root:root, with mode 0o644.

The actual contents of the file can be viewed below. 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- planets-qml.qdoc -->
  <title>Qt3D: Planets QML Example | Qt3D Module 5.5</title>
  <link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
    <div class="main">
    <div class="main-rounded">
        <div class="navigationbar">
        <ul>
<li>Qt 5.5</li>
<li>Qt3D Module</li>
<li>Qt3D: Planets QML Example</li>
<li id="buildversion">Qt 5.5.1 Reference Documentation</li>
    </ul>
    </div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#running-the-example">Running the Example</a></li>
<li class="level1"><a href="#qt-quick-2d-implementation">Qt Quick 2D Implementation</a></li>
<li class="level1"><a href="#qt-3d-implementation">Qt 3D Implementation</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Qt3D: Planets QML Example</h1>
<span class="subtitle"></span>
<!-- $$$planets-qml-description -->
<div class="descr"> <a name="details"></a>
<p class="centerAlign"><img src="images/planets-qml-example.jpg" alt="" /></p><p><i>Planets</i> demonstrates how to implement an application that combines the use of Qt 3D rendering with Qt Quick 2D elements. The example shows the eight planets of our Solar System with the Sun.</p>
<p>Planet texture maps are Copyright (c) by James Hastings-Trew <a href="http://planetpixelemporium.com/planets.html">http://planetpixelemporium.com/planets.html</a> used with permission.</p>
<p>The planets are rotating around the Sun based on their orbit at a given time. The rotation starts at 2000 Jan 0.0 UT. The planet positions are calculated based on the formulas found here: <a href="http://www.stjarnhimlen.se/comp/ppcomp.html">http://www.stjarnhimlen.se/comp/ppcomp.html</a> and <a href="http://www.davidcolarusso.com/astro/">http://www.davidcolarusso.com/astro/</a>.</p>
<a name="running-the-example"></a>
<h2 id="running-the-example">Running the Example</h2>
<p>To run the example from Qt Creator, open the <b>Welcome</b> mode and select the example from <b>Examples</b>. For more information, visit Building and Running an Example.</p>
<a name="qt-quick-2d-implementation"></a>
<h2 id="qt-quick-2d-implementation">Qt Quick 2D Implementation</h2>
<p>The Qt Quick Implementation <a href="qt3drenderer-planets-qml-planetsmain-qml.html">PlanetsMain.qml</a> of the example renders the 3D content using the <code>Scene3D</code> type.</p>
<pre class="qml"><span class="type">Scene3D</span> {
    <span class="name">anchors</span>.fill: <span class="name">parent</span>
    <span class="name">anchors</span>.margins: <span class="number">10</span>
    <span class="name">focus</span>: <span class="number">true</span>

    <span class="type">SolarSystem</span> { <span class="name">id</span>: <span class="name">solarsystem</span> }
}</pre>
<p>The planet related information is stored into a <code>ListModel</code>. The selection buttons for the planets and the information sheet are created based on the model. The 2D elements, selection buttons and sliders, are implemented in the <a href="qt3drenderer-planets-qml-planetsmain-qml.html">PlanetsMain.qml</a>.</p>
<p>The selection buttons change the <code>focusedPlanet</code> property of the <code>mainview</code>. As the property changes, the planet information is updated, and the camera is animated to the new position.</p>
<pre class="qml"><span class="name">onFocusedPlanetChanged</span>: {
    <span class="keyword">if</span> (<span class="name">focusedPlanet</span> <span class="operator">==</span> <span class="number">100</span>) {
        <span class="name">info</span>.<span class="name">opacity</span> <span class="operator">=</span> <span class="number">0</span>
        <span class="name">updatePlanetInfo</span>()
    } <span class="keyword">else</span> {
        <span class="name">updatePlanetInfo</span>()
        <span class="name">info</span>.<span class="name">opacity</span> <span class="operator">=</span> <span class="number">0.5</span>
    }

    <span class="name">solarsystem</span>.<span class="name">changePlanetFocus</span>(<span class="name">oldPlanet</span>, <span class="name">focusedPlanet</span>)
    <span class="name">oldPlanet</span> <span class="operator">=</span> <span class="name">focusedPlanet</span>
}</pre>
<p>The camera position and the camera look at point are updated based on values that are animated in the <a href="qt3drenderer-planets-qml-solarsystem-qml.html">SolarSystem.qml</a>, triggered from the <code>changePlanetFocus()</code> function.</p>
<pre class="qml"><span class="type">QQ2</span>.NumberAnimation {
    <span class="name">id</span>: <span class="name">lookAtOffsetAnimation</span>
    <span class="name">target</span>: <span class="name">sceneRoot</span>
    <span class="name">properties</span>: <span class="string">&quot;xLookAtOffset, yLookAtOffset, zLookAtOffset&quot;</span>
    <span class="name">to</span>: <span class="number">0</span>
    <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">InOutQuint</span>
    <span class="name">duration</span>: <span class="number">1250</span>
}

<span class="type">QQ2</span>.NumberAnimation {
    <span class="name">id</span>: <span class="name">cameraOffsetAnimation</span>
    <span class="name">target</span>: <span class="name">sceneRoot</span>
    <span class="name">properties</span>: <span class="string">&quot;xCameraOffset, yCameraOffset, zCameraOffset&quot;</span>
    <span class="name">to</span>: <span class="number">0</span>
    <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">InOutQuint</span>
    <span class="name">duration</span>: <span class="number">2500</span>
}</pre>
<p>The sliders are used to adjust the rotation speed, the planet size, and the viewing distance. When a slider value changes, a JavaScript function in <a href="qt3drenderer-planets-qml-solarsystem-qml.html">SolarSystem.qml</a> is called to adjust the given property. For example, changing the value of the <i>Viewing Distance</i> slider calls the <code>changeCameraDistance()</code> method.</p>
<pre class="qml"><span class="name">onValueChanged</span>: <span class="name">solarsystem</span>.<span class="name">changeCameraDistance</span>(<span class="name">value</span>)</pre>
<a name="qt-3d-implementation"></a>
<h2 id="qt-3d-implementation">Qt 3D Implementation</h2>
<p>The main part of the implementation, including the movement and rotation maths for the planets, is done in the <a href="qt3drenderer-planets-qml-solarsystem-qml.html">SolarSystem.qml</a>.</p>
<p>First, a <code>Camera</code>, a <code>Light</code>, and a <code>Configuration</code> are added, followed by <code>Effect</code>s for the planet <code>Material</code>s, and finally the planets themselves. For example, Earth is constructed as follows:</p>
<pre class="qml"><span class="type">Planet</span> {
    <span class="name">id</span>: <span class="name">earth</span>
    <span class="name">tilt</span>: <span class="name">planetData</span>[<span class="name">Planets</span>.<span class="name">EARTH</span>].<span class="name">tilt</span>
}

<span class="type">Entity</span> {
    <span class="name">id</span>: <span class="name">earthEntity</span>

    property <span class="type">Material</span> <span class="name">materialEarth</span>: <span class="name">PlanetMaterial</span> {
        <span class="name">effect</span>: <span class="name">effectDSB</span>
        <span class="name">ambientLight</span>: <span class="name">ambientStrengthPlanet</span>
        <span class="name">diffuseMap</span>: <span class="string">&quot;qrc:/images/earthmap1k.jpg&quot;</span>
        <span class="name">specularMap</span>: <span class="string">&quot;qrc:/images/earthspec1k.jpg&quot;</span>
        <span class="name">normalMap</span>: <span class="string">&quot;qrc:/images/earthnormal1k.jpg&quot;</span>
        <span class="name">shininess</span>: <span class="name">shininessSpecularMap</span>
    }

    property <span class="type"><a href="../qtquick/qml-qtquick-transform.html">Transform</a></span> <span class="name">transformEarth</span>: <span class="name">Transform</span> {
        <span class="type"><a href="../qtquick/qml-qtquick-scale.html">Scale</a></span> {
            <span class="name">scale</span>: <span class="name">earth</span>.<span class="name">r</span>
        }
        <span class="type">Rotate</span> {
            <span class="name">axis</span>: <span class="name">rollAxis</span>
            <span class="name">angle</span>: <span class="name">earth</span>.<span class="name">roll</span>
        }
        <span class="type">Rotate</span> {
            <span class="name">axis</span>: <span class="name">tiltAxis</span>
            <span class="name">angle</span>: <span class="name">earth</span>.<span class="name">tilt</span>
        }
        <span class="type"><a href="../qtquick/qml-qtquick-translate.html">Translate</a></span> {
            <span class="name">id</span>: <span class="name">translationEarth</span>
            <span class="name">translation</span>: <span class="name">Qt</span>.<span class="name">vector3d</span>(<span class="name">earth</span>.<span class="name">x</span>, <span class="name">earth</span>.<span class="name">y</span>, <span class="name">earth</span>.<span class="name">z</span>)
        }
    }

    <span class="name">components</span>: [ <span class="name">earth</span>, <span class="name">materialEarth</span>, <span class="name">transformEarth</span> ]
}</pre>
<p>Planet data, which is needed for the movement and rotation calculations, among other things, is constructed with JavaScript in <a href="qt3drenderer-planets-qml-planets-js.html">planets.js</a> by calling <code>loadPlanetData()</code> as the component completes. Other initializations, such as inserting the planets into an array for easier handling, calculating the ring radii for Saturn and Uranus rings, and setting the default scale, speed, and camera offset, are done as well:</p>
<pre class="qml"><span class="name">QQ2</span>.Component.onCompleted: {
    <span class="name">planetData</span> <span class="operator">=</span> <span class="name">Planets</span>.<span class="name">loadPlanetData</span>()
    <span class="comment">// Push in the correct order</span>
    <span class="name">planets</span>.<span class="name">push</span>(<span class="name">sun</span>)
    <span class="name">planets</span>.<span class="name">push</span>(<span class="name">mercury</span>)
    <span class="name">planets</span>.<span class="name">push</span>(<span class="name">venus</span>)
    <span class="name">planets</span>.<span class="name">push</span>(<span class="name">earth</span>)
    <span class="name">planets</span>.<span class="name">push</span>(<span class="name">mars</span>)
    <span class="name">planets</span>.<span class="name">push</span>(<span class="name">jupiter</span>)
    <span class="name">planets</span>.<span class="name">push</span>(<span class="name">saturn</span>)
    <span class="name">planets</span>.<span class="name">push</span>(<span class="name">uranus</span>)
    <span class="name">planets</span>.<span class="name">push</span>(<span class="name">neptune</span>)
    <span class="name">planets</span>.<span class="name">push</span>(<span class="name">moon</span>)
    <span class="comment">// TODO: Once support for creating meshes from arrays is implemented take these into use</span>
    <span class="comment">//saturnRing.makeRing()</span>
    <span class="comment">//uranusRing.makeRing()</span>
    <span class="name">saturnRingOuterRadius</span> <span class="operator">=</span> <span class="name">planetData</span>[<span class="name">Planets</span>.<span class="name">SATURN</span>].<span class="name">radius</span> <span class="operator">+</span> <span class="name">Planets</span>.<span class="name">saturnOuterRadius</span>
    <span class="name">saturnRingInnerRadius</span> <span class="operator">=</span> <span class="name">planetData</span>[<span class="name">Planets</span>.<span class="name">SATURN</span>].<span class="name">radius</span> <span class="operator">+</span> <span class="number">6.630</span>
    <span class="name">uranusRingOuterRadius</span> <span class="operator">=</span> <span class="name">planetData</span>[<span class="name">Planets</span>.<span class="name">URANUS</span>].<span class="name">radius</span> <span class="operator">+</span> <span class="name">Planets</span>.<span class="name">uranusOuterRadius</span>
    <span class="name">uranusRingInnerRadius</span> <span class="operator">=</span> <span class="name">planetData</span>[<span class="name">Planets</span>.<span class="name">URANUS</span>].<span class="name">radius</span> <span class="operator">+</span> <span class="number">2</span>
    <span class="name">ready</span> <span class="operator">=</span> <span class="number">true</span>
    <span class="name">changeScale</span>(<span class="number">1200</span>)
    <span class="name">changeSpeed</span>(<span class="number">0.2</span>)
    <span class="name">setLookAtOffset</span>(<span class="name">Planets</span>.<span class="name">SUN</span>)
}</pre>
<p>The scene is animated by calling the <code>animate()</code> function. That is also the place where the time is advanced, and the new positions for all of the planets are calculated. The planets are rotated in the <code>positionPlanet()</code> function based on their axial tilt and their sidereal rotation period. Finally, the new camera position is calculated in the <code>updateCamera()</code> function.</p>
<pre class="qml"><span class="keyword">function</span> <span class="name">animate</span>(<span class="name">focusedPlanet</span>) {
    <span class="keyword">if</span> (!<span class="name">ready</span>)
        <span class="keyword">return</span>

    <span class="name">advanceTime</span>(<span class="name">focusedPlanet</span>)
    <span class="keyword">for</span> (<span class="keyword">var</span> <span class="name">i</span> = <span class="number">0</span>; <span class="name">i</span> <span class="operator">&lt;=</span> <span class="name">Planets</span>.<span class="name">NUM_SELECTABLE_PLANETS</span>; i++)
        <span class="name">positionPlanet</span>(<span class="name">i</span>)

    <span class="name">updateCamera</span>(<span class="name">focusedPlanet</span>)
}</pre>
<p>Files:</p>
<ul>
<li><a href="qt3drenderer-planets-qml-cloudeffectds-qml.html">planets-qml/CloudEffectDS.qml</a></li>
<li><a href="qt3drenderer-planets-qml-fpsdisplay-qml.html">planets-qml/FpsDisplay.qml</a></li>
<li><a href="qt3drenderer-planets-qml-infosheet-qml.html">planets-qml/InfoSheet.qml</a></li>
<li><a href="qt3drenderer-planets-qml-light-qml.html">planets-qml/Light.qml</a></li>
<li><a href="qt3drenderer-planets-qml-planet-qml.html">planets-qml/Planet.qml</a></li>
<li><a href="qt3drenderer-planets-qml-planetbutton-qml.html">planets-qml/PlanetButton.qml</a></li>
<li><a href="qt3drenderer-planets-qml-planeteffectd-qml.html">planets-qml/PlanetEffectD.qml</a></li>
<li><a href="qt3drenderer-planets-qml-planeteffectdb-qml.html">planets-qml/PlanetEffectDB.qml</a></li>
<li><a href="qt3drenderer-planets-qml-planeteffectdsb-qml.html">planets-qml/PlanetEffectDSB.qml</a></li>
<li><a href="qt3drenderer-planets-qml-planetframegraph-qml.html">planets-qml/PlanetFrameGraph.qml</a></li>
<li><a href="qt3drenderer-planets-qml-planetmaterial-qml.html">planets-qml/PlanetMaterial.qml</a></li>
<li><a href="qt3drenderer-planets-qml-planetshadoweffectd-qml.html">planets-qml/PlanetShadowEffectD.qml</a></li>
<li><a href="qt3drenderer-planets-qml-planetsmain-qml.html">planets-qml/PlanetsMain.qml</a></li>
<li><a href="qt3drenderer-planets-qml-ring-qml.html">planets-qml/Ring.qml</a></li>
<li><a href="qt3drenderer-planets-qml-solarsystem-qml.html">planets-qml/SolarSystem.qml</a></li>
<li><a href="qt3drenderer-planets-qml-styledslider-qml.html">planets-qml/StyledSlider.qml</a></li>
<li><a href="qt3drenderer-planets-qml-planets-js.html">planets-qml/planets.js</a></li>
<li><a href="qt3drenderer-planets-qml-android-androidmanifest-xml.html">planets-qml/android/AndroidManifest.xml</a></li>
<li><a href="qt3drenderer-planets-qml-shaders-es2-planetd-vert.html">planets-qml/shaders/es2/planetD.vert</a></li>
<li><a href="qt3drenderer-planets-qml-shaders-es2-planetdb-vert.html">planets-qml/shaders/es2/planetDB.vert</a></li>
<li><a href="qt3drenderer-planets-qml-shaders-gl3-planetd-vert.html">planets-qml/shaders/gl3/planetD.vert</a></li>
<li><a href="qt3drenderer-planets-qml-shaders-gl3-planetdb-vert.html">planets-qml/shaders/gl3/planetDB.vert</a></li>
<li><a href="qt3drenderer-planets-qml-shaders-gl3-shadowmap-vert.html">planets-qml/shaders/gl3/shadowmap.vert</a></li>
<li><a href="qt3drenderer-planets-qml-main-cpp.html">planets-qml/main.cpp</a></li>
<li><a href="qt3drenderer-planets-qml-planets-qml-images-qrc.html">planets-qml/planets-qml-images.qrc</a></li>
<li><a href="qt3drenderer-planets-qml-planets-qml-pro.html">planets-qml/planets-qml.pro</a></li>
<li><a href="qt3drenderer-planets-qml-planets-qml-qrc.html">planets-qml/planets-qml.qrc</a></li>
</ul>
<p>Images:</p>
<ul>
<li><a href="images/used-in-examples/planets-qml/images/earth.png">planets-qml/images/earth.png</a></li>
<li><a href="images/used-in-examples/planets-qml/images/earthcloudmapcolortrans.png">planets-qml/images/earthcloudmapcolortrans.png</a></li>
<li><a href="images/used-in-examples/planets-qml/images/earthcloudmapspec.jpg">planets-qml/images/earthcloudmapspec.jpg</a></li>
<li><a href="images/used-in-examples/planets-qml/images/earthmap1k.jpg">planets-qml/images/earthmap1k.jpg</a></li>
<li><a href="images/used-in-examples/planets-qml/images/earthnormal1k.jpg">planets-qml/images/earthnormal1k.jpg</a></li>
<li><a href="images/used-in-examples/planets-qml/images/earthspec1k.jpg">planets-qml/images/earthspec1k.jpg</a></li>
<li><a href="images/used-in-examples/planets-qml/images/galaxy_starfield.png">planets-qml/images/galaxy_starfield.png</a></li>
<li><a href="images/used-in-examples/planets-qml/images/jupiter.png">planets-qml/images/jupiter.png</a></li>
<li><a href="images/used-in-examples/planets-qml/images/jupitermap.jpg">planets-qml/images/jupitermap.jpg</a></li>
<li><a href="images/used-in-examples/planets-qml/images/mars.png">planets-qml/images/mars.png</a></li>
<li><a href="images/used-in-examples/planets-qml/images/marsmap1k.jpg">planets-qml/images/marsmap1k.jpg</a></li>
<li><a href="images/used-in-examples/planets-qml/images/marsnormal1k.jpg">planets-qml/images/marsnormal1k.jpg</a></li>
<li><a href="images/used-in-examples/planets-qml/images/mercury.png">planets-qml/images/mercury.png</a></li>
<li><a href="images/used-in-examples/planets-qml/images/mercurymap.jpg">planets-qml/images/mercurymap.jpg</a></li>
<li><a href="images/used-in-examples/planets-qml/images/mercurynormal.jpg">planets-qml/images/mercurynormal.jpg</a></li>
<li><a href="images/used-in-examples/planets-qml/images/moonmap1k.jpg">planets-qml/images/moonmap1k.jpg</a></li>
<li><a href="images/used-in-examples/planets-qml/images/moonnormal1k.jpg">planets-qml/images/moonnormal1k.jpg</a></li>
<li><a href="images/used-in-examples/planets-qml/images/neptune.png">planets-qml/images/neptune.png</a></li>
<li><a href="images/used-in-examples/planets-qml/images/neptunemap.jpg">planets-qml/images/neptunemap.jpg</a></li>
<li><a href="images/used-in-examples/planets-qml/images/saturn.png">planets-qml/images/saturn.png</a></li>
<li><a href="images/used-in-examples/planets-qml/images/saturnmap.jpg">planets-qml/images/saturnmap.jpg</a></li>
<li><a href="images/used-in-examples/planets-qml/images/saturnringcolortrans.png">planets-qml/images/saturnringcolortrans.png</a></li>
<li><a href="images/used-in-examples/planets-qml/images/sun.png">planets-qml/images/sun.png</a></li>
<li><a href="images/used-in-examples/planets-qml/images/sunmap.jpg">planets-qml/images/sunmap.jpg</a></li>
<li><a href="images/used-in-examples/planets-qml/images/uranus.png">planets-qml/images/uranus.png</a></li>
<li><a href="images/used-in-examples/planets-qml/images/uranusmap.jpg">planets-qml/images/uranusmap.jpg</a></li>
<li><a href="images/used-in-examples/planets-qml/images/uranusringcolortrans.png">planets-qml/images/uranusringcolortrans.png</a></li>
<li><a href="images/used-in-examples/planets-qml/images/venus.png">planets-qml/images/venus.png</a></li>
<li><a href="images/used-in-examples/planets-qml/images/venusmap.jpg">planets-qml/images/venusmap.jpg</a></li>
<li><a href="images/used-in-examples/planets-qml/images/venusnormal.jpg">planets-qml/images/venusnormal.jpg</a></li>
</ul>
</div>
<!-- @@@planets-qml -->
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2015 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>

APT Browse - Built by Thomas Orozco.