Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/node-3d/3d-qml-raub
QML 2D graphics plugin for Node.js 3D Core
https://github.com/node-3d/3d-qml-raub
2d graphics gui javascript js node-3d plugin qml
Last synced: about 2 months ago
JSON representation
QML 2D graphics plugin for Node.js 3D Core
- Host: GitHub
- URL: https://github.com/node-3d/3d-qml-raub
- Owner: node-3d
- License: mit
- Created: 2017-01-29T11:02:44.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-07-17T06:08:30.000Z (6 months ago)
- Last Synced: 2024-11-12T14:46:33.703Z (2 months ago)
- Topics: 2d, graphics, gui, javascript, js, node-3d, plugin, qml
- Language: JavaScript
- Homepage: https://github.com/node-3d/node-3d
- Size: 1.81 MB
- Stars: 3
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Node.js 3D QML
This is a part of [Node3D](https://github.com/node-3d) project.
[](https://badge.fury.io/js/3d-qml-raub)
[](https://github.com/node-3d/3d-qml-raub/actions/workflows/eslint.yml)
[](https://github.com/node-3d/3d-qml-raub/actions/workflows/test.yml)
```console
npm i -s 3d-qml-raub
```
QML-rendering extension for Node.js 3D Core. The QML backend is **Qt 5.13.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](/index.d.ts) for more details.
* See [example](/examples/fps/main.ts) for a complete setup.
It is also possible to run [QtQuick examples](https://doc.qt.io/qt-5.11/qtquick-codesamples.html)
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](https://doc.qt.io/qt-5/qtquickextras-dashboard-example.html)
example being [copied](examples/qt-dashboard) 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](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);
});
```