对象( 一 )"/>
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 中。
- qml 文件中主要使用 Canvas3D 来显示 three.js 的内容,主要使用 onInitializeGL 、onPaintGL 、onResizeGL 这三个函数
- onInitializeGL 是 Canvas3D 初始化的时候会调用
- onPaintGL 是实时重绘的时候会调用
- 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 文件下载地址
谢谢大家阅读,一起加油,一起进步。
更多推荐
qml 使用 three.js 绘制 3D 之 渲染并展示三维对象( 一 )
发布评论