3D canvas in QML

In this recipe, we will learn how to render 3D images using Qt's powerful QML scripting language.

How to do it…

  1. Let's start this example by creating a new project in Qt Creator. This time around, we will create Qt Canvas 3D Application and not the other options that we chose in all previous examples:
    How to do it…
  2. After that, Qt Creator will ask you whether to create a project that is based on three.js. Leave the option checked and press the Next button to proceed:
    How to do it…
  3. Once the project is created, you will notice there are some JavaScript (.js) files already added 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's running a WebGL-based rendering library called three.js, which makes our programming job simpler and easier compare to writing pure WebGL code:
    How to do it…
  4. Next, add an image file to our project resources as we'll be using it in this example. Open up qml.qrc with Qt Creator by right-clicking on it in the Projects pane and select Open in Editor. Once the resources file is opened by Qt Creator, click the Add button, followed by the Add File button, then select the image file you want from your computer. In my case, I've added a bricks.png image, which will be used as the surface texture for our 3D object:
    How to do it…
  5. After that, open up glcode.js using Qt Creator. You will see there is already plenty of code written in the file. What ithis 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'll 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. Also, we will make the scale of the cube slightly bigger by setting its scale to 3 in all dimensions:
    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('bricks.jpg');

  var material = new THREE.MeshBasicMaterial({ map: texture });
  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);
}
  7. Then, 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);
}
  8. I personally find the window size is a little too large, so I also changed the width and height of the window in main.qml file:
    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: 480
  height: 320
  visible: true

  Canvas3D {
    id: canvas3d
    anchors.fill: parent
    focus: true

    onInitializeGL: {
      GLCode.initializeGL(canvas3d);
    }

    onPaintGL: {
      GLCode.paintGL(canvas3d);
    }

    onResizeGL: {
      GLCode.resizeGL(canvas3d);
    }
  }
}
  9. Once you're done, let's build and run the project. You should be able to see a 3D cube with a brick texture, spinning slowly on the screen:
    How to do it…

How it works...

Originally, three.js was a cross-browser JavaScript library/API that used WebGL technology to display animated 3D computer graphics in a web browser. Qt Canvas 3D, however, also uses web technology, specifically the WebGL technology, to render 3D images like it would on a web browser. This means that not only is three.js supported on Qt Canvas 3D, but all the different types of library that are based on WebGL technology will work flawlessly on Qt Canvas 3D. However, Qt Canvas 3D only works on QML-based projects and does not work in C++.

Note

If you're interested to learn more about three.js, check out their website at http://threejs.org.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.219.34.62