QT Canvas3D 例子

QT Canvas3D能夠和好與qml其他組件融爲一體，在同一窗口顯示，這是目前QT 3D不具備的。QT 3D是比QT Canvas更加高級更加傻瓜化的api，但是沒有了基礎的繪圖函數，只能以組件爲最基礎的設計單元，更加細節的內容需要導入模型或者藉助其他手段。
而Canvas3D作爲更加基礎的3D繪圖api庫有更加靈活運用。而且在開發活躍度上更勝一籌，這是因爲Canvas3D直接使用webgl的api或者three.js，後者開發者達到了700人之多，這是QT 3D所不具備的。同時three.js的api比較人性化，容易理解，其功能層次介於webgl和QT 3D之間，相當於vtk之於C++，類似的庫還有xtk（後者主要用於醫學，而且已經基本停止開發）。
和vtk、xtk一樣，three.js裏有幾個重要概念：

• 相機camera
• 場景scene
• 燈光light
• 材料material
• 幾何體mesh
• 渲染器render

scene是個大容器，裝下了燈光和幾何體，材料是幾何體的屬性。設置好了場景和相機就可以開拍了，也就是渲染。

這個是本例的效果圖。
裏面用到了一個場景，一個相機，兩個燈光（左右各一），一個幾何體，其材料是能產生比較強的漫反射的lambert材料。另外在還有一個文字框懸在頂層，和3D組件互不干擾。

下面說代碼
js文件，作用是佈置場景和提供渲染接口給qml。

Qt.include("three.js")

var camera, scene, renderer,light;
var cube,line;

function initializeGL(canvas) {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 1000);
    camera.position.z = 5;
    camera.lookAt({x:0,y:0,z:0});
    var leftLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
    leftLight.position.set( -1, 1, 1);
    scene.add( leftLight );
    var rightLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
    rightLight.position.set( 1, 1, 1);
    scene.add( rightLight );
    var material = new THREE.MeshLambertMaterial({ color: 0x80c342});
    var cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
    cube = new THREE.Mesh(cubeGeometry, material);
    scene.add(cube);
    renderer = new THREE.Canvas3DRenderer(
                { canvas: canvas, antialias: true, devicePixelRatio: canvas.devicePixelRatio });
    renderer.setSize(canvas.width, canvas.height);
}

function resizeGL(canvas) {
    camera.aspect = canvas.width / canvas.height;
    camera.updateProjectionMatrix();

    renderer.setPixelRatio(canvas.devicePixelRatio);
    renderer.setSize(canvas.width, canvas.height);
}

function paintGL(canvas) {
    renderer.render(scene, camera);
}

function rotate(x,y,z){
    cube.rotation.x+=x;
    cube.rotation.y+=y;
    cube.rotation.z+=z;
}

qml窗口界面的排版，調用js中的函數，這和html的作用是一樣的。

import QtQuick 2.4
import QtCanvas3D 1.1
import QtQuick.Window 2.2

import "glcode.js" as GLCode

Window {
    title: qsTr("QT3js")
    width: 1280
    height: 768
    visible: true
    property int previousY: 0
    property int previousX: 0

    Canvas3D {
        id: canvas3d
        anchors.fill: parent
        focus: true
        property double xRot: 0.0
        property double yRot: 45.0
        property double distance: 2.0
        onInitializeGL: {
            GLCode.initializeGL(canvas3d);
        }

        onPaintGL: {
            GLCode.paintGL(canvas3d);
        }

        onResizeGL: {
            GLCode.resizeGL(canvas3d);
        }
        MouseArea {
            anchors.fill: parent
            onMouseXChanged: {
                GLCode.rotate(0.1,0,0)
            }
            onMouseYChanged: {
                GLCode.rotate(0,0.1,0)
            }
            onReleased: {
                // Reset previous mouse positions to avoid rotation jumping
                previousX = 0
                previousY = 0
            }
            onWheel: {
                canvas3d.distance -= wheel.angleDelta.y / 1000.0
                // Limit the distance to 0.5...10
                if (canvas3d.distance < 0.5)
                    canvas3d.distance = 0.5
                if (canvas3d.distance > 10)
                    canvas3d.distance = 10
            }
        }
    }

    Rectangle {
        id: rectangle1
        x: 404
        y: 180
        width: 200
        height: 101
        color: "#baf1b3"
        Text{
            anchors.fill: parent
            text:"hello"
            verticalAlignment: Text.AlignVCenter
            font.pointSize: 10
            horizontalAlignment: Text.AlignHCenter
            font.family: "Courier"
        }
    }
}