<?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.qdoc -->
<title>Planets Example | Qt Canvas 3D (deprecated) 5.12.2</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.12</td><td ><a href="qtcanvas3d-index.html">Qt Canvas 3D (deprecated)</a></td><td ><a href="qtcanvas3d-examples.html">Qt Canvas 3D Examples</a></td><td >Planets Example</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtcanvas3d-index.html">Qt 5.12.2 Reference Documentation</a></td>
</tr></table>
</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="#qt-quick-implementation">Qt Quick Implementation</a></li>
<li class="level1"><a href="#the-javascript-code">The JavaScript Code</a></li>
<li class="level1"><a href="#handling-the-mouse-events">Handling the Mouse Events</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Planets Example</h1>
<span class="subtitle"></span>
<!-- $$$threejs/planets-brief -->
<p>Demonstrates combining Qt Quick and three.js rendering.</p>
<!-- @@@threejs/planets -->
<!-- $$$threejs/planets-description -->
<div class="descr"> <a name="details"></a>
<p>The Planets example demonstrates how to implement an application that combines the use of three.js library-based Canvas3D rendering with Qt Quick 2D elements. The example shows the eight planets of our Solar System with the Sun.</p>
<p class="centerAlign"><img src="images/planets-example.jpg" alt="" /></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="qt-quick-implementation"></a>
<h2 id="qt-quick-implementation">Qt Quick Implementation</h2>
<p>The Qt Quick Implementation <a href="qtcanvas3d-threejs-planets-planets-qml.html">planets.qml</a> of the example renders the 3D content using Canvas3D type. The type calls JavaScript code that uses <code>three.js</code> to initialize, paint, and resize the 3D view.</p>
<pre class="qml">
Canvas3D {
id: canvas3d
anchors.fill: parent
onInitializeGL: {
GLCode.initializeGL(canvas3d, eventSource, mainview);
}
onPaintGL: {
GLCode.paintGL(canvas3d);
fpsDisplay.fps = canvas3d.fps;
}
onResizeGL: {
GLCode.onResizeGL(canvas3d);
}
ControlEventSource {
anchors.fill: parent
focus: true
id: eventSource
}
}
</pre>
<p>The planet related information is stored into <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 QML side.</p>
<p>The selection buttons change the <code>focusedPlanet</code> property of the mainview. As the property changes the planet information is updated and the camera is animated to the new position. The camera position and the camera look at point are updated based on values that are animated on QML side.</p>
<pre class="qml">
onFocusedPlanetChanged: {
if (focusedPlanet == 100) {
info.opacity = 0;
updatePlanetInfo();
} else {
updatePlanetInfo();
info.opacity = 0.5;
}
GLCode.prepareFocusedPlanetAnimation();
lookAtOffsetAnimation.restart();
cameraOffsetAnimation.restart();
}
</pre>
<p>The sliders are used to adjust the rotation speed, the planet size, and the viewing distance. When the slider value changes, JavaScript code is called to adjust the given property. For example, changing the value of the "Viewing Distance" slider calls the <code>setCameraDistence()</code> method.</p>
<pre class="qml">
onValueChanged: GLCode.setCameraDistance(value);
</pre>
<a name="the-javascript-code"></a>
<h2 id="the-javascript-code">The JavaScript Code</h2>
<p>The JavaScript side of the implementation, <a href="qtcanvas3d-threejs-planets-planets-js.html">planets.js</a>, is done using a version of <code>three.js</code> that is ported for <a href="qtcanvas3d-index.html">Qt Canvas 3D</a>: <a href="https://github.com/tronlec/three.js">three.js</a>.</p>
<p>The <code>initializeGL()</code> method creates the camera and the scene. It also adds the lights to the scene and creates the planet meshes. The Canvas3D renderer needs to be created at initialization phase too.</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. To calculate the ring geometry for the planets with rings, the <code>_RingGeometry()</code> method from <a href="https://github.com/jeromeetienne/threex.planets">three.xplanets</a> extension is used.</p>
<p>The scene is rendered in <code>paintGL()</code> method. That is also the place where the positions for all of the planets are calculated. The planets are rotated based on their axial tilt and their sidereal rotation period. In the <code>paintGL()</code> method the camera position and look at point are updated based on the focused planet.</p>
<p>For more information on how to use <code>three.js</code> the documentation is available here: <a href="http://threejs.org/docs/">three.js/docs</a></p>
<a name="handling-the-mouse-events"></a>
<h2 id="handling-the-mouse-events">Handling the Mouse Events</h2>
<p>In order to handle the mouse event in JavaScript code the Canvas3D type has to include the <code>ControlEventSource</code> type.</p>
<pre class="qml">
ControlEventSource {
anchors.fill: parent
focus: true
id: eventSource
}
</pre>
<p>This type is then passed to the JavaScript code on initialization.</p>
<pre class="qml">
onInitializeGL: {
GLCode.initializeGL(canvas3d, eventSource, mainview);
}
</pre>
<p>On JavaScript code in the <code>initializeGL()</code> method the <code>eventSource</code> object is saved to a global variable. In this example <code>mouseDown</code> event is connected to the <code>onDocumentMouseDown()</code> method.</p>
<pre class="js">
eventSource.mouseDown.connect(onDocumentMouseDown);
</pre>
<p>Based on the mouse position variables passed to <code>onDocumentMouseDown()</code> method, it's checked if the event takes place on top of a planet or not. The focused planet is changed according to the mouse position.</p>
<p>Files:</p>
<ul>
<li><a href="qtcanvas3d-threejs-planets-fpsdisplay-qml.html">threejs/planets/FpsDisplay.qml</a></li>
<li><a href="qtcanvas3d-threejs-planets-infosheet-qml.html">threejs/planets/InfoSheet.qml</a></li>
<li><a href="qtcanvas3d-threejs-planets-planetbutton-qml.html">threejs/planets/PlanetButton.qml</a></li>
<li><a href="qtcanvas3d-threejs-planets-styledslider-qml.html">threejs/planets/StyledSlider.qml</a></li>
<li><a href="qtcanvas3d-threejs-planets-main-cpp.html">threejs/planets/main.cpp</a></li>
<li><a href="qtcanvas3d-threejs-planets-planets-js.html">threejs/planets/planets.js</a></li>
<li><a href="qtcanvas3d-threejs-planets-planets-pro.html">threejs/planets/planets.pro</a></li>
<li><a href="qtcanvas3d-threejs-planets-planets-qml.html">threejs/planets/planets.qml</a></li>
<li><a href="qtcanvas3d-threejs-planets-planets-qrc.html">threejs/planets/planets.qrc</a></li>
</ul>
<p>Images:</p>
<ul>
<li><a href="images/used-in-examples/threejs/planets/images/earth.png">threejs/planets/images/earth.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/earthbump1k.jpg">threejs/planets/images/earthbump1k.jpg</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/earthcloudmapcolortrans.png">threejs/planets/images/earthcloudmapcolortrans.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/earthmap1k.jpg">threejs/planets/images/earthmap1k.jpg</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/earthspec1k.jpg">threejs/planets/images/earthspec1k.jpg</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/galaxy_starfield.png">threejs/planets/images/galaxy_starfield.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/jupiter.png">threejs/planets/images/jupiter.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/jupitermap.jpg">threejs/planets/images/jupitermap.jpg</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/mars.png">threejs/planets/images/mars.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/marsbump1k.jpg">threejs/planets/images/marsbump1k.jpg</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/marsmap1k.jpg">threejs/planets/images/marsmap1k.jpg</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/mercury.png">threejs/planets/images/mercury.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/mercurybump.jpg">threejs/planets/images/mercurybump.jpg</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/mercurymap.jpg">threejs/planets/images/mercurymap.jpg</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/moonbump1k.jpg">threejs/planets/images/moonbump1k.jpg</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/moonmap1k.jpg">threejs/planets/images/moonmap1k.jpg</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/neptune.png">threejs/planets/images/neptune.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/neptunemap.jpg">threejs/planets/images/neptunemap.jpg</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/plutobump1k.jpg">threejs/planets/images/plutobump1k.jpg</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/plutomap1k.jpg">threejs/planets/images/plutomap1k.jpg</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/saturn.png">threejs/planets/images/saturn.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/saturnmap.jpg">threejs/planets/images/saturnmap.jpg</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/saturnringcolortrans.png">threejs/planets/images/saturnringcolortrans.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/sun.png">threejs/planets/images/sun.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/sunmap.jpg">threejs/planets/images/sunmap.jpg</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/uranus.png">threejs/planets/images/uranus.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/uranusmap.jpg">threejs/planets/images/uranusmap.jpg</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/uranusringcolortrans.png">threejs/planets/images/uranusringcolortrans.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/venus.png">threejs/planets/images/venus.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/venusbump.jpg">threejs/planets/images/venusbump.jpg</a></li>
<li><a href="images/used-in-examples/threejs/planets/images/venusmap.jpg">threejs/planets/images/venusmap.jpg</a></li>
<li><a href="images/used-in-examples/threejs/planets/ios/AppIcon29x29.png">threejs/planets/ios/AppIcon29x29.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/ios/AppIcon29x29@2x.png">threejs/planets/ios/AppIcon29x29@2x.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/ios/AppIcon29x29@2x~ipad.png">threejs/planets/ios/AppIcon29x29@2x~ipad.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/ios/AppIcon29x29~ipad.png">threejs/planets/ios/AppIcon29x29~ipad.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/ios/AppIcon40x40@2x.png">threejs/planets/ios/AppIcon40x40@2x.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/ios/AppIcon40x40@2x~ipad.png">threejs/planets/ios/AppIcon40x40@2x~ipad.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/ios/AppIcon40x40~ipad.png">threejs/planets/ios/AppIcon40x40~ipad.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/ios/AppIcon50x50@2x~ipad.png">threejs/planets/ios/AppIcon50x50@2x~ipad.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/ios/AppIcon50x50~ipad.png">threejs/planets/ios/AppIcon50x50~ipad.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/ios/AppIcon57x57.png">threejs/planets/ios/AppIcon57x57.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/ios/AppIcon57x57@2x.png">threejs/planets/ios/AppIcon57x57@2x.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/ios/AppIcon60x60@2x.png">threejs/planets/ios/AppIcon60x60@2x.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/ios/AppIcon72x72@2x~ipad.png">threejs/planets/ios/AppIcon72x72@2x~ipad.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/ios/AppIcon72x72~ipad.png">threejs/planets/ios/AppIcon72x72~ipad.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/ios/AppIcon76x76@2x~ipad.png">threejs/planets/ios/AppIcon76x76@2x~ipad.png</a></li>
<li><a href="images/used-in-examples/threejs/planets/ios/AppIcon76x76~ipad.png">threejs/planets/ios/AppIcon76x76~ipad.png</a></li>
</ul>
</div>
<!-- @@@threejs/planets -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2019 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>
distrib
>
Mageia
>
7
>
armv7hl
>
media
>
core-release
>
by-pkgid
>
0a1223a3e4bb8a61fd0c6bd9fadbd0af
>
files
>
231
