Merge remote-tracking branch 'origin/dev' into wip/threading

Conflicts:
	src/imports/qtcanvas3d/canvas3d.cpp
	src/imports/qtcanvas3d/context3d.cpp
	src/imports/qtcanvas3d/context3d_p.h
	src/imports/qtcanvas3d/framebuffer3d.cpp
	src/imports/qtcanvas3d/framebuffer3d_p.h
	src/imports/qtcanvas3d/program3d.cpp
	src/imports/qtcanvas3d/uniformlocation.cpp
	src/imports/qtcanvas3d/uniformlocation_p.h

Change-Id: I214239d40936e14dd69498167b08f199a692f325

103 files changed, 2707 insertions, 386 deletions

diff --git a/examples/canvas3d/canvas3d.pro b/examples/canvas3d/canvas3d.pro
index dab4815..f384c82 100644
--- a/examples/canvas3d/canvas3d.pro
+++ b/examples/canvas3d/canvas3d.pro
@@ -1,3 +1,3 @@
 TEMPLATE = subdirs
-SUBDIRS += canvas3d \
-           threejs
+SUBDIRS += canvas3d
+
diff --git a/examples/canvas3d/3rdparty/ThreeJSLoader.js b/examples/canvas3d/canvas3d/3rdparty/ThreeJSLoader.js
index 42e1999..42e1999 100644
--- a/examples/canvas3d/3rdparty/ThreeJSLoader.js
+++ b/examples/canvas3d/canvas3d/3rdparty/ThreeJSLoader.js
diff --git a/examples/canvas3d/3rdparty/gl-matrix.js b/examples/canvas3d/canvas3d/3rdparty/gl-matrix.js
index eb16c6b..eb16c6b 100644
--- a/examples/canvas3d/3rdparty/gl-matrix.js
+++ b/examples/canvas3d/canvas3d/3rdparty/gl-matrix.js
diff --git a/examples/canvas3d/3rdparty/three.js b/examples/canvas3d/canvas3d/3rdparty/three.js
index ede9104..04823db 100644
--- a/examples/canvas3d/3rdparty/three.js
+++ b/examples/canvas3d/canvas3d/3rdparty/three.js
@@ -1,7 +1,32 @@
 // File:src/qml/ThreeQML.js
 
+/*
+The MIT License
+
+Copyright © 2010-2015 three.js authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
 /**
- * three.js QML port by
+ * QtQuick port of three.js library https://github.com/mrdoob/three.js
+ * Port source code is available at https://github.com/tronlec/three.js
  * @author Pasi keränen / pasi.keranen@theqtcompany.com
  */
 
