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(, canvas.width / canvas.height, , );
    camera.position.z = ;
    camera.lookAt({x:,y:,z:});
    var leftLight = new THREE.DirectionalLight( ,  );
    leftLight.position.set( -, , );
    scene.add( leftLight );
    var rightLight = new THREE.DirectionalLight( ,  );
    rightLight.position.set( , , );
    scene.add( rightLight );
    var material = new THREE.MeshLambertMaterial({ color: });
    var cubeGeometry = new THREE.BoxGeometry(, , );
    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 
import QtCanvas3D 
import QtQuick.Window 

import "glcode.js" as GLCode

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

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

        onPaintGL: {
            GLCode.paintGL(canvas3d);
        }

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

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