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"
        }
    }
}