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
|
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the QtCanvas3D module of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** BSD License Usage
** Alternatively, you may use this file under the terms of the BSD license
** as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of The Qt Company Ltd nor the names of its
** contributors may be used to endorse or promote products derived
** from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/
/*!
\example canvas3d/threejs/planets
\since QtCanvas3D 1.0
\title Planets Example
\ingroup qtcanvas3d-examples
\brief Demonstrates combining Qt Quick and three.js rendering.
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.
\image planets-example.jpg
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:
\l {http://www.stjarnhimlen.se/comp/ppcomp.html}{http://www.stjarnhimlen.se/comp/ppcomp.html}
and \l {http://www.davidcolarusso.com/astro/}{http://www.davidcolarusso.com/astro/}.
\section1 Qt Quick Implementation
The Qt Quick Implementation \l{canvas3d/threejs/planets/planets.qml}{planets.qml} of the example
renders the 3D content using Canvas3D type. The type calls JavaScript code that uses
\c{three.js} to initialize, paint, and resize the 3D view.
\snippet canvas3d/threejs/planets/planets.qml 0
The planet related information is stored into \c{ListModel}. 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.
The selection buttons change the \c{focusedPlanet} 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.
\snippet canvas3d/threejs/planets/planets.qml 1
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 \c{setCameraDistence()}
method.
\snippet canvas3d/threejs/planets/planets.qml 2
\section1 The JavaScript Code
The JavaScript side of the implementation, \l{canvas3d/threejs/planets/planets.js}{planets.js},
is done using a version of \c{three.js} that is ported for \l{Qt Canvas 3D}:
\l{https://github.com/tronlec/three.js}{three.js}.
The \c{initializeGL()} 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.
Planet texture maps are Copyright (c) by James Hastings-Trew
\l{http://planetpixelemporium.com/planets.html}{http://planetpixelemporium.com/planets.html}
used with permission. To calculate the ring geometry for the planets with rings, the
\c{_RingGeometry()} method from
\l{https://github.com/jeromeetienne/threex.planets}{three.xplanets} extension is used.
The scene is rendered in \c{paintGL()} 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 \c{paintGL()} method the camera position and look at point are
updated based on the focused planet.
For more information on how to use \c {three.js} the documentation is available here:
\l{http://threejs.org/docs/}{three.js/docs}
\section1 Handling the Mouse Events
In order to handle the mouse event in JavaScript code the Canvas3D type has to include the
\c{ControlEventSource} type.
\snippet canvas3d/threejs/planets/planets.qml 3
This type is then passed to the JavaScript code on initialization.
\snippet canvas3d/threejs/planets/planets.qml 4
On JavaScript code in the \c{initializeGL()} method the \c{eventSource} object is saved to a
global variable. In this example \c{mouseDown} event is connected to the
\c{onDocumentMouseDown()} method.
\snippet canvas3d/threejs/planets/planets.js 5
Based on the mouse position variables passed to \c{onDocumentMouseDown()} 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.
*/
|
