Added scale offset to earth clouds.

Qt 3D Planets example has scale offset that makes the cloud layer appear
to be higher up from the surface, added same scaling factor for the three.js
version.

Change-Id: I76b487320f7e36ed2de3a3689a99f6b243bc229d
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@theqtcompany.com>
Reviewed-by: Tomi Korpipää <tomi.korpipaa@theqtcompany.com>

1 files changed, 14 insertions, 5 deletions

diff --git a/examples/canvas3d/canvas3d/threejs/planets/planets.js b/examples/canvas3d/canvas3d/threejs/planets/planets.js
index 5d51b92..536b0e2 100644
--- a/examples/canvas3d/canvas3d/threejs/planets/planets.js
+++ b/examples/canvas3d/canvas3d/threejs/planets/planets.js
@@ -243,8 +243,7 @@ function createPlanets() {
         case EARTH:
             mesh = createPlanet(planets[i]["radius"], 0.05, 'images/earthmap1k.jpg',
                                 'images/earthbump1k.jpg', 'images/earthspec1k.jpg');
-            var cloud = createEarthCloud();
-            mesh.add(cloud);
+            createEarthCloud(mesh);
             break;
         case MARS:
             mesh = createPlanet(planets[i]["radius"], 0.05, 'images/marsmap1k.jpg',
@@ -332,18 +331,28 @@ function createPlanet(radius, scale, mapTexture, bumpTexture, specularTexture) {
 
 }
 
-function createEarthCloud() {
+function createEarthCloud(earthMesh) {
 
     var material = new THREE.MeshPhongMaterial({
                                                    map: THREE.ImageUtils.loadTexture('qrc:images/earthcloudmapcolortrans.png'),
-                                                   side: THREE.DoubleSide,
+                                                   side: THREE.BackSide,
                                                    transparent: true,
                                                    opacity: 0.8
                                                });
     var mesh = new THREE.Mesh(commonGeometry, material);
 
-    return mesh;
+    var material2 = new THREE.MeshPhongMaterial({
+                                                   map: THREE.ImageUtils.loadTexture('qrc:images/earthcloudmapcolortrans.png'),
+                                                   side: THREE.FrontSide,
+                                                   transparent: true,
+                                                   opacity: 0.8
+                                               });
+    var mesh2 = new THREE.Mesh(commonGeometry, material2);
 
+    mesh.scale.set(1.02, 1.02, 1.02);
+    earthMesh.add(mesh);
+    mesh2.scale.set(1.02, 1.02, 1.02);
+    earthMesh.add(mesh2);
 }
 
 function createRing(radius, width, height, texture) {