3d-qml-raub 中文文档教程

Question

Node.js 3D QML

这是 Node3D 项目的一部分。

npm i 3d-qml-raub

Synopsis

用于 Node.js 3D Core 的 QML 2D 图形插件。 后端是 Qt 5.13.0。

Usage

作为任何 Node3D 插件，3d-qml-raub 导出一个函数。 给定一个 Node3D object 此函数使用 qml 属性扩展。 现在这个属性持有 无论这个插件提供什么。

有关详细信息，请参阅示例。

注意：重要，使用 QML，记住它有自己的 OpenGL 上下文，所以 当你使用你的时，请注意它可能不是当前的。 使用 document.makeCurrent() 或 release()（请参阅下面的导出）。

---

首先，导入/初始化插件：

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

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

// ...

---

像这样使用 QML 视图作为屏幕大小的叠加层：

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

这样你就可以运行 真实的 Qt 例子。 一个这样的例子 - 仪表板 作为概念证明从 Qt 安装中复制。

---

您还可以从视图中提取纹理：

// 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;

});

它可用于创建您自己的叠加层，甚至可以为场景空间对象添加纹理。 这实际上在 场景空间示例 中进行了演示。

Exports

请参阅 qml-raub 的文档。 这个插件 按原样重新导出那些。

此外，还有一些特定于此插件的类：

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