3d-qml-raub

    2.0.1 • Public • Published

    Node.js 3D QML

    This is a part of Node3D project.

    NPM

    Build Status CodeFactor

    npm i 3d-qml-raub

    Synopsis

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

    Example

    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.

    Install

    npm i 3d-qml-raub

    DownloadsWeekly Downloads

    15

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    9.38 kB

    Total Files

    9

    Last publish

    Collaborators

    • raub