Node.js 3D QML Helpers

This 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.

!Example

> 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.
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:

`typescript
// 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({
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.

`js
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);
});
``