Node.js 3D QML

This is a part of Node3D project.

npm i 3d-qml-raub

Synopsis

QML 2D graphics plugin for Node.js 3D Core. The backend is Qt 5.13.0.

Usage

As any Node3D plugin, 3d-qml-raub exports a single function. Given a Node3D object this function extends with qml property. Now this property holds whatever this plugin offers.

See examples for more details.

Note: IMPORTANT, using QML, keep in mind it has its own OpenGL context, so when you use yours, be aware it might be not the current one. Use document.makeCurrent() or release() (see exported below).

---

First, import/init the plugin:

const init3dCore = require('3d-core-raub');

const {
    Image,
    doc,
    qml: { Material, Overlay, OverlayMaterial, Rect },
} = init3dCore({ plugins: ['3d-qml-raub'] });

// ...

---

Use QML view as screen-size overlay like this:

const ui = new View({ width: screen.w, height: screen.h, file: `${__dirname}/qml/gui.qml` });

doc.on('mousedown', ui.mousedown.bind(ui));
doc.on('mouseup', ui.mouseup.bind(ui));
doc.on('mousemove', ui.mousemove.bind(ui));
doc.on('keydown', ui.keydown.bind(ui));
doc.on('keyup', ui.keyup.bind(ui));
doc.on('wheel', ui.wheel.bind(ui));

new Overlay({ screen, view: ui });

This way you can run real Qt examples. One such example - Dashboard was copied from Qt instalation as a proof of concept.

---

You can also extract the texture from a view:

// If the view already has some texture - use it
mesh.material.texture = view.textureId !== undefined ?
    three.Texture.fromId(view.textureId, renderer) :
    null;

// If the view creates a new texture - update the material
ui.on('reset', texId => {
    
    release();
    
    mesh.material.texture = texId !== undefined ?
        three.Texture.fromId(texId, renderer) :
        null;
    
});

It can be used to create your own overlay or even to texture a scene-space object. This is actually demonstrated in scene-space example.

Exports

See docs of qml-raub. This plugin reexports those as is.

Additionally there are few classes specific for this plugin:

• Rect - scene-space Three.js rectangle designed to display QML GUI.
• Material - Three.js material for scene-space texturing with QML GUI.
• Overlay - fullscreen Three.js overlay to display QML GUI.
• OverlayMaterial - Three.js material for fullscreen overlay with QML GUI.
• release() - switch OpenGL context to that of the default document.