@@ -18128,10 +18153,17 @@ THREE.XHRLoader.prototype = {
         var request = new XMLHttpRequest();
         request.onreadystatechange = function() {
                 if (request.readyState === XMLHttpRequest.DONE) {
-// TODO: Re-visit when issue with 'status' is solved in Qt
+// TODO: Re-visit https://bugreports.qt.io/browse/QTBUG-45581 is solved in Qt
                     if (request.status == 200 || request.status == 0) {
-                        THREE.Cache.add( url, request.response );
-                        if ( onLoad ) onLoad( request.response );
+                        var response;
+// TODO: Remove once https://bugreports.qt.io/browse/QTBUG-45862 is fixed in Qt
+                        if ( scope.responseType == 'arraybuffer' )
+                            response = request.response;
+                        else
+                            response = request.responseText;
+
+                        THREE.Cache.add( url, response );
+                        if ( onLoad ) onLoad( response );
                         scope.manager.itemEnd( url );
                     } else {
                         if ( onError !== undefined ) {
@@ -18874,7 +18906,7 @@ THREE.BufferGeometryLoader.prototype = {
 		loader.setCrossOrigin( this.crossOrigin );
 		loader.load( url, function ( text ) {
 
-            onLoad( scope.parse( JSON.parse( text ) ) );
+			onLoad( scope.parse( JSON.parse( text ) ) );
 
 		}, onProgress, onError );
 
@@ -19248,7 +19280,7 @@ THREE.ObjectLoader.prototype = {
 
 				if ( data.name !== undefined ) material.name = data.name;
 
-				if ( data.map !== undefined ) {
+                if ( data.map !== undefined && data.map !== null ) {
 
 					material.map = getTexture( data.map );
 
@@ -19763,11 +19795,11 @@ THREE.CompressedTextureLoader.prototype = {
 
 			loader.load( url, function ( buffer ) {
 
-                var texDatas = scope._parser( buffer, true );
+				var texDatas = scope._parser( buffer, true );
 
 				if ( texDatas.isCubemap ) {
 
-                    var faces = texDatas.mipmaps.length / texDatas.mipmapCount;
+					var faces = texDatas.mipmaps.length / texDatas.mipmapCount;
 
 					for ( var f = 0; f < faces; f ++ ) {
 
@@ -19785,16 +19817,14 @@ THREE.CompressedTextureLoader.prototype = {
 					}
 
 				} else {
-                    console.log("texture: mipmap");
-                    console.log("texture: mipmaps "+texDatas.mipmaps.length);
-                    texture.image.width = texDatas.width;
+
+					texture.image.width = texDatas.width;
 					texture.image.height = texDatas.height;
 					texture.mipmaps = texDatas.mipmaps;
 
 				}
 
-                console.log("texture: mipmapcount "+texDatas.mipmapCount);
-                if ( texDatas.mipmapCount === 1 ) {
+				if ( texDatas.mipmapCount === 1 ) {
 
 					texture.minFilter = THREE.LinearFilter;
 
@@ -24612,12 +24642,12 @@ THREE.WebGLProgram = ( function () {
 
 			prefix_fragment = [
 
-				'precision ' + parameters.precision + ' float;',
-				'precision ' + parameters.precision + ' int;',
+                ( parameters.bumpMap || parameters.normalMap || parameters.flatShading ) ? '#extension GL_OES_standard_derivatives : enable' : '',
 
-				( parameters.bumpMap || parameters.normalMap || parameters.flatShading ) ? '#extension GL_OES_standard_derivatives : enable' : '',
+                'precision ' + parameters.precision + ' float;',
+				'precision ' + parameters.precision + ' int;',
 
-				customDefines,
+                customDefines,
 
 				'#define MAX_DIR_LIGHTS ' + parameters.maxDirLights,
 				'#define MAX_POINT_LIGHTS ' + parameters.maxPointLights,
diff --git a/examples/canvas3d/canvas3d/3rdparty/threex.planets.js b/examples/canvas3d/canvas3d/3rdparty/threex.planets.js
new file mode 100644
index 0000000..799493d
--- /dev/null
+++ b/examples/canvas3d/canvas3d/3rdparty/threex.planets.js
@@ -0,0 +1,435 @@
+/********************************************************************************
+**
+** The MIT License
+**
+** Copyright © 2014 threex.planets Jerome Etienne
+**
+** Permission is hereby granted, free of charge, to any person obtaining a copy
+** of this software and associated documentation files (the "Software"), to deal
+** in the Software without restriction, including without limitation the rights
+** to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+** copies of the Software, and to permit persons to whom the Software is
+** furnished to do so, subject to the following conditions:
+**
+** The above copyright notice and this permission notice shall be included in
+** all copies or substantial portions of the Software.
+**
+** THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+** IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+** FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+** AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+** LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+** OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+** THE SOFTWARE.
+**
+********************************************************************************/
+
+var THREEx = THREEx || {}
+
+THREEx.Planets	= {}
+
+THREEx.Planets.baseURL	= '../'
+
+// from http://planetpixelemporium.com/
+
+THREEx.Planets.createSun	= function(){
+    var geometry	= new THREE.SphereGeometry(0.5, 32, 32)
+    var texture	= THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/sunmap.jpg')
+    var material	= new THREE.MeshPhongMaterial({
+        map	: texture,
+        bumpMap	: texture,
+        bumpScale: 0.05,
+    })
+    var mesh	= new THREE.Mesh(geometry, material)
+    return mesh
+}
+
+THREEx.Planets.createMercury	= function(){
+    var geometry	= new THREE.SphereGeometry(0.5, 32, 32)
+    var material	= new THREE.MeshPhongMaterial({
+        map	: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/mercurymap.jpg'),
+        bumpMap	: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/mercurybump.jpg'),
+        bumpScale: 0.005,
+    })
+    var mesh	= new THREE.Mesh(geometry, material)
+    return mesh
+}
+
+THREEx.Planets.createVenus	= function(){
+    var geometry	= new THREE.SphereGeometry(0.5, 32, 32)
+    var material	= new THREE.MeshPhongMaterial({
+        map	: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/venusmap.jpg'),
+        bumpMap	: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/venusbump.jpg'),
+        bumpScale: 0.005,
+    })
+    var mesh	= new THREE.Mesh(geometry, material)
+    return mesh
+}
+
+THREEx.Planets.createEarth	= function(){
+    var geometry	= new THREE.SphereGeometry(0.5, 32, 32)
+    var material	= new THREE.MeshPhongMaterial({
+        map		: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/earthmap1k.jpg'),
+        bumpMap		: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/earthbump1k.jpg'),
+        bumpScale	: 0.05,
+        specularMap	: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/earthspec1k.jpg'),
+        specular	: new THREE.Color('grey'),
+    })
+    var mesh	= new THREE.Mesh(geometry, material)
+    return mesh
+}
+
+THREEx.Planets.createEarthCloud	= function(){
+    // create destination canvas
+    var canvasResult	= document.createElement('canvas')
+    canvasResult.width	= 1024
+    canvasResult.height	= 512
+    var contextResult	= canvasResult.getContext('2d')
+
+    // load earthcloudmap
+    var imageMap	= new Image();
+    imageMap.addEventListener("load", function() {
+
+        // create dataMap ImageData for earthcloudmap
+        var canvasMap	= document.createElement('canvas')
+        canvasMap.width	= imageMap.width
+        canvasMap.height= imageMap.height
+        var contextMap	= canvasMap.getContext('2d')
+        contextMap.drawImage(imageMap, 0, 0)
+        var dataMap	= contextMap.getImageData(0, 0, canvasMap.width, canvasMap.height)
+
+        // load earthcloudmaptrans
+        var imageTrans	= new Image();
+        imageTrans.addEventListener("load", function(){
+            // create dataTrans ImageData for earthcloudmaptrans
+            var canvasTrans		= document.createElement('canvas')
+            canvasTrans.width	= imageTrans.width
+            canvasTrans.height	= imageTrans.height
+            var contextTrans	= canvasTrans.getContext('2d')
+            contextTrans.drawImage(imageTrans, 0, 0)
+            var dataTrans		= contextTrans.getImageData(0, 0, canvasTrans.width, canvasTrans.height)
+            // merge dataMap + dataTrans into dataResult
+            var dataResult		= contextMap.createImageData(canvasMap.width, canvasMap.height)
+            for(var y = 0, offset = 0; y < imageMap.height; y++){
+                for(var x = 0; x < imageMap.width; x++, offset += 4){
+                    dataResult.data[offset+0]	= dataMap.data[offset+0]
+                    dataResult.data[offset+1]	= dataMap.data[offset+1]
+                    dataResult.data[offset+2]	= dataMap.data[offset+2]
+                    dataResult.data[offset+3]	= 255 - dataTrans.data[offset+0]
+                }
+            }
+            // update texture with result
+            contextResult.putImageData(dataResult,0,0)
+            material.map.needsUpdate = true;
+        })
+        imageTrans.src	= THREEx.Planets.baseURL+'images/earthcloudmaptrans.jpg';
+    }, false);
+    imageMap.src	= THREEx.Planets.baseURL+'images/earthcloudmap.jpg';
+
+    var geometry	= new THREE.SphereGeometry(0.51, 32, 32)
+    var material	= new THREE.MeshPhongMaterial({
+        map		: new THREE.Texture(canvasResult),
+        side		: THREE.DoubleSide,
+        transparent	: true,
+        opacity		: 0.8,
+    })
+    var mesh	= new THREE.Mesh(geometry, material)
+    return mesh
+}
+
+
+THREEx.Planets.createMoon	= function(){
+    var geometry	= new THREE.SphereGeometry(0.5, 32, 32)
+    var material	= new THREE.MeshPhongMaterial({
+        map	: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/moonmap1k.jpg'),
+        bumpMap	: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/moonbump1k.jpg'),
+        bumpScale: 0.002,
+    })
+    var mesh	= new THREE.Mesh(geometry, material)
+    return mesh
+}
+
+THREEx.Planets.createMars	= function(){
+    var geometry	= new THREE.SphereGeometry(0.5, 32, 32)
+    var material	= new THREE.MeshPhongMaterial({
+        map	: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/marsmap1k.jpg'),
+        bumpMap	: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/marsbump1k.jpg'),
+        bumpScale: 0.05,
+    })
+    var mesh	= new THREE.Mesh(geometry, material)
+    return mesh
+}
+
+THREEx.Planets.createJupiter	= function(){
+    var geometry	= new THREE.SphereGeometry(0.5, 32, 32)
+    var texture	= THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/jupitermap.jpg')
+    var material	= new THREE.MeshPhongMaterial({
+        map	: texture,
+        bumpMap	: texture,
+        bumpScale: 0.02,
+    })
+    var mesh	= new THREE.Mesh(geometry, material)
+    return mesh
+}
+
+
+THREEx.Planets.createSaturn	= function(){
+    var geometry	= new THREE.SphereGeometry(0.5, 32, 32)
+    var texture	= THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/saturnmap.jpg')
+    var material	= new THREE.MeshPhongMaterial({
+        map	: texture,
+        bumpMap	: texture,
+        bumpScale: 0.05,
+    })
+    var mesh	= new THREE.Mesh(geometry, material)
+    return mesh
+}
+
+
+THREEx.Planets.createSaturnRing	= function(){
+    // create destination canvas
+    var canvasResult	= document.createElement('canvas')
+    canvasResult.width	= 915
+    canvasResult.height	= 64
+    var contextResult	= canvasResult.getContext('2d')
+
+    // load earthcloudmap
+    var imageMap	= new Image();
+    imageMap.addEventListener("load", function() {
+
+        // create dataMap ImageData for earthcloudmap
+        var canvasMap	= document.createElement('canvas')
+        canvasMap.width	= imageMap.width
+        canvasMap.height= imageMap.height
+        var contextMap	= canvasMap.getContext('2d')
+        contextMap.drawImage(imageMap, 0, 0)
+        var dataMap	= contextMap.getImageData(0, 0, canvasMap.width, canvasMap.height)
+
+        // load earthcloudmaptrans
+        var imageTrans	= new Image();
+        imageTrans.addEventListener("load", function(){
+            // create dataTrans ImageData for earthcloudmaptrans
+            var canvasTrans		= document.createElement('canvas')
+            canvasTrans.width	= imageTrans.width
+            canvasTrans.height	= imageTrans.height
+            var contextTrans	= canvasTrans.getContext('2d')
+            contextTrans.drawImage(imageTrans, 0, 0)
+            var dataTrans		= contextTrans.getImageData(0, 0, canvasTrans.width, canvasTrans.height)
+            // merge dataMap + dataTrans into dataResult
+            var dataResult		= contextMap.createImageData(canvasResult.width, canvasResult.height)
+            for(var y = 0, offset = 0; y < imageMap.height; y++){
+                for(var x = 0; x < imageMap.width; x++, offset += 4){
+                    dataResult.data[offset+0]	= dataMap.data[offset+0]
+                    dataResult.data[offset+1]	= dataMap.data[offset+1]
+                    dataResult.data[offset+2]	= dataMap.data[offset+2]
+                    dataResult.data[offset+3]	= 255 - dataTrans.data[offset+0]/4
+                }
+            }
+            // update texture with result
+            contextResult.putImageData(dataResult,0,0)
+            material.map.needsUpdate = true;
+        })
+        imageTrans.src	= THREEx.Planets.baseURL+'images/saturnringpattern.gif';
+    }, false);
+    imageMap.src	= THREEx.Planets.baseURL+'images/saturnringcolor.jpg';
+
+    var geometry	= new THREEx.Planets._RingGeometry(0.55, 0.75, 64);
+    var material	= new THREE.MeshPhongMaterial({
+        map		: new THREE.Texture(canvasResult),
+        // map		: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/ash_uvgrid01.jpg'),
+        side		: THREE.DoubleSide,
+        transparent	: true,
+        opacity		: 0.8,
+    })
+    var mesh	= new THREE.Mesh(geometry, material)
+    mesh.lookAt(new THREE.Vector3(0.5,-4,1))
+    return mesh
+}
+
+
+THREEx.Planets.createUranus	= function(){
+    var geometry	= new THREE.SphereGeometry(0.5, 32, 32)
+    var texture	= THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/uranusmap.jpg')
+    var material	= new THREE.MeshPhongMaterial({
+        map	: texture,
+        bumpMap	: texture,
+        bumpScale: 0.05,
+    })
+    var mesh	= new THREE.Mesh(geometry, material)
+    return mesh
+}
+
+THREEx.Planets.createUranusRing	= function(){
+    // create destination canvas
+    var canvasResult	= document.createElement('canvas')
+    canvasResult.width	= 1024
+    canvasResult.height	= 72
+    var contextResult	= canvasResult.getContext('2d')
+
+    // load earthcloudmap
+    var imageMap	= new Image();
+    imageMap.addEventListener("load", function() {
+
+        // create dataMap ImageData for earthcloudmap
+        var canvasMap	= document.createElement('canvas')
+        canvasMap.width	= imageMap.width
+        canvasMap.height= imageMap.height
+        var contextMap	= canvasMap.getContext('2d')
+        contextMap.drawImage(imageMap, 0, 0)
+        var dataMap	= contextMap.getImageData(0, 0, canvasMap.width, canvasMap.height)
+
+        // load earthcloudmaptrans
+        var imageTrans	= new Image();
+        imageTrans.addEventListener("load", function(){
+            // create dataTrans ImageData for earthcloudmaptrans
+            var canvasTrans		= document.createElement('canvas')
+            canvasTrans.width	= imageTrans.width
+            canvasTrans.height	= imageTrans.height
+            var contextTrans	= canvasTrans.getContext('2d')
+            contextTrans.drawImage(imageTrans, 0, 0)
+            var dataTrans		= contextTrans.getImageData(0, 0, canvasTrans.width, canvasTrans.height)
+            // merge dataMap + dataTrans into dataResult
+            var dataResult		= contextMap.createImageData(canvasResult.width, canvasResult.height)
+            for(var y = 0, offset = 0; y < imageMap.height; y++){
+                for(var x = 0; x < imageMap.width; x++, offset += 4){
+                    dataResult.data[offset+0]	= dataMap.data[offset+0]
+                    dataResult.data[offset+1]	= dataMap.data[offset+1]
+                    dataResult.data[offset+2]	= dataMap.data[offset+2]
+                    dataResult.data[offset+3]	= 255 - dataTrans.data[offset+0]/2
+                }
+            }
+            // update texture with result
+            contextResult.putImageData(dataResult,0,0)
+            material.map.needsUpdate = true;
+        })
+        imageTrans.src	= THREEx.Planets.baseURL+'images/uranusringtrans.gif';
+    }, false);
+    imageMap.src	= THREEx.Planets.baseURL+'images/uranusringcolour.jpg';
+
+    var geometry	= new THREEx.Planets._RingGeometry(0.55, 0.75, 64);
+    var material	= new THREE.MeshPhongMaterial({
+        map		: new THREE.Texture(canvasResult),
+        // map		: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/ash_uvgrid01.jpg'),
+        side		: THREE.DoubleSide,
+        transparent	: true,
+        opacity		: 0.8,
+    })
+    var mesh	= new THREE.Mesh(geometry, material)
+    mesh.lookAt(new THREE.Vector3(0.5,-4,1))
+    return mesh
+}
+
+
+THREEx.Planets.createNeptune	= function(){
+    var geometry	= new THREE.SphereGeometry(0.5, 32, 32)
+    var texture	= THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/neptunemap.jpg')
+    var material	= new THREE.MeshPhongMaterial({
+        map	: texture,
+        bumpMap	: texture,
+        bumpScale: 0.05,
+    })
+    var mesh	= new THREE.Mesh(geometry, material)
+    return mesh
+}
+
+
+
+THREEx.Planets.createPluto	= function(){
+    var geometry	= new THREE.SphereGeometry(0.5, 32, 32)
+    var material	= new THREE.MeshPhongMaterial({
+        map	: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/plutomap1k.jpg'),
+        bumpMap	: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/plutobump1k.jpg'),
+        bumpScale: 0.005,
+    })
+    var mesh	= new THREE.Mesh(geometry, material)
+    return mesh
+}
+
+THREEx.Planets.createStarfield	= function(radius){
+    var texture	= THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/galaxy_starfield.png')
+    var material	= new THREE.MeshBasicMaterial({
+        map	: texture,
+        side	: THREE.BackSide
+    })
+    var geometry	= new THREE.SphereGeometry(radius, 32, 32)
+    var mesh	= new THREE.Mesh(geometry, material)
+    return mesh
+}
+
+
+//////////////////////////////////////////////////////////////////////////////////
+//		comment								//
+//////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * change the original from three.js because i needed different UV
+ *
+ * @author Kaleb Murphy
+ * @author jerome etienne
+ *
+ * Minor changes
+ * @author Titta Heikkala
+ */
+THREEx.Planets._RingGeometry = function ( innerRadius, outerRadius, thetaSegments ) {
+
+    THREE.Geometry.call( this )
+
+    innerRadius	= innerRadius || 0
+    outerRadius	= outerRadius || 50
+    thetaSegments	= thetaSegments	|| 8
+
+    var normal	= new THREE.Vector3( 0, 0, 1 )
+
+    for(var i = 0; i < thetaSegments; i++ ){
+        var angleLo	= (i / thetaSegments) *Math.PI*2
+        var angleHi	= ((i+1) / thetaSegments) *Math.PI*2
+
+        var vertex1	= new THREE.Vector3(innerRadius * Math.cos(angleLo), innerRadius * Math.sin(angleLo), 0);
+        var vertex2	= new THREE.Vector3(outerRadius * Math.cos(angleLo), outerRadius * Math.sin(angleLo), 0);
+        var vertex3	= new THREE.Vector3(innerRadius * Math.cos(angleHi), innerRadius * Math.sin(angleHi), 0);
+        var vertex4	= new THREE.Vector3(outerRadius * Math.cos(angleHi), outerRadius * Math.sin(angleHi), 0);
+
+        this.vertices.push( vertex1 );
+        this.vertices.push( vertex2 );
+        this.vertices.push( vertex3 );
+        this.vertices.push( vertex4 );
+
+
+        var vertexIdx	= i * 4;
+
+        // Create the first triangle
+        var face = new THREE.Face3(vertexIdx + 0, vertexIdx + 1, vertexIdx + 2, normal);
+        var uvs = []
+
+        var uv = new THREE.Vector2(0, 0)
+        uvs.push(uv)
+        var uv = new THREE.Vector2(1, 0)
+        uvs.push(uv)
+        var uv = new THREE.Vector2(0, 1)
+        uvs.push(uv)
+
+        this.faces.push(face);
+        this.faceVertexUvs[0].push(uvs);
+
+        // Create the second triangle
+        var face = new THREE.Face3(vertexIdx + 2, vertexIdx + 1, vertexIdx + 3, normal);
+        var uvs = []
+
+        var uv = new THREE.Vector2(0, 1)
+        uvs.push(uv)
+        var uv = new THREE.Vector2(1, 0)
+        uvs.push(uv)
+        var uv = new THREE.Vector2(1, 1)
+        uvs.push(uv)
+
+        this.faces.push(face);
+        this.faceVertexUvs[0].push(uvs);
+    }
+
+    this.computeFaceNormals();
+
+    this.boundingSphere = new THREE.Sphere( new THREE.Vector3(), outerRadius );
+
+};
+THREEx.Planets._RingGeometry.prototype = Object.create( THREE.Geometry.prototype );
+
diff --git a/examples/canvas3d/canvas3d/canvas3d.pro b/examples/canvas3d/canvas3d/canvas3d.pro
index ef545b0..978d455 100644
--- a/examples/canvas3d/canvas3d/canvas3d.pro
+++ b/examples/canvas3d/canvas3d/canvas3d.pro
@@ -2,4 +2,8 @@ TEMPLATE = subdirs
 SUBDIRS += textureandlight \
            framebuffer \
            interaction \
-           jsonmodels
+           jsonmodels \
+           threejs
+
+OTHER_FILES += 3rdparty/*
+
diff --git a/examples/canvas3d/canvas3d/framebuffer/doc/images/framebuffer-example.png b/examples/canvas3d/canvas3d/framebuffer/doc/images/framebuffer-example.png
index 4a4ca67..055bf62 100644
--- a/examples/canvas3d/canvas3d/framebuffer/doc/images/framebuffer-example.png
+++ b/examples/canvas3d/canvas3d/framebuffer/doc/images/framebuffer-example.png
diff --git a/examples/canvas3d/canvas3d/framebuffer/framebuffer.qrc b/examples/canvas3d/canvas3d/framebuffer/framebuffer.qrc
index af7a213..646c76a 100644
--- a/examples/canvas3d/canvas3d/framebuffer/framebuffer.qrc
+++ b/examples/canvas3d/canvas3d/framebuffer/framebuffer.qrc
@@ -1,8 +1,8 @@
 <RCC>
     <qresource prefix="/">
-        <file>../../3rdparty/gl-matrix.js</file>
-        <file>qml/framebuffer/main.qml</file>
-        <file>qml/framebuffer/qtlogo.png</file>
-        <file>qml/framebuffer/framebuffer.js</file>
+        <file alias="gl-matrix.js">../3rdparty/gl-matrix.js</file>
+        <file alias="main.qml">qml/framebuffer/main.qml</file>
+        <file alias="qtlogo.png">qml/framebuffer/qtlogo.png</file>
+        <file alias="framebuffer.js">qml/framebuffer/framebuffer.js</file>
     </qresource>
 </RCC>
diff --git a/examples/canvas3d/canvas3d/framebuffer/main.cpp b/examples/canvas3d/canvas3d/framebuffer/main.cpp
index f6aff12..dc9ef5c 100644
--- a/examples/canvas3d/canvas3d/framebuffer/main.cpp
+++ b/examples/canvas3d/canvas3d/framebuffer/main.cpp
@@ -55,7 +55,7 @@ int main(int argc, char *argv[])
     viewer.engine()->addImportPath(extraImportPath.arg(QGuiApplication::applicationDirPath(),
                                                        QString::fromLatin1("qml")));
 
-    viewer.setSource(QUrl(QStringLiteral("qrc:///qml/framebuffer/main.qml")));
+    viewer.setSource(QUrl(QStringLiteral("qrc:/main.qml")));
 
     viewer.setTitle(QStringLiteral("Render into FrameBuffer"));
     viewer.setResizeMode(QQuickView::SizeRootObjectToView);
diff --git a/examples/canvas3d/canvas3d/framebuffer/qml/framebuffer/framebuffer.js b/examples/canvas3d/canvas3d/framebuffer/qml/framebuffer/framebuffer.js
index a8ad597..f268682 100644
--- a/examples/canvas3d/canvas3d/framebuffer/qml/framebuffer/framebuffer.js
+++ b/examples/canvas3d/canvas3d/framebuffer/qml/framebuffer/framebuffer.js
@@ -34,7 +34,7 @@
 **
 ****************************************************************************/
 
-Qt.include("../../3rdparty/gl-matrix.js")
+Qt.include("gl-matrix.js")
 
 //
 // Draws a cube that has the Qt logo as decal texture on each face in to a texture.
@@ -109,7 +109,7 @@ function initializeGL(canvas, textureLoader) {
         qtLogoImage.imageLoadingFailed.connect(function() {
             console.log("Texture load FAILED, "+qtLogoImage.errorString);
         });
-        qtLogoImage.src = "qrc:/qml/framebuffer/qtlogo.png";
+        qtLogoImage.src = "qrc:/qtlogo.png";
 
         //! [1]
         // Create the framebuffer object
diff --git a/examples/canvas3d/canvas3d/framebuffer/qml/framebuffer/main.qml b/examples/canvas3d/canvas3d/framebuffer/qml/framebuffer/main.qml
index 221cd02..68798cd 100644
--- a/examples/canvas3d/canvas3d/framebuffer/qml/framebuffer/main.qml
+++ b/examples/canvas3d/canvas3d/framebuffer/qml/framebuffer/main.qml
@@ -155,9 +155,9 @@ Item {
     RowLayout {
         id: controlLayout
         spacing: 5
-        x: 0
-        y: parent.height-100
-        width: parent.width
+        x: 12
+        y: parent.height - 100
+        width: parent.width - (x * 2)
         height: 100
         visible: true
 
@@ -166,13 +166,11 @@ Item {
             Layout.alignment: Qt.AlignRight
             Layout.fillWidth: false
             text: "X-axis:"
-            color: "#FFFFFF"
         }
 
         Slider {
             id: xSlider
             Layout.alignment: Qt.AlignLeft
-            Layout.preferredWidth : 300
             Layout.fillWidth: true
             minimumValue: 0;
             maximumValue: 360;
@@ -184,13 +182,11 @@ Item {
             Layout.alignment: Qt.AlignRight
             Layout.fillWidth: false
             text: "Y-axis:"
-            color: "#FFFFFF"
         }
 
         Slider {
             id: ySlider
             Layout.alignment: Qt.AlignLeft
-            Layout.preferredWidth : 300
             Layout.fillWidth: true
             minimumValue: 0;
             maximumValue: 360;
@@ -202,13 +198,11 @@ Item {
             Layout.alignment: Qt.AlignRight
             Layout.fillWidth: false
             text: "Z-axis:"
-            color: "#FFFFFF"
         }
 
         Slider {
             id: zSlider
             Layout.alignment: Qt.AlignLeft
-            Layout.preferredWidth : 300
             Layout.fillWidth: true
             minimumValue: 0;
             maximumValue: 360;
diff --git a/examples/canvas3d/canvas3d/interaction/doc/images/interaction-example.png b/examples/canvas3d/canvas3d/interaction/doc/images/interaction-example.png
index a72efc8..20f7434 100644
--- a/examples/canvas3d/canvas3d/interaction/doc/images/interaction-example.png
+++ b/examples/canvas3d/canvas3d/interaction/doc/images/interaction-example.png
diff --git a/examples/canvas3d/canvas3d/interaction/doc/src/interaction.qdoc b/examples/canvas3d/canvas3d/interaction/doc/src/interaction.qdoc
index fba0268..3349575 100644
--- a/examples/canvas3d/canvas3d/interaction/doc/src/interaction.qdoc
+++ b/examples/canvas3d/canvas3d/interaction/doc/src/interaction.qdoc
@@ -59,7 +59,7 @@
     \snippet canvas3d/interaction/qml/interaction/main.qml 1
 
     And then we add three sliders to the layout. Here's the one for
-    controlling x axis rotation:
+    controlling x-axis rotation:
 
     \snippet canvas3d/interaction/qml/interaction/main.qml 2
 
@@ -71,7 +71,7 @@
     \snippet canvas3d/interaction/qml/interaction/main.qml 3
 
     The \c onValueChanged signal handlers of the \l[QML]{Slider} components
-    are connected to the above properties. Here's the connection in x rotation
+    are connected to the above properties. Here's the connection in x-rotation
     slider as an example:
 
     \snippet canvas3d/interaction/qml/interaction/main.qml 4
@@ -81,10 +81,10 @@
 
     \snippet canvas3d/interaction/qml/interaction/interaction.js 0
 
-    \section1 Drawing in Three Ways
+    \section1 Three Ways of Drawing
 
-    The actual drawing is done in the same way as everywhere else we are
-    drawing the same object multiple times. Only in this case, we use a
+    The actual drawing is no different from any situation where
+    the same object is drawn multiple times. Only in this case we use a
     different drawing mode for each:
 
     \snippet canvas3d/interaction/qml/interaction/interaction.js 1
diff --git a/examples/canvas3d/canvas3d/interaction/interaction.qrc b/examples/canvas3d/canvas3d/interaction/interaction.qrc
index 674f0ad..5bfd073 100644
--- a/examples/canvas3d/canvas3d/interaction/interaction.qrc
+++ b/examples/canvas3d/canvas3d/interaction/interaction.qrc
@@ -1,10 +1,10 @@
 <RCC>
     <qresource prefix="/">
-        <file>../../3rdparty/gl-matrix.js</file>
-        <file>../../3rdparty/ThreeJSLoader.js</file>
+        <file alias="gl-matrix.js">../3rdparty/gl-matrix.js</file>
+        <file alias="ThreeJSLoader.js">../3rdparty/ThreeJSLoader.js</file>
         <file>qml/interaction/barrel.jpg</file>
         <file>qml/interaction/barrel.json</file>
-        <file>qml/interaction/interaction.js</file>
-        <file>qml/interaction/main.qml</file>
+        <file alias="main.qml">qml/interaction/main.qml</file>
+        <file alias="interaction.js">qml/interaction/interaction.js</file>
     </qresource>
 </RCC>
diff --git a/examples/canvas3d/canvas3d/interaction/main.cpp b/examples/canvas3d/canvas3d/interaction/main.cpp
index bb070e5..05e00a0 100644
--- a/examples/canvas3d/canvas3d/interaction/main.cpp
+++ b/examples/canvas3d/canvas3d/interaction/main.cpp
@@ -55,7 +55,7 @@ int main(int argc, char *argv[])
     viewer.engine()->addImportPath(extraImportPath.arg(QGuiApplication::applicationDirPath(),
                                                        QString::fromLatin1("qml")));
 
-    viewer.setSource(QUrl("qrc:/qml/interaction/main.qml"));
+    viewer.setSource(QUrl("qrc:/main.qml"));
 
     viewer.setTitle(QStringLiteral("Interaction"));
     viewer.setResizeMode(QQuickView::SizeRootObjectToView);
diff --git a/examples/canvas3d/canvas3d/interaction/qml/interaction/interaction.js b/examples/canvas3d/canvas3d/interaction/qml/interaction/interaction.js
index edd35be..e8ca513 100644
--- a/examples/canvas3d/canvas3d/interaction/qml/interaction/interaction.js
+++ b/examples/canvas3d/canvas3d/interaction/qml/interaction/interaction.js
@@ -34,8 +34,8 @@
 **
 ****************************************************************************/
 
-Qt.include("../../3rdparty/gl-matrix.js")
-Qt.include("../../3rdparty/ThreeJSLoader.js")
+Qt.include("gl-matrix.js")
+Qt.include("ThreeJSLoader.js")
 
 var gl;
 
@@ -150,16 +150,18 @@ function initializeGL(canvas) {
         barrelImage.imageLoadingFailed.connect(function() {
             console.log("Texture load FAILED, "+barrelImage.errorString);
         });
+        // Aliasing doesn't work correctly with QtQuick compiler for some reason,
+        // so use full names for barrel.jpg and barrel.json
         barrelImage.src = "qrc:/qml/interaction/barrel.jpg";
 
         // Load the model
         log("    Create XMLHttpRequest")
         var request = new XMLHttpRequest();
         log("    XMLHttpRequest.open")
-        request.open("GET", "barrel.json");
+        request.open("GET", "qrc:/qml/interaction/barrel.json");
         log("    XMLHttpRequest.onreadystatechange")
         request.onreadystatechange = function () {
-            if (request.readyState == XMLHttpRequest.DONE) {
+            if (request.readyState === XMLHttpRequest.DONE) {
                 handleLoadedModel(JSON.parse(request.responseText));
             }
         }
diff --git a/examples/canvas3d/canvas3d/interaction/qml/interaction/main.qml b/examples/canvas3d/canvas3d/interaction/qml/interaction/main.qml
index 7ef6284..88e9b31 100644
--- a/examples/canvas3d/canvas3d/interaction/qml/interaction/main.qml
+++ b/examples/canvas3d/canvas3d/interaction/qml/interaction/main.qml
@@ -78,8 +78,9 @@ Item {
     RowLayout {
         id: controlLayout
         spacing: 5
+        x: 12
         y: parent.height - 100
-        width: parent.width
+        width: parent.width - (2 * x)
         height: 100
         visible: true
         //! [1]
@@ -89,14 +90,12 @@ Item {
             Layout.alignment: Qt.AlignRight
             Layout.fillWidth: false
             text: "X-axis:"
-            color: "#FFFFFF"
         }
 
         //! [2]
         Slider {
             id: xSlider
             Layout.alignment: Qt.AlignLeft
-            Layout.preferredWidth : 300
             Layout.fillWidth: true
             minimumValue: 0;
             maximumValue: 360;
@@ -111,13 +110,11 @@ Item {
             Layout.alignment: Qt.AlignRight
             Layout.fillWidth: false
             text: "Y-axis:"
-            color: "#FFFFFF"
         }
 
         Slider {
             id: ySlider
             Layout.alignment: Qt.AlignLeft
-            Layout.preferredWidth : 300
             Layout.fillWidth: true
             minimumValue: 0;
             maximumValue: 360;
@@ -129,13 +126,11 @@ Item {
             Layout.alignment: Qt.AlignRight
             Layout.fillWidth: false
             text: "Z-axis:"
-            color: "#FFFFFF"
         }
 
         Slider {
             id: zSlider
             Layout.alignment: Qt.AlignLeft
-            Layout.preferredWidth : 300
             Layout.fillWidth: true
             minimumValue: 0;
             maximumValue: 360;
diff --git a/examples/canvas3d/canvas3d/jsonmodels/doc/images/jsonmodels-example.png b/examples/canvas3d/canvas3d/jsonmodels/doc/images/jsonmodels-example.png
index e2b3697..0bf0f3c 100644
--- a/examples/canvas3d/canvas3d/jsonmodels/doc/images/jsonmodels-example.png
+++ b/examples/canvas3d/canvas3d/jsonmodels/doc/images/jsonmodels-example.png
diff --git a/examples/canvas3d/canvas3d/jsonmodels/main.cpp b/examples/canvas3d/canvas3d/jsonmodels/main.cpp
index 06ab9cc..ee3caa9 100644
--- a/examples/canvas3d/canvas3d/jsonmodels/main.cpp
+++ b/examples/canvas3d/canvas3d/jsonmodels/main.cpp
@@ -45,9 +45,9 @@ int main(int argc, char *argv[])
 
     QQmlApplicationEngine engine;
 #ifdef NO_ENTERPRISE
-    engine.load(QUrl(QStringLiteral("qrc:///jsonmodelsbasic.qml")));
+    engine.load(QUrl(QStringLiteral("qrc:/jsonmodelsbasic.qml")));
 #else
-    engine.load(QUrl(QStringLiteral("qrc:///jsonmodels.qml")));
+    engine.load(QUrl(QStringLiteral("qrc:/jsonmodels.qml")));
 #endif
 
     return app.exec();
diff --git a/examples/canvas3d/canvas3d/jsonmodels/qml.qrc b/examples/canvas3d/canvas3d/jsonmodels/qml.qrc
index 89ef89f..ec83f78 100644
--- a/examples/canvas3d/canvas3d/jsonmodels/qml.qrc
+++ b/examples/canvas3d/canvas3d/jsonmodels/qml.qrc
@@ -1,19 +1,19 @@
 <RCC>
     <qresource prefix="/">
-        <file alias="gl-matrix.js">../../3rdparty/gl-matrix.js</file>
-        <file alias="ThreeJSLoader.js">../../3rdparty/ThreeJSLoader.js</file>
-        <file>gold.json</file>
-        <file>woodbox.json</file>
-        <file>bush.json</file>
-        <file>pallet.json</file>
-        <file>rock.json</file>
-        <file>pallet.jpg</file>
-        <file>rock.jpg</file>
-        <file>gold.jpg</file>
-        <file>woodbox.jpg</file>
-        <file>bush.png</file>
-        <file>jsonmodels.js</file>
-        <file>jsonmodels.qml</file>
-        <file>jsonmodelsbasic.qml</file>
+        <file alias="gl-matrix.js">../3rdparty/gl-matrix.js</file>
+        <file alias="ThreeJSLoader.js">../3rdparty/ThreeJSLoader.js</file>
+        <file alias="bush.json">qml/jsonmodels/bush.json</file>
+        <file alias="bush.png">qml/jsonmodels/bush.png</file>
+        <file alias="gold.jpg">qml/jsonmodels/gold.jpg</file>
+        <file alias="gold.json">qml/jsonmodels/gold.json</file>
+        <file alias="jsonmodels.js">qml/jsonmodels/jsonmodels.js</file>
+        <file alias="jsonmodels.qml">qml/jsonmodels/jsonmodels.qml</file>
+        <file alias="jsonmodelsbasic.qml">qml/jsonmodels/jsonmodelsbasic.qml</file>
+        <file alias="pallet.jpg">qml/jsonmodels/pallet.jpg</file>
+        <file alias="pallet.json">qml/jsonmodels/pallet.json</file>
+        <file alias="rock.jpg">qml/jsonmodels/rock.jpg</file>
+        <file alias="rock.json">qml/jsonmodels/rock.json</file>
+        <file alias="woodbox.jpg">qml/jsonmodels/woodbox.jpg</file>
+        <file alias="woodbox.json">qml/jsonmodels/woodbox.json</file>
     </qresource>
 </RCC>
diff --git a/examples/canvas3d/canvas3d/jsonmodels/bush.json b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/bush.json
index f05ed58..f05ed58 100644
--- a/examples/canvas3d/canvas3d/jsonmodels/bush.json
+++ b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/bush.json
diff --git a/examples/canvas3d/canvas3d/jsonmodels/bush.png b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/bush.png
index 9980cf0..9980cf0 100644
--- a/examples/canvas3d/canvas3d/jsonmodels/bush.png
+++ b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/bush.png
diff --git a/examples/canvas3d/canvas3d/jsonmodels/gold.jpg b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/gold.jpg
index ca316d5..ca316d5 100644
--- a/examples/canvas3d/canvas3d/jsonmodels/gold.jpg
+++ b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/gold.jpg
diff --git a/examples/canvas3d/canvas3d/jsonmodels/gold.json b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/gold.json
index 0e586be..0e586be 100644
--- a/examples/canvas3d/canvas3d/jsonmodels/gold.json
+++ b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/gold.json
diff --git a/examples/canvas3d/canvas3d/jsonmodels/jsonmodels.js b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/jsonmodels.js
index 8a6dafe..8a6dafe 100644
--- a/examples/canvas3d/canvas3d/jsonmodels/jsonmodels.js
+++ b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/jsonmodels.js
diff --git a/examples/canvas3d/canvas3d/jsonmodels/jsonmodels.qml b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/jsonmodels.qml
index 2cdeeb9..2cdeeb9 100644
--- a/examples/canvas3d/canvas3d/jsonmodels/jsonmodels.qml
+++ b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/jsonmodels.qml
diff --git a/examples/canvas3d/canvas3d/jsonmodels/jsonmodelsbasic.qml b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/jsonmodelsbasic.qml
index 3583131..bbc93fa 100644
--- a/examples/canvas3d/canvas3d/jsonmodels/jsonmodelsbasic.qml
+++ b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/jsonmodelsbasic.qml
@@ -50,6 +50,40 @@ Window {
     property int previousY: 0
     property int previousX: 0
 
+    Rectangle {
+        id: valuePanel
+        width: 150
+        height: 100
+        anchors.left: parent.left
+        anchors.top: parent.top
+        opacity: 0.3
+        border.color: "black"
+        border.width: 2
+        radius: 5
+        z: 1
+    }
+    ColumnLayout {
+        width: valuePanel.width
+        height: valuePanel.height
+        x: 10
+        z: 2
+        Label {
+            font.pixelSize: 20
+            text: "x angle: " + angle
+            readonly property int angle: canvas3d.xRot
+        }
+        Label {
+            font.pixelSize: 20
+            text: "y angle: " + angle
+            readonly property int angle: canvas3d.yRot
+        }
+        Label {
+            font.pixelSize: 20
+            text: "distance: " + distance
+            readonly property int distance: canvas3d.distance * 10
+        }
+    }
+
     ColumnLayout {
         anchors.fill: parent
         RowLayout {
@@ -115,33 +149,6 @@ Window {
                     }
                 }
             }
-
-            ColumnLayout {
-                Label {
-                    width: 150
-                    Text {
-                        font.pixelSize: 20
-                        text: "x angle: " + angle
-                        readonly property int angle: canvas3d.xRot
-                    }
-                }
-                Label {
-                    width: 150
-                    Text {
-                        font.pixelSize: 20
-                        text: "y angle: " + angle
-                        readonly property int angle: canvas3d.yRot
-                    }
-                }
-                Label {
-                    width: 150
-                    Text {
-                        font.pixelSize: 20
-                        text: "distance: " + distance
-                        readonly property int distance: canvas3d.distance * 10
-                    }
-                }
-            }
         }
         RowLayout {
             Layout.fillWidth: true
diff --git a/examples/canvas3d/canvas3d/jsonmodels/pallet.jpg b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/pallet.jpg
index ea0c01a..ea0c01a 100644
--- a/examples/canvas3d/canvas3d/jsonmodels/pallet.jpg
+++ b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/pallet.jpg
diff --git a/examples/canvas3d/canvas3d/jsonmodels/pallet.json b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/pallet.json
index 8bd7fef..8bd7fef 100644
--- a/examples/canvas3d/canvas3d/jsonmodels/pallet.json
+++ b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/pallet.json
diff --git a/examples/canvas3d/canvas3d/jsonmodels/rock.jpg b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/rock.jpg
index 023035d..023035d 100644
--- a/examples/canvas3d/canvas3d/jsonmodels/rock.jpg
+++ b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/rock.jpg
diff --git a/examples/canvas3d/canvas3d/jsonmodels/rock.json b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/rock.json
index 72127b6..72127b6 100644
--- a/examples/canvas3d/canvas3d/jsonmodels/rock.json
+++ b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/rock.json
diff --git a/examples/canvas3d/canvas3d/jsonmodels/woodbox.jpg b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/woodbox.jpg
index fd9c10d..fd9c10d 100644
--- a/examples/canvas3d/canvas3d/jsonmodels/woodbox.jpg
+++ b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/woodbox.jpg
diff --git a/examples/canvas3d/canvas3d/jsonmodels/woodbox.json b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/woodbox.json
index 141ad57..141ad57 100644
--- a/examples/canvas3d/canvas3d/jsonmodels/woodbox.json
+++ b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/woodbox.json
diff --git a/examples/canvas3d/canvas3d/textureandlight/doc/images/textureandlight-example.png b/examples/canvas3d/canvas3d/textureandlight/doc/images/textureandlight-example.png
index cd63f9e..d148aa0 100644
--- a/examples/canvas3d/canvas3d/textureandlight/doc/images/textureandlight-example.png
+++ b/examples/canvas3d/canvas3d/textureandlight/doc/images/textureandlight-example.png
diff --git a/examples/canvas3d/canvas3d/textureandlight/doc/src/textureandlight.qdoc b/examples/canvas3d/canvas3d/textureandlight/doc/src/textureandlight.qdoc
index 4ae0afd..287c3a0 100644
--- a/examples/canvas3d/canvas3d/textureandlight/doc/src/textureandlight.qdoc
+++ b/examples/canvas3d/canvas3d/textureandlight/doc/src/textureandlight.qdoc
@@ -107,7 +107,7 @@
 
     \snippet canvas3d/textureandlight/qml/textureandlight/textureandlight.js 4
 
-    Then we need to create the shader program (Program3D), attach the shaders
+    Then we need to create the shader program (Canvas3DProgram), attach the shaders
     to it, and then link and use the program:
 
     \snippet canvas3d/textureandlight/qml/textureandlight/textureandlight.js 5
diff --git a/examples/canvas3d/canvas3d/textureandlight/main.cpp b/examples/canvas3d/canvas3d/textureandlight/main.cpp
index 53262ac..d2472a2 100644
--- a/examples/canvas3d/canvas3d/textureandlight/main.cpp
+++ b/examples/canvas3d/canvas3d/textureandlight/main.cpp
@@ -65,7 +65,7 @@ int main(int argc, char *argv[])
     viewer.engine()->addImportPath(extraImportPath.arg(QGuiApplication::applicationDirPath(),
                                                        QString::fromLatin1("qml")));
 
-    viewer.setSource(QUrl("qrc:/qml/textureandlight/main.qml"));
+    viewer.setSource(QUrl("qrc:/main.qml"));
 
     viewer.setTitle(QStringLiteral("Textured and Lit Cube"));
     viewer.setResizeMode(QQuickView::SizeRootObjectToView);
diff --git a/examples/canvas3d/canvas3d/textureandlight/qml/textureandlight/textureandlight.js b/examples/canvas3d/canvas3d/textureandlight/qml/textureandlight/textureandlight.js
index 9be4cef..d80cb8f 100644
--- a/examples/canvas3d/canvas3d/textureandlight/qml/textureandlight/textureandlight.js
+++ b/examples/canvas3d/canvas3d/textureandlight/qml/textureandlight/textureandlight.js
@@ -35,7 +35,7 @@
 ****************************************************************************/
 
 //! [0]
-Qt.include("/gl-matrix.js")
+Qt.include("gl-matrix.js")
 //! [0]
 
 //
@@ -69,7 +69,7 @@ function initializeGL(canvas) {
     //! [2]
     // Setup the OpenGL state
     gl.enable(gl.DEPTH_TEST);
-    gl.depthFunc(gl.DEPTH_LESS);
+    gl.depthFunc(gl.LESS);
     gl.enable(gl.CULL_FACE);
     gl.cullFace(gl.BACK);
     gl.clearColor(0.98, 0.98, 0.98, 1.0);
@@ -91,7 +91,7 @@ function initializeGL(canvas) {
     //! [8]
     qtLogoImage.imageLoaded.connect(function() {
         console.log("Texture loaded, "+qtLogoImage.src);
-        // Create the Texture3D object
+        // Create the Canvas3DTexture object
         cubeTexture = gl.createTexture();
         // Bind it
         gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
@@ -112,7 +112,7 @@ function initializeGL(canvas) {
     qtLogoImage.imageLoadingFailed.connect(function() {
         console.log("Texture load FAILED, "+qtLogoImage.errorString);
     });
-    qtLogoImage.src = "qrc:/qml/textureandlight/qtlogo.png";
+    qtLogoImage.src = "qrc:/qtlogo.png";
 }
 
 function resizeGL(canvas)
@@ -349,7 +349,7 @@ function initShaders()
                                     }", gl.FRAGMENT_SHADER);
     //! [4]
     //! [5]
-    // Create the Program3D for shader
+    // Create the Canvas3DProgram for shader
     var shaderProgram = gl.createProgram();
 
     // Attach the shader sources to the shader program
diff --git a/examples/canvas3d/canvas3d/textureandlight/textureandlight.qrc b/examples/canvas3d/canvas3d/textureandlight/textureandlight.qrc
index 56b2fa7..bd485d1 100644
--- a/examples/canvas3d/canvas3d/textureandlight/textureandlight.qrc
+++ b/examples/canvas3d/canvas3d/textureandlight/textureandlight.qrc
@@ -1,8 +1,8 @@
 <RCC>
     <qresource prefix="/">
-        <file>qml/textureandlight/main.qml</file>
-        <file>qml/textureandlight/textureandlight.js</file>
-        <file>qml/textureandlight/qtlogo.png</file>
-        <file alias="gl-matrix.js">../../3rdparty/gl-matrix.js</file>
+        <file alias="main.qml">qml/textureandlight/main.qml</file>
+        <file alias="textureandlight.js">qml/textureandlight/textureandlight.js</file>
+        <file alias="qtlogo.png">qml/textureandlight/qtlogo.png</file>
+        <file alias="gl-matrix.js">../3rdparty/gl-matrix.js</file>
     </qresource>
 </RCC>
diff --git a/examples/canvas3d/threejs/controls/ControlEventSource.qml b/examples/canvas3d/canvas3d/threejs/controls/ControlEventSource.qml
index 8662442..8662442 100644
--- a/examples/canvas3d/threejs/controls/ControlEventSource.qml
+++ b/examples/canvas3d/canvas3d/threejs/controls/ControlEventSource.qml
diff --git a/examples/canvas3d/threejs/oneqt/ImageCube.qml b/examples/canvas3d/canvas3d/threejs/oneqt/ImageCube.qml
index 4fd5b15..f08988c 100644
--- a/examples/canvas3d/threejs/oneqt/ImageCube.qml
+++ b/examples/canvas3d/canvas3d/threejs/oneqt/ImageCube.qml
@@ -42,9 +42,9 @@ import "imagecube.js" as GLCode
 Canvas3D {
     id: cube
     //! [0]
-    property real xRotation: 0
-    property real yRotation: 0
-    property real zRotation: 0
+    state: "image6"
+    property color backgroundColor: "#FCFCFC"
+    property real angleOffset: -180 / 8.0
     property string image1: ""
     //! [0]
     property string image2: ""
@@ -52,58 +52,63 @@ Canvas3D {
     property string image4: ""
     property string image5: ""
     property string image6: ""
-    state: "image6"
+    property real xRotation: 0
+    property real yRotation: 0
+    property real zRotation: 0
+
+    onBackgroundColorChanged: { GLCode.setBackgroundColor(cube.backgroundColor); }
 
     //! [1]
     states: [
-
         State {
             name: "image1"
             PropertyChanges { target: cube; xRotation: 0; }
-            PropertyChanges { target: cube; yRotation: Math.PI + Math.PI / 4.0; }
+            PropertyChanges { target: cube; yRotation: 180 * 1.5 + angleOffset; }
             PropertyChanges { target: cube; zRotation: 0 }
         },
-    //! [1]
+        //! [1]
         State {
             name: "image2"
             PropertyChanges { target: cube; xRotation: 0; }
-            PropertyChanges { target: cube; yRotation: Math.PI * 0.5 + Math.PI / 4.0; }
+            PropertyChanges { target: cube; yRotation: 180 * 1.0 + angleOffset; }
             PropertyChanges { target: cube; zRotation: 0 }
         },
         State {
             name: "image3"
             PropertyChanges { target: cube; xRotation: 0; }
-            PropertyChanges { target: cube; yRotation: 0 + Math.PI / 4.0; }
+            PropertyChanges { target: cube; yRotation: 180 * 0.5 + angleOffset; }
             PropertyChanges { target: cube; zRotation: 0 }
         },
         State {
             name: "image4"
             PropertyChanges { target: cube; xRotation: 0; }
-            PropertyChanges { target: cube; yRotation: -Math.PI * .5 + Math.PI / 4.0; }
+            PropertyChanges { target: cube; yRotation: 0 + angleOffset; }
             PropertyChanges { target: cube; zRotation: 0 }
         },
         State {
             name: "image5"
-            PropertyChanges { target: cube; xRotation: Math.PI / 2.0; }
+            PropertyChanges { target: cube; xRotation: 180 / 2.0; }
             PropertyChanges { target: cube; yRotation: 0; }
-            PropertyChanges { target: cube; zRotation: Math.PI / 4.0; }
+            PropertyChanges { target: cube; zRotation: -angleOffset; }
         },
         State {
             name: "image6"
-            PropertyChanges { target: cube; xRotation: -Math.PI / 2.0; }
+            PropertyChanges { target: cube; xRotation: -180 / 2.0; }
             PropertyChanges { target: cube; yRotation: 0; }
-            PropertyChanges { target: cube; zRotation: -Math.PI / 4.0; }
+            PropertyChanges { target: cube; zRotation: angleOffset; }
         }
     ]
 
     //! [2]
     transitions: [
         Transition {
+            id: turnTransition
             from: "*"
             to: "*"
-            NumberAnimation {
+            RotationAnimation {
                 properties: "xRotation,yRotation,zRotation"
                 easing.type: Easing.InOutCubic
+                direction: RotationAnimation.Shortest
                 duration: 450
             }
         }
@@ -120,8 +125,74 @@ Canvas3D {
     }
 
     onResizeGL: {
-        GLCode.onResizeGL(cube);
+        GLCode.resizeGL(cube);
     }
     //! [3]
+
+    SwipeArea {
+        id: swipeArea
+        anchors.fill: parent
+
+        onSwipeRight: {
+            if (cube.state === "image1")
+                cube.state = "image4";
+            else if (cube.state == "image2")
+                cube.state = "image1";
+            else if (cube.state == "image3")
+                cube.state = "image2";
+            else if (cube.state == "image4")
+                cube.state = "image3";
+            else if (cube.state == "image5")
+                cube.state = "image3";
+            else if (cube.state == "image6")
+                cube.state = "image3";
+        }
+
+        onSwipeLeft: {
+            if (cube.state === "image1")
+                cube.state = "image2";
+            else if (cube.state == "image2")
+                cube.state = "image3";
+            else if (cube.state == "image3")
+                cube.state = "image4";
+            else if (cube.state == "image4")
+                cube.state = "image1";
+            else if (cube.state == "image5")
+                cube.state = "image1";
+            else if (cube.state == "image6")
+                cube.state = "image1";
+        }
+
+        onSwipeUp: {
+            if (cube.state === "image1")
+                cube.state = "image6";
+            else if (cube.state == "image2")
+                cube.state = "image6";
+            else if (cube.state == "image3")
+                cube.state = "image6";
+            else if (cube.state == "image4")
+                cube.state = "image6";
+            else if (cube.state == "image5")
+                cube.state = "image4";
+            else if (cube.state == "image6")
+                cube.state = "image2";
+        }
+
+        onSwipeDown: {
+            if (cube.state === "image1")
+                cube.state = "image5";
+            else if (cube.state == "image2")
+                cube.state = "image5";
+            else if (cube.state == "image3")
+                cube.state = "image5";
+            else if (cube.state == "image4")
+                cube.state = "image5";
+            else if (cube.state == "image5")
+                cube.state = "image2";
+            else if (cube.state == "image6")
+                cube.state = "image4";
+        }
+    }
+
 }
 
diff --git a/examples/canvas3d/threejs/oneqt/InfoSheet.qml b/examples/canvas3d/canvas3d/threejs/oneqt/InfoSheet.qml
index acd0b9e..acd0b9e 100644
--- a/examples/canvas3d/threejs/oneqt/InfoSheet.qml
+++ b/examples/canvas3d/canvas3d/threejs/oneqt/InfoSheet.qml
diff --git a/examples/canvas3d/threejs/oneqt/Navibutton.qml b/examples/canvas3d/canvas3d/threejs/oneqt/Navibutton.qml
index 94a85f0..94a85f0 100644
--- a/examples/canvas3d/threejs/oneqt/Navibutton.qml
+++ b/examples/canvas3d/canvas3d/threejs/oneqt/Navibutton.qml
diff --git a/examples/canvas3d/canvas3d/threejs/oneqt/SwipeArea.qml b/examples/canvas3d/canvas3d/threejs/oneqt/SwipeArea.qml
new file mode 100644
index 0000000..13b7b44
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/oneqt/SwipeArea.qml
@@ -0,0 +1,95 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the QtCanvas3D module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** 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 http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+MouseArea {
+    id: mouseSwipeArea
+    preventStealing: true
+
+    property real prevX: 0
+    property real prevY: 0
+    property real velocityX: 0.0
+    property real velocityY: 0.0
+    property int startX: 0
+    property int startY: 0
+    property bool tracing: false
+
+    signal swipeLeft()
+    signal swipeRight()
+    signal swipeUp()
+    signal swipeDown()
+
+    onPressed: {
+        startX = mouse.x
+        startY = mouse.y
+        prevX = mouse.x
+        prevY = mouse.y
+        velocityX = 0
+        velocityY = 0
+        tracing = true
+    }
+
+    onPositionChanged: {
+        if ( !tracing ) return
+        var currVelX = (mouse.x-prevX)
+        var currVelY = (mouse.y-prevY)
+
+        velocityX = (velocityX + currVelX)/2.0;
+        velocityY = (velocityY + currVelY)/2.0;
+
+        prevX = mouse.x
+        prevY = mouse.y
+
+        if ( velocityX > 15 && mouse.x > mouseSwipeArea.width * 0.25 ) {
+            tracing = false
+            // Swipe Right
+            mouseSwipeArea.swipeRight()
+        } else if ( velocityX < -15 && mouse.x < mouseSwipeArea.width * 0.75 ) {
+            tracing = false
+            // Swipe Left
+            mouseSwipeArea.swipeLeft()
+        } else if (velocityY > 15 && mouse.y > mouseSwipeArea.height * 0.25 ) {
+            tracing = false
+            // Swipe Down
+            mouseSwipeArea.swipeDown()
+        } else if ( velocityY < -15 && mouse.y < mouseSwipeArea.height * 0.75 ) {
+            tracing = false
+            // Swipe Up
+            mouseSwipeArea.swipeUp()
+        }
+    }
+}
diff --git a/examples/canvas3d/threejs/oneqt/doc/images/oneqt-example.png b/examples/canvas3d/canvas3d/threejs/oneqt/doc/images/oneqt-example.png
index 726cc2e..726cc2e 100644
--- a/examples/canvas3d/threejs/oneqt/doc/images/oneqt-example.png
+++ b/examples/canvas3d/canvas3d/threejs/oneqt/doc/images/oneqt-example.png
diff --git a/examples/canvas3d/canvas3d/threejs/oneqt/doc/src/oneqt.qdoc b/examples/canvas3d/canvas3d/threejs/oneqt/doc/src/oneqt.qdoc
new file mode 100644
index 0000000..54f535d
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/oneqt/doc/src/oneqt.qdoc
@@ -0,0 +1,147 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the QtCanvas3D module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** 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 http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+    \example canvas3d/threejs/oneqt
+    \since QtCanvas3D 1.0
+    \title One Qt Example
+    \ingroup qtcanvas3d-examples
+    \brief Demonstrates combining Qt Quick and three.js rendering.
+
+    One Qt example demonstrates how to implement a simple QML 3D control that combines the use
+    of \c{three.js} library-based Canvas3D rendering with Qt Quick 2D elements. The example shows
+    a view with various benefits of using Qt with related images picked from
+    \l {http://qt.io} {http://qt.io}. The images are displayed on the side of a spinning 3D cube
+    that spins to show the correct image when the tabs at the top of the application are selected.
+    You can also use swipe gestures to spin the cube to navigate between the tabs. The 3D cube
+    control has been implemented as a simple QML type that internaly uses \c{three.js} library and
+    \l{Qt Canvas 3D}.
+
+    \image oneqt-example.png
+
+    \section1 Main QML File
+
+    In \l{canvas3d/threejs/oneqt/oneqt.qml}{oneqt.qml}, we build the 2D content as normal in QML.
+    Then we add a custom \c {ImageCube} type into the scene behind the text elements.
+    This custom type, implemented using \c{three.js} library, handles the painting of the 3D
+    cube.
+
+    \snippet canvas3d/threejs/oneqt/oneqt.qml 0
+    \dots
+
+    \note The \c {ImageCube} 3D UI component can be created and anchored just like any other
+    QML type.
+
+    \section1 The Custom 3D QML Control
+
+    The \l{canvas3d/threejs/oneqt/ImageCube.qml}{ImageCube.qml} takes six images that it loads
+    and places to the sides of the cube. In addition, the type has a state that defines which of
+    these images are visible and a \c {backgroundColor} property that is used when painting the 3D
+    cube. The \c {angleOffset} property can be used to adjust the cube's direction when displaying
+    the selected image. In this example the cube component sits on the right edge of the screen so
+    we twist it slightly to the left so that it appears to be facing the rest of the content.
+    This angle is also used by the 3D light so that the light always illuminates the selected face
+    of the cube.
+
+    \snippet canvas3d/threejs/oneqt/ImageCube.qml 0
+    \dots
+
+    The custom type defines six states, one for each side of the cube along with the x-, y-, and
+    z-rotations, that must be set to show the face of the cube corresponding to the state.
+
+    \snippet canvas3d/threejs/oneqt/ImageCube.qml 1
+    \dots
+
+    We use \c {RotationAnimation} to animate the transition between angles. It enables us to get
+    smooth transitions between different cube orientations and to always rotate the cube along the
+    shortest possible angle distance.
+
+    \snippet canvas3d/threejs/oneqt/ImageCube.qml 2
+    \dots
+
+    We call the JavaScript code that uses \c{three.js} to do the rendering of the cube, calling
+    it on the \c{initializeGL}, \c{paintGL}, and \c{resizeGL} signals.
+
+    \snippet canvas3d/threejs/oneqt/ImageCube.qml 3
+
+    \section1 The JavaScript Code
+
+    The JavaScript side of the implementation,
+    \l{canvas3d/threejs/oneqt/imagecube.js}{imagecube.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}.
+
+    In \l{canvas3d/threejs/oneqt/imagecube.js}{imagecube.js}, we start by creating the camera and
+    the scene that contains all the rest of the \c{three.js} objects.
+
+    \snippet canvas3d/threejs/oneqt/imagecube.js 0
+    \dots
+
+    Then we start the asynchronous loading of the textures and create a material array for the sides
+    of the cube (note that the cube needs 12 materials as each side consists of two triangles).
+
+    \snippet canvas3d/threejs/oneqt/imagecube.js 1
+    \dots
+
+    We then create the needed geometry as \c {BoxGeometry} binding the created materials to the
+    faces of the cube. We then create a \c {MeshFaceMaterial} from the array of materials.
+
+    \snippet canvas3d/threejs/oneqt/imagecube.js 2
+
+    Finally we create the cube mesh from the geometry and material, position it, and add it
+    to the 3D scene.
+
+    \snippet canvas3d/threejs/oneqt/imagecube.js 3
+
+    Next we create and add some lights to the scene. \c{AmbientLight} defines the surrounding light
+    amount and the directional light is positioned so that it highlights the face of the cube that
+    is currently selected.
+
+    \snippet canvas3d/threejs/oneqt/imagecube.js 6
+
+    Final step in the initialization phase is to create the \c {Canvas3D} renderer and set the
+    initial size and clear color (color of the background) to the renderer.
+
+    \snippet canvas3d/threejs/oneqt/imagecube.js 4
+
+    When we need to render the scene in response to the \c{paintGL} signal from Canvas3D, we just
+    copy the current rotation values from the QML side to the cube mesh in the \c{paintGL()} method.
+
+    \snippet canvas3d/threejs/oneqt/imagecube.js 5
+
+    For more information on how to use \c {three.js} the documentation is available here:
+    \l{http://threejs.org/docs/}{three.js/docs}
+*/
diff --git a/examples/canvas3d/threejs/oneqt/imagecube.js b/examples/canvas3d/canvas3d/threejs/oneqt/imagecube.js
index 666aa0e..d961284 100644
--- a/examples/canvas3d/threejs/oneqt/imagecube.js
+++ b/examples/canvas3d/canvas3d/threejs/oneqt/imagecube.js
@@ -43,7 +43,8 @@ var pointLight;
 function initializeGL(canvas) {
     //! [0]
     camera = new THREE.PerspectiveCamera(50, canvas.width / canvas.height, 1, 2000);
-    camera.position.z = 700;
+    camera.position.z = 400;
+    camera.position.y = 140;
 
     scene = new THREE.Scene();
     //! [0]
@@ -86,22 +87,20 @@ function initializeGL(canvas) {
 
     //! [3]
     cube = new THREE.Mesh(geometry, faceMaterial);
-    cube.position.x = 350;
-    cube.position.y = -130;
-    cube.rotation.x = 0;
-    cube.rotation.y = 0;
-    cube.rotation.z = 0;
     scene.add(cube);
     //! [3]
 
+    camera.lookAt(cube.position);
+
     // Lights
     //! [6]
     scene.add(new THREE.AmbientLight(0x444444));
 
     var directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
-    directionalLight.position.x = -350;
+
     directionalLight.position.y = 130;
     directionalLight.position.z = 700;
+    directionalLight.position.x = Math.tan(canvas.angleOffset) * directionalLight.position.z;
     directionalLight.position.normalize();
     scene.add(directionalLight);
     //! [6]
@@ -109,26 +108,34 @@ function initializeGL(canvas) {
     //! [4]
     renderer = new THREE.Canvas3DRenderer(
                 { canvas: canvas, antialias: true, devicePixelRatio: canvas.devicePixelRatio });
+    renderer.setPixelRatio(canvas.devicePixelRatio);
     renderer.setSize(canvas.width, canvas.height);
-    renderer.setClearColor(0xfcfcfc);
+    setBackgroundColor(canvas.backgroundColor);
     //! [4]
 }
 
-function onResizeGL(canvas) {
+function setBackgroundColor(backgroundColor) {
+    var str = ""+backgroundColor;
+    var color = parseInt(str.substring(1), 16);
+    if (renderer)
+        renderer.setClearColor(color);
+}
+
+function resizeGL(canvas) {
     if (camera === undefined) return;
 
     camera.aspect = canvas.width / canvas.height;
     camera.updateProjectionMatrix();
 
-    renderer.devicePixelRatio = canvas.devicePixelRatio;
+    renderer.setPixelRatio(canvas.devicePixelRatio);
     renderer.setSize(canvas.width, canvas.height);
 }
 
 //! [5]
 function paintGL(canvas) {
-    cube.rotation.x = canvas.xRotation;
-    cube.rotation.y = canvas.yRotation;
-    cube.rotation.z = canvas.zRotation;
+    cube.rotation.x = canvas.xRotation * Math.PI / 180;
+    cube.rotation.y = canvas.yRotation * Math.PI / 180;
+    cube.rotation.z = canvas.zRotation * Math.PI / 180;
     renderer.render(scene, camera);
 }
 //! [5]
diff --git a/examples/canvas3d/threejs/oneqt/main.cpp b/examples/canvas3d/canvas3d/threejs/oneqt/main.cpp
index 112cc20..112cc20 100644
--- a/examples/canvas3d/threejs/oneqt/main.cpp
+++ b/examples/canvas3d/canvas3d/threejs/oneqt/main.cpp
diff --git a/examples/canvas3d/threejs/oneqt/oneqt.pro b/examples/canvas3d/canvas3d/threejs/oneqt/oneqt.pro
index 08551ae..96515f0 100644
--- a/examples/canvas3d/threejs/oneqt/oneqt.pro
+++ b/examples/canvas3d/canvas3d/threejs/oneqt/oneqt.pro
@@ -1,4 +1,4 @@
-!include( ../../../examples.pri ) {
+!include( ../../../../examples.pri ) {
     error( "Couldn't find the examples.pri file!" )
 }
 
diff --git a/examples/canvas3d/threejs/oneqt/oneqt.qml b/examples/canvas3d/canvas3d/threejs/oneqt/oneqt.qml
index 513f604..cc1a16c 100644
--- a/examples/canvas3d/threejs/oneqt/oneqt.qml
+++ b/examples/canvas3d/canvas3d/threejs/oneqt/oneqt.qml
@@ -38,124 +38,123 @@ import QtQuick 2.0
 import QtCanvas3D 1.0
 import QtQuick.Layouts 1.1
 
-Item {
+Rectangle {
     id: mainview
     width: 1280
     height: 768
     visible: true
     focus: true
-    state: "page6"
-
-    onStateChanged: {
-        if (state == "page1") {
-            imageCube.state="image1";
-            page1Button.selected = true;
-            page2Button.selected = false;
-            page3Button.selected = false;
-            page4Button.selected = false;
-            page5Button.selected = false;
-            page6Button.selected = false;
-            page1.visible = true;
-            page2.visible = false;
-            page4.visible = false;
-            page3.visible = false;
-            page5.visible = false;
-            page6.visible = false;
-        } else if (state == "page2") {
-            imageCube.state="image2";
-            page1Button.selected = false;
-            page2Button.selected = true;
-            page3Button.selected = false;
-            page4Button.selected = false;
-            page5Button.selected = false;
-            page6Button.selected = false;
-            page1.visible = false;
-            page2.visible = true;
-            page4.visible = false;
-            page3.visible = false;
-            page5.visible = false;
-            page6.visible = false;
-        } else if (state == "page3") {
-            imageCube.state="image3";
-            page1Button.selected = false;
-            page2Button.selected = false;
-            page3Button.selected = true;
-            page4Button.selected = false;
-            page5Button.selected = false;
-            page6Button.selected = false;
-            page1.visible = false;
-            page2.visible = false;
-            page3.visible = true;
-            page4.visible = false;
-            page5.visible = false;
-            page6.visible = false;
-        } else if (state == "page4") {
-            imageCube.state="image4";
-            page1Button.selected = false;
-            page2Button.selected = false;
-            page3Button.selected = false;
-            page4Button.selected = true;
-            page5Button.selected = false;
-            page6Button.selected = false;
-            page1.visible = false;
-            page2.visible = false;
-            page3.visible = false;
-            page4.visible = true;
-            page5.visible = false;
-            page6.visible = false;
-        } else if (state == "page5") {
-            imageCube.state="image5";
-            page1Button.selected = false;
-            page2Button.selected = false;
-            page3Button.selected = false;
-            page4Button.selected = false;
-            page5Button.selected = true;
-            page6Button.selected = false;
-            page1.visible = false;
-            page2.visible = false;
-            page3.visible = false;
-            page4.visible = false;
-            page5.visible = true;
-            page6.visible = false;
-        } else if (state == "page6") {
-            imageCube.state="image6";
-            page1Button.selected = false;
-            page2Button.selected = false;
-            page3Button.selected = false;
-            page4Button.selected = false;
-            page5Button.selected = false;
-            page6Button.selected = true;
-            page1.visible = false;
-            page2.visible = false;
-            page3.visible = false;
-            page4.visible = false;
-            page5.visible = false;
-            page6.visible = true;
-        }
-    }
+    color: "#FCFCFC"
 
     Keys.onPressed: {
-        if (event.key == Qt.Key_1) state = 'page1';
-        else if (event.key == Qt.Key_2) state = 'page2';
-        else if (event.key == Qt.Key_3) state = 'page3';
-        else if (event.key == Qt.Key_4) state = 'page4';
-        else if (event.key == Qt.Key_5) state = 'page5';
-        else if (event.key == Qt.Key_6) state = 'page6';
+        if (event.key === Qt.Key_1) imageCube.state = 'image1';
+        else if (event.key === Qt.Key_2) imageCube.state = 'image2';
+        else if (event.key === Qt.Key_3) imageCube.state = 'image3';
+        else if (event.key === Qt.Key_4) imageCube.state = 'image4';
+        else if (event.key === Qt.Key_5) imageCube.state = 'image5';
+        else if (event.key === Qt.Key_6) imageCube.state = 'image6';
     }
 
     //! [0]
     ImageCube {
         id: imageCube
-        anchors.fill:parent
-        state: "image1"
+        width: 512 * (parent.width / 1280)
+        height: 512 * (parent.height / 768)
+        anchors.bottom: parent.bottom
+        anchors.right: parent.right
+        //! [0]
+        angleOffset: -180 / 8.0
+        backgroundColor: "#FCFCFC"
+        state: "image6"
         image1: "qrc:/textures/devices.png"
         image2: "qrc:/textures/iot.png"
         image3: "qrc:/textures/embedded.png"
         image4: "qrc:/textures/dataviz.jpg"
         image5: "qrc:/textures/multiscreen.png"
         image6: "qrc:/textures/puzzle-pieces.png"
+
+        onStateChanged: {
+            if (imageCube.state == "image1") {
+                page1Button.selected = true;
+                page2Button.selected = false;
+                page3Button.selected = false;
+                page4Button.selected = false;
+                page5Button.selected = false;
+                page6Button.selected = false;
+                info1.visible = true;
+                info2.visible = false;
+                info4.visible = false;
+                info3.visible = false;
+                info5.visible = false;
+                info6.visible = false;
+            } else if (imageCube.state == "image2") {
+                page1Button.selected = false;
+                page2Button.selected = true;
+                page3Button.selected = false;
+                page4Button.selected = false;
+                page5Button.selected = false;
+                page6Button.selected = false;
+                info1.visible = false;
+                info2.visible = true;
+                info4.visible = false;
+                info3.visible = false;
+                info5.visible = false;
+                info6.visible = false;
+            } else if (imageCube.state == "image3") {
+                page1Button.selected = false;
+                page2Button.selected = false;
+                page3Button.selected = true;
+                page4Button.selected = false;
+                page5Button.selected = false;
+                page6Button.selected = false;
+                info1.visible = false;
+                info2.visible = false;
+                info3.visible = true;
+                info4.visible = false;
+                info5.visible = false;
+                info6.visible = false;
+            } else if (imageCube.state == "image4") {
+                page1Button.selected = false;
+                page2Button.selected = false;
+                page3Button.selected = false;
+                page4Button.selected = true;
+                page5Button.selected = false;
+                page6Button.selected = false;
+                info1.visible = false;
+                info2.visible = false;
+                info3.visible = false;
+                info4.visible = true;
+                info5.visible = false;
+                info6.visible = false;
+            } else if (imageCube.state == "image5") {
+                page1Button.selected = false;
+                page2Button.selected = false;
+                page3Button.selected = false;
+                page4Button.selected = false;
+                page5Button.selected = true;
+                page6Button.selected = false;
+                info1.visible = false;
+                info2.visible = false;
+                info3.visible = false;
+                info4.visible = false;
+                info5.visible = true;
+                info6.visible = false;
+            } else if (imageCube.state == "image6") {
+                page1Button.selected = false;
+                page2Button.selected = false;
+                page3Button.selected = false;
+                page4Button.selected = false;
+                page5Button.selected = false;
+                page6Button.selected = true;
+                info1.visible = false;
+                info2.visible = false;
+                info3.visible = false;
+                info4.visible = false;
+                info5.visible = false;
+                info6.visible = true;
+            }
+        }
     }
-    //! [0]
 
     Rectangle {
         id: menuBar
@@ -180,8 +179,8 @@ Item {
             Navibutton {
                 id: page1Button
                 text: "Device Creation"
-                stateTarget: mainview
-                stateSelect: "page1"
+                stateTarget: imageCube
+                stateSelect: "image1"
                 Layout.minimumHeight:52
                 Layout.preferredHeight: 52
                 Layout.maximumHeight: 52
@@ -190,8 +189,8 @@ Item {
             Navibutton {
                 id: page2Button
                 text: "IoT"
-                stateTarget: mainview
-                stateSelect: "page2"
+                stateTarget: imageCube
+                stateSelect: "image2"
                 Layout.minimumHeight:52
                 Layout.preferredHeight: 52
                 Layout.maximumHeight: 52
@@ -200,8 +199,8 @@ Item {
             Navibutton {
                 id: page3Button
                 text: "Rapid Development"
-                stateTarget: mainview
-                stateSelect: "page3"
+                stateTarget: imageCube
+                stateSelect: "image3"
                 Layout.minimumHeight:52
                 Layout.preferredHeight: 52
                 Layout.maximumHeight: 52
@@ -210,8 +209,8 @@ Item {
             Navibutton {
                 id: page4Button
                 text: "Modern UX"
-                stateTarget: mainview
-                stateSelect: "page4"
+                stateTarget: imageCube
+                stateSelect: "image4"
                 Layout.minimumHeight:52
                 Layout.preferredHeight: 52
                 Layout.maximumHeight: 52
@@ -220,8 +219,8 @@ Item {
             Navibutton {
                 id: page5Button
                 text: "Cross Platform"
-                stateTarget: mainview
-                stateSelect: "page5"
+                stateTarget: imageCube
+                stateSelect: "image5"
                 Layout.minimumHeight:52
                 Layout.preferredHeight: 52
                 Layout.maximumHeight: 52
@@ -230,8 +229,8 @@ Item {
             Navibutton {
                 id: page6Button
                 text: "In the Box"
-                stateTarget: mainview
-                stateSelect: "page6"
+                stateTarget: imageCube
+                stateSelect: "image6"
                 Layout.minimumHeight:52
                 Layout.preferredHeight: 52
                 Layout.maximumHeight: 52
@@ -248,7 +247,7 @@ Item {
     }
 
     InfoSheet {
-        id: page1
+        id: info1
         width: parent.width
         anchors.top: separator.bottom
         anchors.left: parent.left
@@ -263,7 +262,7 @@ Item {
     }
 
     InfoSheet {
-        id: page2
+        id: info2
         visible: false
         width: parent.width
         anchors.top: separator.bottom
@@ -280,7 +279,7 @@ Item {
     }
 
     InfoSheet {
-        id: page3
+        id: info3
         visible: false
         width: parent.width
         anchors.top: separator.bottom
@@ -297,7 +296,7 @@ Item {
     }
 
     InfoSheet {
-        id: page4
+        id: info4
         visible: false
         width: parent.width
         anchors.top: separator.bottom
@@ -313,7 +312,7 @@ Item {
     }
 
     InfoSheet {
-        id: page5
+        id: info5
         visible: false
         width: parent.width
         anchors.top: separator.bottom
@@ -330,7 +329,7 @@ Item {
     }
 
     InfoSheet {
-        id: page6
+        id: info6
         visible: false
         width: parent.width
         anchors.top: separator.bottom
diff --git a/examples/canvas3d/threejs/oneqt/oneqt.qrc b/examples/canvas3d/canvas3d/threejs/oneqt/oneqt.qrc
index cc44d6d..bb641b2 100644
--- a/examples/canvas3d/threejs/oneqt/oneqt.qrc
+++ b/examples/canvas3d/canvas3d/threejs/oneqt/oneqt.qrc
@@ -14,5 +14,6 @@
         <file>textures/multiscreen.png</file>
         <file>textures/puzzle-pieces.png</file>
         <file>ImageCube.qml</file>
+        <file>SwipeArea.qml</file>
     </qresource>
 </RCC>
diff --git a/examples/canvas3d/threejs/oneqt/textures/dataviz.jpg b/examples/canvas3d/canvas3d/threejs/oneqt/textures/dataviz.jpg
index b680b85..b680b85 100644
--- a/examples/canvas3d/threejs/oneqt/textures/dataviz.jpg
+++ b/examples/canvas3d/canvas3d/threejs/oneqt/textures/dataviz.jpg
diff --git a/examples/canvas3d/threejs/oneqt/textures/devices.png b/examples/canvas3d/canvas3d/threejs/oneqt/textures/devices.png
index 6e537a9..6e537a9 100644
--- a/examples/canvas3d/threejs/oneqt/textures/devices.png
+++ b/examples/canvas3d/canvas3d/threejs/oneqt/textures/devices.png
diff --git a/examples/canvas3d/threejs/oneqt/textures/embedded.png b/examples/canvas3d/canvas3d/threejs/oneqt/textures/embedded.png
index cd77ead..cd77ead 100644
--- a/examples/canvas3d/threejs/oneqt/textures/embedded.png
+++ b/examples/canvas3d/canvas3d/threejs/oneqt/textures/embedded.png
diff --git a/examples/canvas3d/threejs/oneqt/textures/iot.png b/examples/canvas3d/canvas3d/threejs/oneqt/textures/iot.png
index cab216c..cab216c 100644
--- a/examples/canvas3d/threejs/oneqt/textures/iot.png
+++ b/examples/canvas3d/canvas3d/threejs/oneqt/textures/iot.png
diff --git a/examples/canvas3d/threejs/oneqt/textures/multiscreen.png b/examples/canvas3d/canvas3d/threejs/oneqt/textures/multiscreen.png
index 668d65d..668d65d 100644
--- a/examples/canvas3d/threejs/oneqt/textures/multiscreen.png
+++ b/examples/canvas3d/canvas3d/threejs/oneqt/textures/multiscreen.png
diff --git a/examples/canvas3d/threejs/oneqt/textures/puzzle-pieces.png b/examples/canvas3d/canvas3d/threejs/oneqt/textures/puzzle-pieces.png
index 9526256..9526256 100644
--- a/examples/canvas3d/threejs/oneqt/textures/puzzle-pieces.png
+++ b/examples/canvas3d/canvas3d/threejs/oneqt/textures/puzzle-pieces.png
diff --git a/examples/canvas3d/threejs/oneqt/textures/qtlogo.png b/examples/canvas3d/canvas3d/threejs/oneqt/textures/qtlogo.png
index f7276e2..f7276e2 100644
--- a/examples/canvas3d/threejs/oneqt/textures/qtlogo.png
+++ b/examples/canvas3d/canvas3d/threejs/oneqt/textures/qtlogo.png
diff --git a/examples/canvas3d/threejs/oneqt/textures/qtlogosmall.png b/examples/canvas3d/canvas3d/threejs/oneqt/textures/qtlogosmall.png
index 7d6772d..7d6772d 100644
--- a/examples/canvas3d/threejs/oneqt/textures/qtlogosmall.png
+++ b/examples/canvas3d/canvas3d/threejs/oneqt/textures/qtlogosmall.png
diff --git a/examples/canvas3d/canvas3d/threejs/planets/FpsDisplay.qml b/examples/canvas3d/canvas3d/threejs/planets/FpsDisplay.qml
new file mode 100644
index 0000000..c0dad19
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/FpsDisplay.qml
@@ -0,0 +1,101 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the QtCanvas3D module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** 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 http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: fpsDisplayControl
+    property bool hidden: true
+    property real fps: 0.0
+
+    onHiddenChanged: {
+        if (fpsDisplayControl.hidden)
+            fpsDisplay.color = "transparent";
+        else
+            fpsDisplay.color = "#000000FF";
+    }
+
+    onFpsChanged: {
+        fpsDisplay.updateFps();
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        id: fpsDisplay
+        color: "transparent"
+
+        property real maxFps: 60.0
+        property color maxFpsColor: "#00FF00"
+        property color minFpsColor: "#FF0000"
+
+        function updateFps() {
+            var scale = (fps > maxFps)?1.0:(fps/maxFps);
+            var r = (1 - scale) * minFpsColor.r + scale * maxFpsColor.r;
+            var g = (1 - scale) * minFpsColor.g + scale * maxFpsColor.g;
+            var b = (1 - scale) * minFpsColor.b + scale * maxFpsColor.b;
+            var a = (1 - scale) * minFpsColor.a + scale * maxFpsColor.a;
+            fpsCauge.height = scale * fpsDisplay.height;
+            fpsCauge.color = Qt.rgba(r,g,b,a);
+        }
+
+        Rectangle {
+            id: fpsCauge
+            width: parent.width
+            anchors.bottom: parent.bottom
+            visible: !fpsDisplayControl.hidden
+        }
+
+        Text {
+            id: fpsText
+            text: ""+(fps | 0)
+            font.family: "Helvetica"
+            font.pixelSize: 16
+            font.weight: Font.Light
+            color: "white"
+            anchors.fill: parent
+            verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: Text.AlignHCenter
+            visible: !fpsDisplayControl.hidden
+        }
+    }
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            fpsDisplayControl.hidden = !fpsDisplayControl.hidden;
+        }
+    }
+}
+
diff --git a/examples/canvas3d/canvas3d/threejs/planets/InfoSheet.qml b/examples/canvas3d/canvas3d/threejs/planets/InfoSheet.qml
new file mode 100644
index 0000000..6db7e53
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/InfoSheet.qml
@@ -0,0 +1,111 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the QtCanvas3D module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** 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 http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+    id: infoSheet
+
+    width: 200
+    height: 450
+    anchors.verticalCenter: parent.verticalCenter
+
+    property alias planet: planetText.planet
+    property alias radius: infoText.radius
+    property alias temperature: infoText.temperature
+    property alias orbitalPeriod: infoText.orbitalPeriod
+    property alias distance: infoText.distance
+    property alias exampleDetails: infoText.exampleDetails
+
+    Behavior on opacity { PropertyAnimation {} }
+
+    color: "black"
+
+    Text {
+        id: planetText
+        anchors.top: parent.top
+        anchors.topMargin: 20
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        property string planet: ""
+
+        font.family: "Helvetica"
+        font.pixelSize: 32
+        font.weight: Font.Light
+        color: "white"
+
+        text: "<p>" + planet + "</p>"
+
+    }
+
+    Text {
+        id: infoText
+        anchors.top: planetText.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        property string radius: ""
+        property string temperature: ""
+        property string orbitalPeriod: ""
+        property string distance: ""
+        property string exampleDetails: ""
+
+        font.family: "Helvetica"
+        font.pixelSize: 16
+        font.weight: Font.Light
+        lineHeight: 1.625 * 16
+        lineHeightMode: Text.FixedHeight
+        color: "white"
+
+        text: {
+            if (planet == "Solar System") {
+                "<p>" + exampleDetails + "</p>"
+            } else if (planet == "Sun") {
+                "<p>Equatorial Diameter:</p><p>" + radius + "</p></br>"
+                + "<p>Surface Temperature:</p><p>" + temperature + "</p>"
+            } else {
+                "<p>Equatorial Diameter:</p><p>" + radius + "</p></br>"
+                + "<p>Surface Temperature:</p><p>" + temperature + "</p></br>"
+                + "<p>Solar Orbit Period:</p><p>" + orbitalPeriod + "</p></br>"
+                + "<p>Distance from Sun:</p><p>" + distance + "</p>"
+            }
+        }
+
+        onLinkActivated: Qt.openUrlExternally(link);
+
+    }
+
+}
+
diff --git a/examples/canvas3d/canvas3d/threejs/planets/PlanetButton.qml b/examples/canvas3d/canvas3d/threejs/planets/PlanetButton.qml
new file mode 100644
index 0000000..a518859
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/PlanetButton.qml
@@ -0,0 +1,89 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the QtCanvas3D module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** 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 http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+
+    id: planetButton
+    property alias text: planetText.text
+    property alias source: planetImage.source
+    property alias focusPlanet: planetImage.focusPlanet
+    property Item planetSelector: parent.parent
+    property int buttonSize: 70
+
+    width: buttonSize; height: buttonSize
+    color: "transparent"
+
+    Image {
+        id: planetImage
+        anchors.fill: parent
+        property int focusPlanet
+
+        MouseArea {
+            anchors.fill: parent
+            hoverEnabled: true
+            onClicked: { planetSelector.focusedPlanet = focusPlanet; }
+            onEntered: PropertyAnimation { target: planetText; property: "opacity"; to: 1 }
+            onExited: PropertyAnimation { target: planetText;
+                property: "opacity";
+                to: {
+                    if (planetText.text != "Solar System")
+                       0
+                    else
+                       1
+                }
+            }
+        }
+    }
+
+    Text {
+        id: planetText
+        anchors.centerIn: parent
+        font.family: "Helvetica"
+        font.pixelSize: 16
+        font.weight: Font.Light
+        color: "white"
+        opacity: {
+            if (text == "Solar System") {
+                opacity = 1;
+            } else {
+                opacity = 0;
+            }
+        }
+    }
+
+}
diff --git a/examples/canvas3d/canvas3d/threejs/planets/StyledSlider.qml b/examples/canvas3d/canvas3d/threejs/planets/StyledSlider.qml
new file mode 100644
index 0000000..1601dd3
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/StyledSlider.qml
@@ -0,0 +1,69 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the QtCanvas3D module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** 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 http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.3
+
+Slider {
+    id: styledSlider
+
+    style: SliderStyle {
+        groove: Rectangle {
+            implicitWidth: 200
+            implicitHeight: 5
+            color: "#5d5b59"
+            Rectangle {
+                anchors.verticalCenter: parent.verticalCenter
+                width: styleData.handlePosition
+                height: 5
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: "#80c342" }
+                    GradientStop { position: 1.0; color: "#328930" }
+                }
+            }
+        }
+        handle: Rectangle {
+            anchors.centerIn: parent
+            color: "#aeadac"
+            border.color: "#1e1b18"
+            border.width: 1
+            implicitWidth: 8
+            implicitHeight: 20
+        }
+    }
+}
+
diff --git a/examples/canvas3d/canvas3d/threejs/planets/doc/images/planets-example.jpg b/examples/canvas3d/canvas3d/threejs/planets/doc/images/planets-example.jpg
new file mode 100644
index 0000000..7177c27
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/doc/images/planets-example.jpg
diff --git a/examples/canvas3d/canvas3d/threejs/planets/doc/src/planets.qdoc b/examples/canvas3d/canvas3d/threejs/planets/doc/src/planets.qdoc
new file mode 100644
index 0000000..cbadcbb
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/doc/src/planets.qdoc
@@ -0,0 +1,126 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the QtCanvas3D module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** 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 http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $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.
+
+*/
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/earth.png b/examples/canvas3d/canvas3d/threejs/planets/images/earth.png
new file mode 100644
index 0000000..7bfef7c
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/earth.png
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/earthbump1k.jpg b/examples/canvas3d/canvas3d/threejs/planets/images/earthbump1k.jpg
new file mode 100644
index 0000000..11690de
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/earthbump1k.jpg
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/earthcloudmapcolortrans.png b/examples/canvas3d/canvas3d/threejs/planets/images/earthcloudmapcolortrans.png
new file mode 100644
index 0000000..ee2a897
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/earthcloudmapcolortrans.png
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/earthmap1k.jpg b/examples/canvas3d/canvas3d/threejs/planets/images/earthmap1k.jpg
new file mode 100644
index 0000000..e1de9d3
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/earthmap1k.jpg
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/earthspec1k.jpg b/examples/canvas3d/canvas3d/threejs/planets/images/earthspec1k.jpg
new file mode 100644
index 0000000..3de6fe7
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/earthspec1k.jpg
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/galaxy_starfield.png b/examples/canvas3d/canvas3d/threejs/planets/images/galaxy_starfield.png
new file mode 100644
index 0000000..67d808a
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/galaxy_starfield.png
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/jupiter.png b/examples/canvas3d/canvas3d/threejs/planets/images/jupiter.png
new file mode 100644
index 0000000..b0cc4cf
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/jupiter.png
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/jupitermap.jpg b/examples/canvas3d/canvas3d/threejs/planets/images/jupitermap.jpg
new file mode 100644
index 0000000..69107df
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/jupitermap.jpg
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/mars.png b/examples/canvas3d/canvas3d/threejs/planets/images/mars.png
new file mode 100644
index 0000000..187560b
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/mars.png
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/marsbump1k.jpg b/examples/canvas3d/canvas3d/threejs/planets/images/marsbump1k.jpg
new file mode 100644
index 0000000..1e13120
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/marsbump1k.jpg
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/marsmap1k.jpg b/examples/canvas3d/canvas3d/threejs/planets/images/marsmap1k.jpg
new file mode 100644
index 0000000..64ebc53
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/marsmap1k.jpg
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/mercury.png b/examples/canvas3d/canvas3d/threejs/planets/images/mercury.png
new file mode 100644
index 0000000..418d49f
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/mercury.png
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/mercurybump.jpg b/examples/canvas3d/canvas3d/threejs/planets/images/mercurybump.jpg
new file mode 100644
index 0000000..c23dd31
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/mercurybump.jpg
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/mercurymap.jpg b/examples/canvas3d/canvas3d/threejs/planets/images/mercurymap.jpg
new file mode 100644
index 0000000..9bb2c0b
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/mercurymap.jpg
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/moonbump1k.jpg b/examples/canvas3d/canvas3d/threejs/planets/images/moonbump1k.jpg
new file mode 100644
index 0000000..f5368ba
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/moonbump1k.jpg
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/moonmap1k.jpg b/examples/canvas3d/canvas3d/threejs/planets/images/moonmap1k.jpg
new file mode 100644
index 0000000..509d3f5
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/moonmap1k.jpg
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/neptune.png b/examples/canvas3d/canvas3d/threejs/planets/images/neptune.png
new file mode 100644
index 0000000..07794c6
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/neptune.png
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/neptunemap.jpg b/examples/canvas3d/canvas3d/threejs/planets/images/neptunemap.jpg
new file mode 100644
index 0000000..0d0d3f0
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/neptunemap.jpg
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/plutobump1k.jpg b/examples/canvas3d/canvas3d/threejs/planets/images/plutobump1k.jpg
new file mode 100644
index 0000000..8128029
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/plutobump1k.jpg
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/plutomap1k.jpg b/examples/canvas3d/canvas3d/threejs/planets/images/plutomap1k.jpg
new file mode 100644
index 0000000..d18bf9f
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/plutomap1k.jpg
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/saturn.png b/examples/canvas3d/canvas3d/threejs/planets/images/saturn.png
new file mode 100644
index 0000000..003363c
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/saturn.png
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/saturnmap.jpg b/examples/canvas3d/canvas3d/threejs/planets/images/saturnmap.jpg
new file mode 100644
index 0000000..767be39
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/saturnmap.jpg
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/saturnringcolortrans.png b/examples/canvas3d/canvas3d/threejs/planets/images/saturnringcolortrans.png
new file mode 100644
index 0000000..6a5e457
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/saturnringcolortrans.png
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/sun.png b/examples/canvas3d/canvas3d/threejs/planets/images/sun.png
new file mode 100644
index 0000000..9a62c5f
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/sun.png
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/sunmap.jpg b/examples/canvas3d/canvas3d/threejs/planets/images/sunmap.jpg
new file mode 100644
index 0000000..3e0b520
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/sunmap.jpg
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/uranus.png b/examples/canvas3d/canvas3d/threejs/planets/images/uranus.png
new file mode 100644
index 0000000..8678b9a
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/uranus.png
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/uranusmap.jpg b/examples/canvas3d/canvas3d/threejs/planets/images/uranusmap.jpg
new file mode 100644
index 0000000..aad43fb
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/uranusmap.jpg
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/uranusringcolortrans.png b/examples/canvas3d/canvas3d/threejs/planets/images/uranusringcolortrans.png
new file mode 100644
index 0000000..28ef9ba
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/uranusringcolortrans.png
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/venus.png b/examples/canvas3d/canvas3d/threejs/planets/images/venus.png
new file mode 100644
index 0000000..fdbb45d
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/venus.png
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/venusbump.jpg b/examples/canvas3d/canvas3d/threejs/planets/images/venusbump.jpg
new file mode 100644
index 0000000..551bbd3
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/venusbump.jpg
diff --git a/examples/canvas3d/canvas3d/threejs/planets/images/venusmap.jpg b/examples/canvas3d/canvas3d/threejs/planets/images/venusmap.jpg
new file mode 100644
index 0000000..699f280
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/images/venusmap.jpg
diff --git a/examples/canvas3d/canvas3d/threejs/planets/main.cpp b/examples/canvas3d/canvas3d/threejs/planets/main.cpp
new file mode 100644
index 0000000..59b10c6
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/main.cpp
@@ -0,0 +1,65 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the QtCanvas3D module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** 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 http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QtGui/QGuiApplication>
+#include <QtCore/QDir>
+#include <QtQuick/QQuickView>
+#include <QtQml/QQmlEngine>
+
+int main(int argc, char *argv[])
+{
+    QGuiApplication app(argc, argv);
+
+    QQuickView viewer;
+
+    // The following are needed to make examples run without having to install the module
+    // in desktop environments.
+#ifdef Q_OS_WIN
+    QString extraImportPath(QStringLiteral("%1/../../../../%2"));
+#else
+    QString extraImportPath(QStringLiteral("%1/../../../%2"));
+#endif
+    viewer.engine()->addImportPath(extraImportPath.arg(QGuiApplication::applicationDirPath(),
+                                                       QString::fromLatin1("qml")));
+
+    viewer.setSource(QUrl("qrc:/planets.qml"));
+
+    viewer.setTitle(QStringLiteral("Qt Canvas 3D Examples - Planets"));
+    viewer.setResizeMode(QQuickView::SizeRootObjectToView);
+    viewer.show();
+
+    return app.exec();
+}
diff --git a/examples/canvas3d/canvas3d/threejs/planets/planets.js b/examples/canvas3d/canvas3d/threejs/planets/planets.js
new file mode 100644
index 0000000..79c3933
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/planets.js
@@ -0,0 +1,681 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the QtCanvas3D module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** 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 http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+Qt.include("three.js")
+Qt.include("threex.planets.js")
+
+var SUN = 0;
+var MERCURY = 1;
+var VENUS = 2;
+var EARTH = 3;
+var MARS = 4;
+var JUPITER = 5;
+var SATURN = 6;
+var URANUS = 7;
+var NEPTUNE = 8;
+var NUM_SELECTABLE_PLANETS = 9;
+var MOON = 9;
+var SOLAR_SYSTEM = 100;
+
+var camera, scene, renderer;
+var planetCanvas, mouse, raycaster;
+
+var daysPerFrame;
+var daysPerFrameScale;
+var planetScale;
+var cameraDistance;
+
+var objects = []; // Planet objects
+var planets = []; // Planet data info
+
+var commonGeometry;
+var solarDistance = 2600000;
+var saturnOuterRadius = 120.700;
+var uranusOuterRadius = 40;
+
+var qmlView;
+
+var oldFocusedPlanetPosition;
+var oldCameraPosition;
+var defaultCameraPosition;
+
+var y = 2000;
+var m = 1;
+var D = 1;
+// Time scale formula based on http://www.stjarnhimlen.se/comp/ppcomp.html
+var startD = 367 * y - 7 * (y + (m + 9) / 12) / 4 + 275 * m / 9 + D - 730530;
+var oldTimeD = startD;
+var currTimeD = startD;
+
+var auScale = 149597.870700; // AU in thousands of kilometers
+
+var focusedScaling = false;
+var focusedMinimumScale = 20;
+var actualScale;
+
+function initializeGL(canvas, eventSource, mainView) {
+
+    planetCanvas = canvas;
+    qmlView = mainView;
+
+    camera = new THREE.PerspectiveCamera(45, canvas.width / canvas.height, 2500000, 20000000);
+    defaultCameraPosition = new THREE.Vector3(solarDistance, solarDistance, solarDistance);
+    camera.position.set(defaultCameraPosition.x, defaultCameraPosition.y, defaultCameraPosition.z);
+
+    scene = new THREE.Scene();
+
+    var starSphere = THREEx.Planets.createStarfield(8500000);
+    scene.add(starSphere);
+
+    var light = new THREE.PointLight(0x777777, 2);
+    light.position.set(0, 0, 0);
+    scene.add(light);
+
+    scene.add(new THREE.AmbientLight(0x111111));
+
+    loadPlanetData();
+    createPlanets();
+    setScale(1200);
+
+    camera.lookAt(objects[0].position); // look at the Sun
+
+    raycaster = new THREE.Raycaster();
+    mouse = new THREE.Vector2();
+
+    renderer = new THREE.Canvas3DRenderer(
+                { canvas: canvas, antialias: true, devicePixelRatio: canvas.devicePixelRatio });
+
+    renderer.setPixelRatio(canvas.devicePixelRatio);
+    renderer.setSize(canvas.width, canvas.height);
+    //! [5]
+    eventSource.mouseDown.connect(onDocumentMouseDown);
+    //! [5]
+}
+
+function loadPlanetData() {
+
+    // Planet Data
+    // radius - planet radius
+    // tilt - planet axis angle
+    // N1/2 - longitude of the ascending node
+    // i1/2 - inclination to the ecliptic (plane of the Earth's orbit)
+    // w1/2 - argument of perihelion
+    // a1/2 - semi-major axis, or mean distance from Sun
+    // e1/2 - eccentricity (0=circle, 0-1=ellipse, 1=parabola)
+    // M1/2 - mean anomaly (0 at perihelion; increases uniformly with time)
+    // period - sidereal rotation period
+    // centerOfOrbit - the planet in the center of the orbit
+    // (orbital elements based on http://www.stjarnhimlen.se/comp/ppcomp.html)
+
+    var sun = { radius: 694.439, tilt: 63.87, period: 25.05 };
+    planets.push(sun);
+    var mercury = {
+        radius: 2.433722, tilt: 0.04, N1: 48.3313, N2: 0.0000324587,
+        i1: 7.0047, i2: 0.0000000500, w1: 29.1241, w2: 0.0000101444,
+        a1: 0.387098, a2: 0, e1: 0.205635, e2: 0.000000000559,
+        M1: 168.6562, M2: 4.0923344368, period: 58.646,
+        centerOfOrbit: SUN
+    };
+    planets.push(mercury);
+    var venus = {
+        radius: 6.046079, tilt: 177.36, N1: 76.6799, N2: 0.0000246590,
+        i1: 3.3946, i2: 0.0000000275, w1: 54.8910, w2: 0.0000138374,
+        a1: 0.723330, a2: 0, e1: 0.006773, e2: -0.000000001302,
+        M1: 48.0052, M2: 1.6021302244, period: 243.0185,
+        centerOfOrbit: SUN
+    };
+    planets.push(venus);
+    var earth = {
+        radius: 6.371, tilt: 25.44, N1: 174.873, N2: 0,
+        i1: 0.00005, i2: 0, w1: 102.94719, w2: 0,
+        a1: 1, a2: 0, e1: 0.01671022, e2: 0,
+        M1: 357.529, M2: 0.985608, period: 0.997,
+        centerOfOrbit: SUN
+    };
+    planets.push(earth);
+    var mars = {
+        radius: 3.389372, tilt: 25.19, N1: 49.5574, N2: 0.0000211081,
+        i1: 1.8497, i2: -0.0000000178, w1: 286.5016, w2: 0.0000292961,
+        a1: 1.523688, a2: 0, e1: 0.093405, e2: 0.000000002516,
+        M1: 18.6021, M2: 0.5240207766, period: 1.025957,
+        centerOfOrbit: SUN
+    };
+    planets.push(mars);
+    var jupiter = {
+        radius: 71.41254, tilt: 3.13, N1: 100.4542, N2: 0.0000276854,
+        i1: 1.3030, i2: -0.0000001557, w1: 273.8777, w2: 0.0000164505,
+        a1: 5.20256, a2: 0, e1: 0.048498, e2: 0.000000004469,
+        M1: 19.8950, M2: 0.0830853001, period: 0.4135,
+        centerOfOrbit: SUN
+    };
+    planets.push(jupiter);
+    var saturn = {
+        radius: 60.19958, tilt: 26.73, N1: 113.6634, N2: 0.0000238980,
+        i1: 2.4886, i2: -0.0000001081, w1: 339.3939, w2: 0.0000297661,
+        a1: 9.55475, a2: 0, e1: 0.055546, e2: -0.000000009499,
+        M1: 316.9670, M2: 0.0334442282, period: 0.4395,
+        centerOfOrbit: SUN
+    };
+    planets.push(saturn);
+    var uranus = {
+        radius: 25.5286, tilt: 97.77, N1: 74.0005, N2: 0.000013978,
+        i1: 0.7733, i2: 0.000000019, w1: 96.6612, w2: 0.000030565,
+        a1: 19.18171, a2: -0.0000000155, e1: 0.047318, e2: 0.00000000745,
+        M1: 142.5905, M2: 0.011725806, period: 0.71833,
+        centerOfOrbit: SUN
+    };
+    planets.push(uranus);
+    var neptune = {
+        radius: 24.73859, tilt: 28.32, N1: 131.7806, N2: 0.000030173,
+        i1: 1.7700, i2: -0.000000255, w1: 272.8461, w2: 0.000006027,
+        a1: 30.05826, a2: 0.00000003313, e1: 0.008606, e2: 0.00000000215,
+        M1: 260.2471, M2: 0.005995147, period: 0.6713,
+        centerOfOrbit: SUN
+    };
+    planets.push(neptune);
+    var moon = {
+        radius: 1.5424, tilt: 28.32, N1: 125.1228, N2: -0.0529538083,
+        i1: 5.1454, i2: 0, w1: 318.0634, w2: 0.1643573223,
+        a1: 0.273, a2: 0, e1: 0.054900, e2: 0,
+        M1: 115.3654, M2: 13.0649929509, period: 27.321582,
+        centerOfOrbit: EARTH
+    };
+    planets.push(moon);
+
+}
+
+function createPlanets() {
+
+    objects = [];
+
+    commonGeometry = new THREE.SphereGeometry(1, 64, 64);
+    var ringSegments = 70;
+    var mesh, innerRadius, outerRadius, ring;
+
+    for (var i = 0; i < planets.length; i ++) {
+        switch (i) {
+        case SUN:
+            mesh = createSun(planets[i]["radius"]);
+            mesh.position.set(0, 0, 0);
+            break;
+        case MERCURY:
+            mesh = createPlanet(planets[i]["radius"], 0.005, 'qrc:/images/mercurymap.jpg',
+                                'qrc:/images/mercurybump.jpg');
+            break;
+        case VENUS:
+            mesh = createPlanet(planets[i]["radius"], 0.005, 'qrc:/images/venusmap.jpg',
+                                'qrc:/images/venusbump.jpg');
+            break;
+        case EARTH:
+            mesh = createPlanet(planets[i]["radius"], 0.05, 'qrc:/images/earthmap1k.jpg',
+                                'qrc:/images/earthbump1k.jpg', 'qrc:/images/earthspec1k.jpg');
+            var cloud = createEarthCloud();
+            mesh.add(cloud);
+            break;
+        case MARS:
+            mesh = createPlanet(planets[i]["radius"], 0.05, 'qrc:/images/marsmap1k.jpg',
+                                'qrc:/images/marsbump1k.jpg');
+            break;
+        case JUPITER:
+            mesh = createPlanet(planets[i]["radius"], 0.02, 'qrc:/images/jupitermap.jpg',
+                                'qrc:/images/jupitermap.jpg');
+            break;
+        case SATURN:
+            mesh = createPlanet(planets[i]["radius"], 0.05, 'qrc:/images/saturnmap.jpg',
+                                'qrc:/images/saturnmap.jpg');
+            innerRadius = (planets[i]["radius"] + 6.630) / planets[i]["radius"];
+            outerRadius = (planets[i]["radius"] + saturnOuterRadius) / planets[i]["radius"];
+            ring = createRing(innerRadius, outerRadius, ringSegments,
+                                  'qrc:images/saturnringcolortrans.png');
+            ring.receiveShadow = true;
+            ring.castShadow = true;
+            mesh.add(ring);
+            break;
+        case URANUS:
+            mesh = createPlanet(planets[i]["radius"], 0.05, 'qrc:/images/uranusmap.jpg',
+                                'qrc:/images/uranusmap.jpg');
+            innerRadius = (planets[i]["radius"] + 2) / planets[i]["radius"];
+            outerRadius = (planets[i]["radius"] + uranusOuterRadius) / planets[i]["radius"];
+            ring = createRing(innerRadius, outerRadius, ringSegments,
+                                  'qrc:images/uranusringcolortrans.png');
+            ring.receiveShadow = true;
+            ring.castShadow = true;
+            mesh.add(ring);
+            break;
+        case NEPTUNE:
+            mesh = createPlanet(planets[i]["radius"], 0.05, 'qrc:/images/neptunemap.jpg',
+                                'qrc:/images/neptunemap.jpg');
+            break;
+        case MOON:
+            mesh = createPlanet(planets[i]["radius"], 0.05, 'qrc:/images/moonmap1k.jpg',
+                                'qrc:/images/moonbump1k.jpg');
+            break;
+        }
+
+        objects.push(mesh);
+        scene.add(mesh);
+    }
+
+}
+
+function createSun(radius) {
+
+    var texture = THREE.ImageUtils.loadTexture('qrc:/images/sunmap.jpg');
+    var material = new THREE.MeshBasicMaterial({
+                                                   map: texture,
+                                                   bumpMap: texture,
+                                                   bumpScale: 0.05
+                                               });
+    var mesh = new THREE.Mesh(commonGeometry, material);
+    mesh.scale.set(radius, radius, radius);
+
+    mesh.receiveShadow = false;
+    mesh.castShadow = false;
+
+    return mesh;
+}
+
+function createPlanet(radius, scale, mapTexture, bumpTexture, specularTexture) {
+
+    var material = new THREE.MeshPhongMaterial({
+                                                   map: THREE.ImageUtils.loadTexture(mapTexture),
+                                                   bumpMap: THREE.ImageUtils.loadTexture(bumpTexture),
+                                                   bumpScale: scale
+                                               });
+
+    if (specularTexture) {
+        material.specularMap = THREE.ImageUtils.loadTexture(specularTexture);
+        material.specular = new THREE.Color('grey');
+        material.shininess = 50.0;
+    } else {
+        material.shininess = 1.0;
+    }
+
+    var mesh = new THREE.Mesh(commonGeometry, material);
+    mesh.scale.set(radius, radius, radius);
+
+    return mesh;
+
+}
+
+function createEarthCloud() {
+
+    var material = new THREE.MeshPhongMaterial({
+                                                   map: THREE.ImageUtils.loadTexture('qrc:images/earthcloudmapcolortrans.png'),
+                                                   side: THREE.DoubleSide,
+                                                   transparent: true,
+                                                   opacity: 0.8
+                                               });
+    var mesh = new THREE.Mesh(commonGeometry, material);
+
+    return mesh;
+
+}
+
+function createRing(radius, width, height, texture) {
+
+    var geometry = new THREEx.Planets._RingGeometry(radius, width, height);
+    var material = new THREE.MeshPhongMaterial({
+                                                   map: THREE.ImageUtils.loadTexture(texture),
+                                                   side: THREE.DoubleSide,
+                                                   transparent: true,
+                                                   opacity: 0.8
+                                               });
+    material.map.minFilter = THREE.NearestFilter;
+    var mesh = new THREE.Mesh(geometry, material);
+    mesh.lookAt(new THREE.Vector3(0, 90, 0));
+
+    return mesh;
+
+}
+
+function createStarfield(radius) {
+
+    var texture = THREE.ImageUtils.loadTexture('qrc:/images/galaxy_starfield.png')
+    var material = new THREE.MeshBasicMaterial({
+                                                   map: texture,
+                                                   side: THREE.BackSide
+                                               })
+    var geometry = new THREE.SphereGeometry(radius, 32, 32)
+    var mesh = new THREE.Mesh(geometry, material)
+
+    return mesh
+
+}
+
+function onResizeGL(canvas) {
+
+    if (camera === undefined) return;
+
+    camera.aspect = canvas.width / canvas.height;
+    camera.updateProjectionMatrix();
+    renderer.setPixelRatio(canvas.devicePixelRatio);
+    renderer.setSize(canvas.width, canvas.height);
+
+}
+
+function onSpeedChanged(value) {
+
+    daysPerFrameScale = value;
+
+}
+
+function setScale(value, focused) {
+
+    // Save actual scale in focus mode
+    if (!focused)
+        actualScale = value;
+
+    // Limit minimum scaling in focus mode to avoid jitter caused by rounding errors
+    if (value <= focusedMinimumScale && (focusedScaling || focused)) {
+        planetScale = focusedMinimumScale;
+    } else {
+        planetScale = actualScale;
+    }
+
+    for (var i = 0; i < objects.length; i++) {
+        var object = objects[i];
+        // first reset scale
+        object.scale.set(planets[i]["radius"], planets[i]["radius"], planets[i]["radius"]);
+        if (i === SUN) {
+            object.scale.multiplyScalar(planetScale / 100);
+        } else {
+            object.scale.multiplyScalar(planetScale);
+        }
+    }
+
+}
+
+function setOldPlanet() {
+
+    oldCameraPosition = camera.position.clone();
+
+    var planet = 0;
+    if (qmlView.oldPlanet !== SOLAR_SYSTEM)
+        planet = qmlView.oldPlanet;
+    oldFocusedPlanetPosition = objects[planet].position.clone();
+    qmlView.oldPlanet = qmlView.focusedPlanet;
+
+    if (qmlView.focusedPlanet !== SOLAR_SYSTEM && actualScale <= focusedMinimumScale) {
+        // Limit minimum scaling in focus mode to avoid jitter caused by rounding errors
+        planetScale = focusedMinimumScale;
+        setScale(focusedMinimumScale, true);
+        focusedScaling = true;
+    } else if (focusedScaling === true) {
+        // Restore normal scaling
+        focusedScaling = false;
+        setScale(actualScale);
+    }
+
+}
+
+function setCameraDistance(distance) {
+
+    cameraDistance = distance;
+
+}
+
+function setLookAtOffset() {
+
+    var offset = oldFocusedPlanetPosition.clone();
+
+    var planet = 0;
+    if (qmlView.focusedPlanet !== SOLAR_SYSTEM)
+        planet = qmlView.oldPlanet;
+
+    var focusedPlanetPosition = objects[planet].position.clone();
+    offset.sub(focusedPlanetPosition);
+
+    qmlView.xLookAtOffset = offset.x;
+    qmlView.yLookAtOffset = offset.y;
+    qmlView.zLookAtOffset = offset.z;
+
+}
+
+function setCameraOffset() {
+
+    var offset = oldCameraPosition.clone();
+
+    var planet = 0;
+    if (qmlView.focusedPlanet !== SOLAR_SYSTEM)
+        planet = qmlView.focusedPlanet;
+
+    var newCameraPosition = getNewCameraPosition(getOuterRadius(planet));
+
+    if (qmlView.focusedPlanet !== SUN)
+        offset.sub(newCameraPosition);
+
+    if (qmlView.focusedPlanet === SUN && qmlView.oldPlanet === SOLAR_SYSTEM) {
+        qmlView.xCameraOffset = Math.abs(offset.x);
+        qmlView.yCameraOffset = Math.abs(offset.y);
+        qmlView.zCameraOffset = Math.abs(offset.z);
+    } else { // from a planet to another
+        qmlView.xCameraOffset = offset.x;
+        qmlView.yCameraOffset = offset.y;
+        qmlView.zCameraOffset = offset.z;
+    }
+
+}
+
+function getNewCameraPosition( radius ) {
+
+    var position;
+    if (qmlView.focusedPlanet === SOLAR_SYSTEM) {
+        position = defaultCameraPosition.clone();
+        position.multiplyScalar(cameraDistance);
+    } else if (qmlView.focusedPlanet === SUN) {
+        position = new THREE.Vector3(radius * planetScale * 2,
+                                     radius * planetScale * 2,
+                                     radius * planetScale * 2);
+        position.multiplyScalar(cameraDistance);
+
+    } else {
+        var vec1 = objects[qmlView.focusedPlanet].position.clone();
+        var vec2 = new THREE.Vector3(0, 1, 0);
+        vec1.normalize();
+        vec2.cross(vec1);
+        vec2.multiplyScalar(radius * planetScale * cameraDistance * 4);
+        vec2.add(objects[qmlView.focusedPlanet].position);
+        vec1.set(0, radius * planetScale, 0);
+        vec2.add(vec1);
+        position = vec2;
+    }
+    return position;
+}
+
+function onDocumentMouseDown(x, y) {
+
+    // Mouse selection for planets and Solar system, not for the Moon
+
+    mouse.set((x / planetCanvas.width) * 2 - 1, - (y / planetCanvas.height ) * 2 + 1);
+
+    raycaster.setFromCamera(mouse, camera);
+
+    var intersects = raycaster.intersectObjects(objects);
+    var selectedPlanet;
+
+    if (intersects.length > 0) {
+        var intersect = intersects[0];
+
+        var i = 0;
+        while (i < objects.length - 1) {
+            if (intersect.object === objects[i]) {
+                selectedPlanet = i;
+                break;
+            }
+            i++;
+        }
+        if (selectedPlanet < NUM_SELECTABLE_PLANETS) {
+            qmlView.focusedPlanet = selectedPlanet;
+            // Limit minimum scaling in focus mode to avoid jitter caused by rounding errors
+            if (actualScale <= focusedMinimumScale) {
+                planetScale = focusedMinimumScale;
+                setScale(focusedMinimumScale, true);
+            }
+            focusedScaling = true;
+        }
+    } else {
+        qmlView.focusedPlanet = SOLAR_SYSTEM;
+        // Restore normal scaling
+        if (focusedScaling === true) {
+            focusedScaling = false;
+            setScale(actualScale);
+        }
+    }
+
+}
+
+function paintGL(canvas) {
+
+    if (qmlView.focusedPlanet === SOLAR_SYSTEM)
+        daysPerFrame = daysPerFrameScale * 10;
+    else
+        daysPerFrame = daysPerFrameScale * planets[qmlView.focusedPlanet]["period"] / 100;
+
+    // Advance the time in days
+    oldTimeD = currTimeD;
+    currTimeD = currTimeD + daysPerFrame;
+    var deltaTimeD = currTimeD - oldTimeD;
+
+    // Position the planets orbiting the sun
+    for (var i = 1; i < objects.length; i ++) {
+        var object = objects[i];
+        var planet = planets[i];
+
+        // Bumpmaps of mercury, venus, jupiter and moon need special handling
+        if (i == MERCURY || i == VENUS || i == JUPITER || i == MOON)
+            object.material.bumpScale = 0.03 * planetScale;
+        else
+            object.material.bumpScale = 0.3 * planetScale;
+
+        // Calculate the planet orbital elements from the current time in days
+        var N =  (planet["N1"] + planet["N2"] * currTimeD) * Math.PI / 180;
+        var iPlanet = (planet["i1"] + planet["i2"] * currTimeD) * Math.PI / 180;
+        var w =  (planet["w1"] + planet["w2"] * currTimeD) * Math.PI / 180;
+        var a = planet["a1"] + planet["a2"] * currTimeD;
+        var e = planet["e1"] + planet["e2"] * currTimeD;
+        var M = (planet["M1"] + planet["M2"] * currTimeD) * Math.PI / 180;
+        var E = M + e * Math.sin(M) * (1.0 + e * Math.cos(M));
+
+        var xv = a * (Math.cos(E) - e);
+        var yv = a * (Math.sqrt(1.0 - e * e) * Math.sin(E));
+        var v = Math.atan2(yv, xv);
+
+        // Calculate the distance (radius)
+        var r = Math.sqrt(xv * xv + yv * yv);
+
+        // From http://www.davidcolarusso.com/astro/
+        // Modified to compensate for the right handed coordinate system of OpenGL
+        var xh = r * (Math.cos(N) * Math.cos(v + w)
+                      - Math.sin(N) * Math.sin(v + w) * Math.cos(iPlanet));
+        var zh = -r * (Math.sin(N) * Math.cos(v + w)
+                       + Math.cos(N) * Math.sin(v + w) * Math.cos(iPlanet));
+        var yh = r * (Math.sin(w + v) * Math.sin(iPlanet));
+
+        // Apply the position offset from the center of orbit to the bodies
+        var centerOfOrbit = objects[planet["centerOfOrbit"]];
+        object.position.set(centerOfOrbit.position.x + xh * auScale,
+                            centerOfOrbit.position.y + yh * auScale,
+                            centerOfOrbit.position.z + zh * auScale);
+
+        // Calculate and apply the appropriate axis tilt to the bodies
+        // and rotate them around the axis
+        var radians = planet["tilt"] * Math.PI / 180; // tilt in radians
+        object.rotation.order = 'ZXY';
+        object.rotation.x = 0;
+        object.rotation.y += (deltaTimeD / planet["period"]) * 2 * Math.PI;
+        object.rotation.z = radians;
+        object.updateMatrix();
+
+    }
+
+    // rotate the Sun
+    var sun = objects[SUN];
+    sun.rotation.order = 'ZXY';
+    sun.rotation.x = 0;
+    sun.rotation.y += (deltaTimeD / planets[SUN]["period"]) * 2 * Math.PI;
+    sun.rotation.z = planets[SUN]["tilt"] * Math.PI / 180; // tilt in radians
+    sun.updateMatrix();
+
+    // calculate the outer radius of the focused item
+    var outerRadius = getOuterRadius(qmlView.focusedPlanet);
+
+    // get the appropriate near plane position for the camera and animate it with QML animations
+    qmlView.cameraNear = outerRadius;
+
+    camera.near = qmlView.cameraNear;
+    camera.updateProjectionMatrix();
+
+    // Calculate and set camera position
+    var cameraPosition = getNewCameraPosition(outerRadius);
+    var cameraOffset = new THREE.Vector3(qmlView.xCameraOffset,
+                                         qmlView.yCameraOffset,
+                                         qmlView.zCameraOffset);
+    cameraPosition.add(cameraOffset);
+    camera.position.set(cameraPosition.x, cameraPosition.y, cameraPosition.z);
+
+    // Calculate and set camera look-at point
+    var lookAtPlanet = SUN;
+    if (qmlView.focusedPlanet !== SOLAR_SYSTEM)
+        lookAtPlanet = qmlView.focusedPlanet;
+    var cameraLookAt = objects[lookAtPlanet].position.clone();
+    var lookAtOffset = new THREE.Vector3(qmlView.xLookAtOffset,
+                                         qmlView.yLookAtOffset,
+                                         qmlView.zLookAtOffset);
+    cameraLookAt.add(lookAtOffset);
+    camera.lookAt(cameraLookAt);
+
+    // Render the scene
+    renderer.render(scene, camera);
+
+}
+
+function getOuterRadius( planet ) {
+
+    var outerRadius = solarDistance;
+    if (planet !== SOLAR_SYSTEM) {
+        outerRadius = planets[planet]["radius"];
+        if (planet === SATURN) {
+            outerRadius =+ saturnOuterRadius;
+        } else if (planet === URANUS) {
+            outerRadius =+ uranusOuterRadius;
+        } else if (planet === SUN) {
+            outerRadius = planets[planet]["radius"] / 100;
+        }
+    }
+
+    return outerRadius;
+}
diff --git a/examples/canvas3d/canvas3d/threejs/planets/planets.pro b/examples/canvas3d/canvas3d/threejs/planets/planets.pro
new file mode 100644
index 0000000..647740d
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/planets.pro
@@ -0,0 +1,16 @@
+!include( ../../../../examples.pri ) {
+    error( "Couldn't find the examples.pri file!" )
+}
+
+TEMPLATE = app
+
+QT += qml quick
+
+SOURCES += main.cpp
+
+OTHER_FILES += *.qml \
+               planets.js \
+               doc/src/* \
+               doc/images/*
+
+RESOURCES += planets.qrc
diff --git a/examples/canvas3d/canvas3d/threejs/planets/planets.qml b/examples/canvas3d/canvas3d/threejs/planets/planets.qml
new file mode 100644
index 0000000..4b4d313
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/planets.qml
@@ -0,0 +1,356 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the QtCanvas3D module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** 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 http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtCanvas3D 1.0
+
+import "planets.js" as GLCode
+
+Item {
+    id: mainview
+    width: 1280
+    height: 768
+    visible: true
+    property int focusedPlanet: 100
+    property int oldPlanet: 0
+    property real xLookAtOffset: 0
+    property real yLookAtOffset: 0
+    property real zLookAtOffset: 0
+    property real xCameraOffset: 0
+    property real yCameraOffset: 0
+    property real zCameraOffset: 0
+    property real cameraNear: 0
+
+    NumberAnimation {
+        id: lookAtOffsetAnimation
+        target: mainview
+        properties: "xLookAtOffset, yLookAtOffset, zLookAtOffset"
+        to: 0
+        easing.type: Easing.InOutQuint
+        duration: 1250
+    }
+
+    NumberAnimation {
+        id: cameraOffsetAnimation
+        target: mainview
+        properties: "xCameraOffset, yCameraOffset, zCameraOffset"
+        to: 0
+        easing.type: Easing.InOutQuint
+        duration: 2500
+    }
+
+    Behavior on cameraNear {
+        PropertyAnimation {
+            easing.type: Easing.InOutQuint
+            duration: 2500
+        }
+    }
+    //! [1]
+    onFocusedPlanetChanged: {
+        if (focusedPlanet == 100) {
+            info.opacity = 0;
+            updatePlanetInfo();
+        } else {
+            updatePlanetInfo();
+            info.opacity = 0.5;
+        }
+
+        GLCode.setOldPlanet();
+        GLCode.setLookAtOffset();
+        GLCode.setCameraOffset();
+
+        lookAtOffsetAnimation.restart();
+        cameraOffsetAnimation.restart();
+    }
+    //! [1]
+    //! [0]
+    Canvas3D {
+        id: canvas3d
+        anchors.fill: parent
+        //! [4]
+        onInitializeGL: {
+            GLCode.initializeGL(canvas3d, eventSource, mainview);
+        }
+        //! [4]
+        onPaintGL: {
+            GLCode.paintGL(canvas3d);
+            fpsDisplay.fps = canvas3d.fps;
+        }
+
+        onResizeGL: {
+            GLCode.onResizeGL(canvas3d);
+        }
+        //! [3]
+        ControlEventSource {
+            anchors.fill: parent
+            focus: true
+            id: eventSource
+        }
+        //! [3]
+    }
+    //! [0]
+    ListModel {
+        id: planetModel
+
+        ListElement {
+            name: "Sun"
+            radius: "109 x Earth"
+            temperature: "5 778 K"
+            orbitalPeriod: ""
+            distance: ""
+            planetImageSource: "qrc:/images/sun.png"
+            planetNumber: 0
+        }
+        ListElement {
+            name: "Mercury"
+            radius: "0.3829 x Earth"
+            temperature: "80-700 K"
+            orbitalPeriod: "87.969 d"
+            distance: "0.387 098 AU"
+            planetImageSource: "qrc:/images/mercury.png"
+            planetNumber: 1
+        }
+        ListElement {
+            name: "Venus"
+            radius: "0.9499 x Earth"
+            temperature: "737 K"
+            orbitalPeriod: "224.701 d"
+            distance: "0.723 327 AU"
+            planetImageSource: "qrc:/images/venus.png"
+            planetNumber: 2
+        }
+        ListElement {
+            name: "Earth"
+            radius: "6 378.1 km"
+            temperature: "184-330 K"
+            orbitalPeriod: "365.256 d"
+            distance: "149598261 km (1 AU)"
+            planetImageSource: "qrc:/images/earth.png"
+            planetNumber: 3
+        }
+        ListElement {
+            name: "Mars"
+            radius: "0.533 x Earth"
+            temperature: "130-308 K"
+            orbitalPeriod: "686.971 d"
+            distance: "1.523679 AU"
+            planetImageSource: "qrc:/images/mars.png"
+            planetNumber: 4
+        }
+        ListElement {
+            name: "Jupiter"
+            radius: "11.209 x Earth"
+            temperature: "112-165 K"
+            orbitalPeriod: "4332.59 d"
+            distance: "5.204267 AU"
+            planetImageSource: "qrc:/images/jupiter.png"
+            planetNumber: 5
+        }
+        ListElement {
+            name: "Saturn"
+            radius: "9.4492 x Earth"
+            temperature: "84-134 K"
+            orbitalPeriod: "10759.22 d"
+            distance: "9.5820172 AU"
+            planetImageSource: "qrc:/images/saturn.png"
+            planetNumber: 6
+        }
+        ListElement {
+            name: "Uranus"
+            radius: "4.007 x Earth"
+            temperature: "49-76 K"
+            orbitalPeriod: "30687.15 d"
+            distance: "19.189253 AU"
+            planetImageSource: "qrc:/images/uranus.png"
+            planetNumber: 7
+        }
+        ListElement {
+            name: "Neptune"
+            radius: "3.883 x Earth"
+            temperature: "55-72 K"
+            orbitalPeriod: "60190.03 d"
+            distance: "30.070900 AU"
+            planetImageSource: "qrc:/images/neptune.png"
+            planetNumber: 8
+        }
+        ListElement {
+            name: "Solar System"
+            planetImageSource: ""
+            planetNumber: 100 // Defaults to solar system
+        }
+    }
+
+    Component {
+        id: planetButtonDelegate
+        PlanetButton {
+            source: planetImageSource
+            text: name
+            focusPlanet: planetNumber
+            planetSelector: mainview
+        }
+    }
+
+    ListView {
+        id: planetButtonView
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.rightMargin: 15
+        anchors.bottomMargin: 10
+        spacing: 10
+        width: 100
+        interactive: false
+        model: planetModel
+        delegate: planetButtonDelegate
+    }
+
+    InfoSheet {
+        id: info
+        width: 400
+        anchors.right: planetButtonView.left
+        anchors.rightMargin: 10
+        opacity: 0.5
+
+        // Set initial information for Solar System
+        planet: "Solar System"
+        exampleDetails: "This example shows a 3D model of the Solar</p>" +
+                        "<p>System comprised of the Sun and the eight</p>" +
+                        "<p>planets orbiting the Sun.</p></br>" +
+                        "<p>The example is implemented using QtCanvas3D,</p>" +
+                        "<p>three.js and _RingGeometry() method from</p>" +
+                        "<p>threex.planets extension.</p></br>" +
+                        "<p>The textures and images used in the example</p>" +
+                        "<p>are Copyright (c) by James Hastings-Trew,</p>" +
+                        "<a href=\"http://planetpixelemporium.com/planets.html\">" +
+                        "http://planetpixelemporium.com/planets.html</a>"
+    }
+
+    function updatePlanetInfo() {
+
+        info.width = 200;
+
+        if (focusedPlanet !== 100) {
+            info.planet = planetModel.get(focusedPlanet).name
+            info.radius = planetModel.get(focusedPlanet).radius
+            info.temperature = planetModel.get(focusedPlanet).temperature
+            info.orbitalPeriod = planetModel.get(focusedPlanet).orbitalPeriod
+            info.distance = planetModel.get(focusedPlanet).distance
+        }
+    }
+
+    StyledSlider {
+        id: speedSlider
+        anchors.top: parent.top
+        anchors.topMargin: 10
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: 400
+        value: 0.2
+        minimumValue: 0
+        maximumValue: 1
+        onValueChanged: GLCode.onSpeedChanged(value);
+    }
+    Text {
+        anchors.right: speedSlider.left
+        anchors.verticalCenter: speedSlider.verticalCenter
+        anchors.rightMargin: 10
+        font.family: "Helvetica"
+        font.pixelSize: 16
+        font.weight: Font.Light
+        color: "white"
+        text: "Rotation Speed"
+    }
+
+    StyledSlider {
+        id: scaleSlider
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 10
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: 400
+        value: 1200
+        minimumValue: 1
+        maximumValue: 2000
+        onValueChanged: GLCode.setScale(value);
+    }
+    Text {
+        anchors.right: scaleSlider.left
+        anchors.verticalCenter: scaleSlider.verticalCenter
+        anchors.rightMargin: 10
+        font.family: "Helvetica"
+        font.pixelSize: 16
+        font.weight: Font.Light
+        color: "white"
+        text: "Planet Size"
+    }
+
+    StyledSlider {
+        id: distanceSlider
+        anchors.left: parent.left
+        anchors.leftMargin: 10
+        anchors.verticalCenter: parent.verticalCenter
+        orientation: Qt.Vertical
+        height: 400
+        value: 1
+        minimumValue: 1
+        maximumValue: 2
+        //! [2]
+        onValueChanged: GLCode.setCameraDistance(value);
+        //! [2]
+    }
+    Text {
+        y: distanceSlider.y + distanceSlider.height + width + 10
+        x: distanceSlider.x
+        transform: Rotation {
+            origin.x: 0;
+            origin.y: 0;
+            angle: -90
+        }
+        font.family: "Helvetica"
+        font.pixelSize: 16
+        font.weight: Font.Light
+        color: "white"
+        text: "Viewing Distance"
+    }
+
+    // FPS display, initially hidden, clicking will show it
+    FpsDisplay {
+        id: fpsDisplay
+        anchors.left: parent.left
+        anchors.top: parent.top
+        width: 32
+        height: 64
+        hidden: true
+    }
+}
diff --git a/examples/canvas3d/canvas3d/threejs/planets/planets.qrc b/examples/canvas3d/canvas3d/threejs/planets/planets.qrc
new file mode 100644
index 0000000..63f5afd
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/planets/planets.qrc
@@ -0,0 +1,44 @@
+<RCC>
+    <qresource prefix="/">
+        <file>planets.qml</file>
+        <file>PlanetButton.qml</file>
+        <file>InfoSheet.qml</file>
+        <file>StyledSlider.qml</file>
+        <file>FpsDisplay.qml</file>
+        <file alias="three.js">../../3rdparty/three.js</file>
+        <file alias="ControlEventSource.qml">../controls/ControlEventSource.qml</file>
+        <file alias="threex.planets.js">../../3rdparty/threex.planets.js</file>
+        <file>planets.js</file>
+    </qresource>
+    <qresource prefix="/images">
+        <file alias="sunmap.jpg">images/sunmap.jpg</file>
+        <file alias="mercurymap.jpg">images/mercurymap.jpg</file>
+        <file alias="mercurybump.jpg">images/mercurybump.jpg</file>
+        <file alias="venusmap.jpg">images/venusmap.jpg</file>
+        <file alias="venusbump.jpg">images/venusbump.jpg</file>
+        <file alias="earthmap1k.jpg">images/earthmap1k.jpg</file>
+        <file alias="earthbump1k.jpg">images/earthbump1k.jpg</file>
+        <file alias="earthspec1k.jpg">images/earthspec1k.jpg</file>
+        <file alias="moonmap1k.jpg">images/moonmap1k.jpg</file>
+        <file alias="moonbump1k.jpg">images/moonbump1k.jpg</file>
+        <file alias="marsmap1k.jpg">images/marsmap1k.jpg</file>
+        <file alias="marsbump1k.jpg">images/marsbump1k.jpg</file>
+        <file alias="jupitermap.jpg">images/jupitermap.jpg</file>
+        <file alias="saturnmap.jpg">images/saturnmap.jpg</file>
+        <file alias="uranusmap.jpg">images/uranusmap.jpg</file>
+        <file alias="neptunemap.jpg">images/neptunemap.jpg</file>
+        <file alias="earth.png">images/earth.png</file>
+        <file alias="mercury.png">images/mercury.png</file>
+        <file alias="jupiter.png">images/jupiter.png</file>
+        <file alias="mars.png">images/mars.png</file>
+        <file alias="neptune.png">images/neptune.png</file>
+        <file alias="saturn.png">images/saturn.png</file>
+        <file alias="sun.png">images/sun.png</file>
+        <file alias="uranus.png">images/uranus.png</file>
+        <file alias="venus.png">images/venus.png</file>
+        <file alias="earthcloudmapcolortrans.png">images/earthcloudmapcolortrans.png</file>
+        <file alias="saturnringcolortrans.png">images/saturnringcolortrans.png</file>
+        <file alias="uranusringcolortrans.png">images/uranusringcolortrans.png</file>
+        <file alias="galaxy_starfield.png">images/galaxy_starfield.png</file>
+    </qresource>
+</RCC>
diff --git a/examples/canvas3d/canvas3d/threejs/threejs.pro b/examples/canvas3d/canvas3d/threejs/threejs.pro
new file mode 100644
index 0000000..4372297
--- /dev/null
+++ b/examples/canvas3d/canvas3d/threejs/threejs.pro
@@ -0,0 +1,3 @@
+TEMPLATE = subdirs
+SUBDIRS += oneqt \
+           planets
diff --git a/examples/canvas3d/threejs/oneqt/doc/src/oneqt.qdoc b/examples/canvas3d/threejs/oneqt/doc/src/oneqt.qdoc
deleted file mode 100644
index 702b5c0..0000000
--- a/examples/canvas3d/threejs/oneqt/doc/src/oneqt.qdoc
+++ /dev/null
@@ -1,125 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2015 The Qt Company Ltd.
-** Contact: http://www.qt.io/licensing/
-**
-** This file is part of the QtCanvas3D module of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:LGPL3$
-** 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 http://www.qt.io/terms-conditions. For further
-** information use the contact form at http://www.qt.io/contact-us.
-**
-** GNU Lesser General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU Lesser
-** General Public License version 3 as published by the Free Software
-** Foundation and appearing in the file LICENSE.LGPLv3 included in the
-** packaging of this file. Please review the following information to
-** ensure the GNU Lesser General Public License version 3 requirements
-** will be met: https://www.gnu.org/licenses/lgpl.html.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU
-** General Public License version 2.0 or later as published by the Free
-** Software Foundation and appearing in the file LICENSE.GPL included in
-** the packaging of this file. Please review the following information to
-** ensure the GNU General Public License version 2.0 requirements will be
-** met: http://www.gnu.org/licenses/gpl-2.0.html.
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-/*!
-    \example threejs/oneqt
-    \since QtCanvas3D 1.0
-    \title One Qt Example
-    \ingroup qtcanvas3d-examples
-    \brief Demonstrates combining Qt Quick and three.js based rendering.
-
-    One Qt example demonstrates how to implement an application that combines the use of three.js
-    library based Canvas3D rendering with Qt Quick 2D elements.
-
-    \image oneqt-example.png
-
-    \section1 Qt Quick Implementation
-
-    In \l{threejs/oneqt/oneqt.qml}{oneqt.qml}, we build the 2D content as normally in Qt Quick.
-    Then we add a custom ImageCube element in to the scene as the background element. This custom
-    component fills the whole parent area and handles the painting of the background and the 3D cube
-    for this view.
-
-    \snippet threejs/oneqt/oneqt.qml 0
-    \dots
-
-    The custom component takes six images that it loads and places to the sides of the cube.
-    In addition the component has a state that defines which of these images is visible.
-
-    \section2 The Custom 3D Qt Quick Element
-
-    In \l{threejs/oneqt/ImageCube.qml}{ImageCube.qml}, we define the cube rotation related
-    properties and properties that contain the image file URLs to be loaded for the cube sides.
-
-    \snippet threejs/oneqt/ImageCube.qml 0
-    \dots
-
-    The custom component defines six states, one for each side of the cube along with the x, y and
-    z rotations that must be set to show that face of the cube.
-
-    \snippet threejs/oneqt/ImageCube.qml 1
-    \dots
-
-    We use Qt Quick transitions to animate between the angles to get smooth transitions between
-    different cube orientations.
-
-    \snippet threejs/oneqt/ImageCube.qml 2
-    \dots
-
-    Finally we call the JavaScript code that uses three.js to do the rendering of the cube, calling
-    it on the initializeGL, paintGL and resizeGL signals.
-
-    \snippet threejs/oneqt/ImageCube.qml 3
-
-    \section2 The three.js Code
-
-    In \l{threejs/oneqt/imagecube.js}{imagecube.js}, we start by creating the camera and scene.
-
-    \snippet threejs/oneqt/imagecube.js 0
-    \dots
-
-    Then we start the asynchronous loading of the textures and create a material array for the sides
-    of the cube (note that the cube needs 12 materials as each side consists of two triangles).
-
-    \snippet threejs/oneqt/imagecube.js 1
-    \dots
-
-    We then create the needed geometry as BoxGeometry binding the just created materials to the
-    faces of the cube. We then create a MeshFaceMaterial from the array of materials.
-
-    \snippet threejs/oneqt/imagecube.js 2
-
-    Finally we create the cube mesh from the geometry and material, we position it and add it
-    to the 3D scene.
-
-    \snippet threejs/oneqt/imagecube.js 3
-
-    Next we create and add some lights to the scene. AmbientLight defines the "surrounding light"
-    amount and the directional light is positioned so that it highlights the face of the cube facing
-    directly towards the camera.
-
-    \snippet threejs/oneqt/imagecube.js 6
-
-    Final step in the initialization phase is create the Canvas3D renderer and set the
-    initial size and clear color (color of the background) to the renderer.
-
-    \snippet threejs/oneqt/imagecube.js 4
-
-    When we need to render the scene in response to the paintGL signal from Canvas3D we just copy
-    the current rotation values from the Qt Quick component to the cube mesh in paintGL method.
-
-    \snippet threejs/oneqt/imagecube.js 5
-*/
diff --git a/examples/canvas3d/threejs/threejs.pro b/examples/canvas3d/threejs/threejs.pro
deleted file mode 100644
index 9576c70..0000000
--- a/examples/canvas3d/threejs/threejs.pro
+++ /dev/null
@@ -1,2 +0,0 @@
-TEMPLATE = subdirs
-SUBDIRS += oneqt