Let's learn how to use a 3D canvas in QML by following this example:

1. Let's start this example by creating a new project in Qt Creator. This time around, we will go for Qt Quick Application—Canvas 3D and not the other options that we chose in the previous examples:

2. After that, Qt Creator will ask you whether to create a project that is based on the three.js JavaScript library. Check the Create a three.js based application option and press the Next button to proceed:

3. Once the project is created, you will notice that there are some JavaScript (.js) files already in to your project's resources. This is normal as the Qt Canvas 3D application uses JavaScript and WebGL technology to render 3D images on screen. In this case, it is running a WebGL-based rendering library called three.js, which makes our programming job simpler and easier compared to writing pure WebGL code:

4. Add an image file to our project resources—we will be using it in this example. Open up qml.qrc with Qt Creator by right-clicking on it in the Projects pane and selecting Open in Editor. Once the resources file is opened by Qt Creator, click the Add button, followed by the Add File button, and then select the image file you want from your computer. In my case, I've added a brick.jpg image, which will be used as the surface texture for our 3D object:

5. After that, open up glcode.js using Qt Creator. You will see that there is already plenty of code written in the file. What it does is basically render a simple 3D cube on screen using the three.js library. You can build the project right away and run it to see what it looks like. However, we will change the code a little bit to customize its output.
6. In the initializeGL() function, we will add a directional light to the scene, load the texture file we just added to our project resources, and then apply the texture to the material that defines the surface properties of the 3D cube:

function initializeGL(canvas) {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 1000);
    camera.position.z = 5;
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);
    var texture = THREE.ImageUtils.loadTexture('brick.jpg');
    var material = new THREE.MeshLambertMaterial({ map: texture });

7. We will also make the scale of the cube slightly bigger by setting its scale to 3 in all dimensions. We also set the background color to a light gray color:

    var cubeGeometry = new THREE.BoxGeometry(3, 3, 3);
    cube = new THREE.Mesh(cubeGeometry, material);
    cube.rotation.set(0.785, 0.785, 0.0);
    scene.add(cube);
    renderer = new THREE.Canvas3DRenderer({ canvas: canvas, antialias: true, devicePixelRatio: canvas.devicePixelRatio });
    renderer.setSize(canvas.width, canvas.height);
    renderer.setClearColor(0xa9a9a9, 1);
}

8. In the paintGL() function, add an extra line of code to rotate the 3D cube before rendering the scene:

function paintGL(canvas) {
    cube.rotation.y -= 0.005;
    renderer.render(scene, camera);
}

9. I personally find the window size to be a little bit too small, so I also changed the width and height of the window in the main.qml file, as highlighted in the following code:

import QtQuick 2.4
import QtCanvas3D 1.0
import QtQuick.Window 2.2
import "glcode.js" as GLCode
Window {
    title: qsTr("Qt_Canvas_3D")
    width: 800
    height: 600
    visible: true

10. Once you are done, build and run the project. You should be able to see a 3D cube with a brick texture, spinning slowly on the screen: