ThreeJS Line Demo on QML Canvas3D

LinesDemoIt is a simple porting of ThreeJS lines demo. ThreeJS is a Javascript library for manipulating WebGL inside web browsers.

It takes a little effort converting web code to Qml Canvas3D. Open QtCreator, create new project and select “Qt Canvas 3D Application” then mark “Create a three.js based application”. Here it is:

[code lang=”js”]
// main.qml
import QtQuick 2.4
import QtCanvas3D 1.0
import QtQuick.Window 2.2
import "glcode.js" as GLCode
Window {
title: qsTr("ThreeJS – BufferGeometry – Lines")
width: 640; height: 480
visible: true
Canvas3D {
id: canvas3d
anchors.fill: parent
focus: true
onInitializeGL: GLCode.initializeGL(canvas3d);
onPaintGL: GLCode.paintGL(canvas3d);
onResizeGL: GLCode.resizeGL(canvas3d);
}
Text {
anchors.top: parent.top
anchors.right: parent.right
text: canvas3d.fps+" FPS"
color:"white"
}
}
[/code]

The ported code is almost the original one, just a few changes related to the container.

[code lang=”cpp”]
// glcode.js
Qt.include("three.js")
var camera, scene, renderer;
var cube;
var mesh;
function initializeGL(canvas) {
camera = new THREE.PerspectiveCamera( 27, canvas.innerWidth / canvas.innerHeight, 1, 4000 );
camera.position.z = 2750;
scene = new THREE.Scene();
var segments = 10000;
var geometry = new THREE.BufferGeometry();
var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });
var positions = new Float32Array( segments * 3 );
var colors = new Float32Array( segments * 3 );
var r = 800;
for ( var i = 0; i < segments; i ++ ) {
var x = Math.random() * r – r / 2;
var y = Math.random() * r – r / 2;
var z = Math.random() * r – r / 2;
positions[ i * 3 ] = x;
positions[ i * 3 + 1 ] = y;
positions[ i * 3 + 2 ] = z;
colors[ i * 3 ] = ( x / r ) + 0.5;
colors[ i * 3 + 1 ] = ( y / r ) + 0.5;
colors[ i * 3 + 2 ] = ( z / r ) + 0.5;
}
geometry.addAttribute( ‘position’, new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( ‘color’, new THREE.BufferAttribute( colors, 3 ) );
geometry.computeBoundingSphere();
mesh = new THREE.Line( geometry, material );
scene.add( mesh );
renderer = new THREE.Canvas3DRenderer({ canvas: canvas, antialias: true, devicePixelRatio: canvas.devicePixelRatio });
renderer.setClearColor( 0x707070 );
renderer.setSize(canvas.width, canvas.height);
renderer.gammaInput = true;
renderer.gammaOutput = true;
}
function resizeGL(canvas) {
camera.aspect = canvas.width / canvas.height;
camera.updateProjectionMatrix();
renderer.setPixelRatio(canvas.devicePixelRatio);
renderer.setSize(canvas.width, canvas.height);
}
function paintGL(canvas) {
var time = Date.now() * 0.001;
mesh.rotation.x = time * 0.25;
mesh.rotation.y = time * 0.5;
renderer.render(scene, camera);
}
[/code]