qml 使用 three.js 绘制 3D 之 渲染并展示三维对象（ 一 ）

对象（ 一 ）"/>

qml 使用 three.js 绘制 3D 之 渲染并展示三维对象（ 一 ）

qml 使用 three.js 绘制 3D 之 渲染并展示三维对象（ 一 ）

• • 简介
  • 渲染并展示三维对象( 一 )
  • 代码部分
  • 使用的 three.js 文件下载地址

简介

一直在研究 qt 绘制 3D ,觉得 qml 调用 three.js 算是比较方便的,而且网上有很多 three.js 的例子,但是 web 端使用的方式和 qml 的调用还是有一定的区别的, qml 使用的 three.js 是阉割版的,这个爬了不少的坑,以下使用qml 进行一个简单的三维对象的绘制。

渲染并展示三维对象( 一 )

Renderand_display_3d_objects.js 这个 js 文件内的内容借鉴的是
.html
这个文章,感觉还是不错的，很系统化的学习的 three.js 而且有 demo ,值得学习 , 还有就是在网上下载的 three.js 在 qt 中是用不了的, 可以在 qt 提供的实例中 找到 qt 版本的 three.js 然后放到工程下, 添加到 qrc 中。

1. qml 文件中主要使用 Canvas3D 来显示 three.js 的内容,主要使用 onInitializeGL 、onPaintGL 、onResizeGL 这三个函数
2. onInitializeGL 是 Canvas3D 初始化的时候会调用
3. onPaintGL 是实时重绘的时候会调用
4. onResizeGL 是 Canvas3D 改变大小的时候会触发

代码部分

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtCanvas3D 1.1
import "qrc:/Src_JS/Src_javascript/Renderand_display_3d_objects.js" as Render             
Window
{visible: truewidth: 640height: 480title: qsTr("Hello World")Canvas3D {id: canvas;anchors.fill: parent;onInitializeGL:{Render.initializeGL(canvas);}onPaintGL:{Render.paintGL(canvas);}onResizeGL:{Render.resizeGL(canvas);}}}

three.js 调用部分
Renderand_display_3d_objects.js

Qt.include("three.js")var camera, scene, renderer,light;
var cube,line;
var leftLight;
var rightLight;
var material;
var flagt =false;
var count = 0;function initializeGL(canvas)
{// 设置场景scene = new THREE.Scene();// 设置相机相关参数camera = new THREE.PerspectiveCamera(45, canvas.width / canvas.height, 0.1, 1000);// 在屏幕中显示坐标var axes = new THREE.AxisHelper(100);scene.add(axes);//创建一个水平面var planeGeometry = new THREE.PlaneGeometry(60, 60);var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});var plane = new THREE.Mesh(planeGeometry, planeMaterial);//水平面旋转并且设置位置plane.rotation.x = -0.5 * Math.PI;plane.position.x = 15;plane.position.y = 0;plane.position.z = 0;//将水平面添加到场景中scene.add(plane);//创建一个方块var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);//设置方块位置cube.position.x = -4;cube.position.y = 3;cube.position.z = 0;//将方块添加到场景中scene.add(cube);//创建一个球体var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);//设置球体位置sphere.position.x = 20;sphere.position.y = 4;sphere.position.z = 2;//将球体添加到场景中scene.add(sphere);//将相机位置和视点放在场景中间camera.position.x = -30;camera.position.y = 40;camera.position.z = 30;camera.lookAt(scene.position);// 创建一个渲染器renderer = new THREE.Canvas3DRenderer({ canvas: canvas, antialias: true, devicePixelRatio: canvas.devicePixelRatio ,alpha:true});renderer.setSize(canvas.width, canvas.height);renderer.setClearColor(0xEEEEEE,1.0);		// 设置画布的背景颜色// 设置画布背景色是透明的  需要在 初始化 renderer 的时候附带上  alpha:true// renderer.setClearAlpha(0.0);}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);
}

== 运行后的效果 ==

使用的 three.js 文件下载地址

谢谢大家阅读,一起加油,一起进步。