Node.js 3D QML

This is a part of Node3D project.

npm i -s 3d-qml-raub

QML-rendering extension for Node.js 3D Core. The QML backend is Qt 5.13.0.

Note: IMPORTANT, QML has its own OpenGL context. Make sure to switch back. Use document.makeCurrent() or release() (see exported below).

import * as three from 'three';
import { init, addThreeHelpers } from '3d-core-raub';
import { init as initQml } from '3d-qml-raub';

// Standard Node3D init
const {
	doc, Image: Img, gl,
} = init({
	isGles3: true, isWebGL2: true, autoEsc: true,
});
addThreeHelpers(three, gl);

// Initialize QML and fetch the helpers
const {
	QmlOverlay, Property, Method, View, loop, release, textureFromId,
} = initQml({
	doc, gl, cwd: __dirname, three,
});

• See TypeScript declarations for more details.
• See example for a complete setup.

It is also possible to run QtQuick examples on Node.js with this renderer. But it will only work with QtQuick components, i.e. not QtMultimedia, QtNetwork, etc. - because those libs are not included. See Dashboard example being copied as a proof of concept.

QmlOverlay

A common use-case is full-screen overlay UI:

// Loads QML and creates all threejs-related resources, e.g. `overlay.mesh` is `THREE.Mesh`
const overlay = new QmlOverlay({ file: `${__dirname}/qml/Test.qml` });
scene.add(overlay.mesh);

// QML property access shortcut
const propTest = new Property<string>({
	view: overlay, name: 'hud', key: 'testProp',
});

// A typed callable example
type TMethodTest = (arg0: number) => void;
const methodTest: TMethodTest = new Method({
	view: overlay, name: 'hud', key: 'testMethod',
});

// Listen to a user-defined event (could be any other name)
overlay.on('custom-event', (event) => {
	release();
	if (event.button === 'test') {
		console.log('test');
	}
	if (event.button === 'quit') {
		process.exit(0)
	}
});

propTest.value = 'test';
methodTest(123);

See examples for more details.

Any Material

Creating a threejs Texture from QML View is also supported. Such textures may be used in arbitrary threejs materials of your choise.

const testView = new View({ file: `${__dirname}/qml/Test.qml` });
const materialTest = new three.SpriteMaterial();

// If the view already has some texture - use it
materialTest.map = textureFromId(testView.textureId, renderer);

// If the view creates a new texture - update the material
testView.on('reset', (textureId) => {
	release();
	materialTest.map = textureFromId(textureId, renderer);
});