QML 2D graphics plugin for Node.js 3D Core
npm install 3d-qml-raubThis is a part of Node3D project.



``console`
npm i -s 3d-qml-raub
QML-rendering helpers for Node.js 3D Core.
The QML backend is Qt 6.8.0.
> Note: IMPORTANT, QML has its own OpenGL context. Make sure to switch back.
Use document.makeCurrent() or release() (see exported below).
`typescript
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.QtMultimedia
not , QtNetwork, etc. - because those libs are not included.
See Dashboard
example being copied as a proof of concept.
A common use-case is full-screen overlay UI:
`typescriptoverlay.mesh
// Loads QML and creates all threejs-related resources, e.g. is THREE.Mesh${__dirname}/qml/Test.qml
const overlay = new QmlOverlay({ file: });
scene.add(overlay.mesh);
// QML property access shortcut
const propTest = new Property
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.
Creating a threejs Texture from QML View is also supported.
Such textures may be used in arbitrary threejs materials of your choise.
`js${__dirname}/qml/Test.qml
const testView = new View({ file: });
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);
});
``