{"id":21662469,"url":"https://github.com/node-3d/3d-qml-raub","last_synced_at":"2025-04-11T23:42:37.282Z","repository":{"id":16615602,"uuid":"80341367","full_name":"node-3d/3d-qml-raub","owner":"node-3d","description":"QML 2D graphics plugin for Node.js 3D Core","archived":false,"fork":false,"pushed_at":"2025-01-14T21:22:42.000Z","size":2213,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-01T14:41:15.777Z","etag":null,"topics":["2d","graphics","gui","javascript","js","node-3d","plugin","qml"],"latest_commit_sha":null,"homepage":"https://github.com/node-3d/node-3d","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/node-3d.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-29T11:02:44.000Z","updated_at":"2025-01-14T18:50:16.000Z","dependencies_parsed_at":"2025-01-14T14:40:26.467Z","dependency_job_id":"96c6465a-91b8-4b28-b21c-89fd22e7d5cb","html_url":"https://github.com/node-3d/3d-qml-raub","commit_stats":{"total_commits":96,"total_committers":2,"mean_commits":48.0,"dds":"0.38541666666666663","last_synced_commit":"970f3f6fac09d7e0d3143e9a1dc96651220dc6fd"},"previous_names":["raub/node-3d-qml"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-3d%2F3d-qml-raub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-3d%2F3d-qml-raub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-3d%2F3d-qml-raub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-3d%2F3d-qml-raub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/node-3d","download_url":"https://codeload.github.com/node-3d/3d-qml-raub/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248497901,"owners_count":21113982,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["2d","graphics","gui","javascript","js","node-3d","plugin","qml"],"created_at":"2024-11-25T10:16:21.148Z","updated_at":"2025-04-11T23:42:37.245Z","avatar_url":"https://github.com/node-3d.png","language":"JavaScript","readme":"# Node.js 3D QML Helpers\n\nThis is a part of [Node3D](https://github.com/node-3d) project.\n\n[![NPM](https://badge.fury.io/js/3d-qml-raub.svg)](https://badge.fury.io/js/3d-qml-raub)\n[![ESLint](https://github.com/node-3d/3d-qml-raub/actions/workflows/eslint.yml/badge.svg)](https://github.com/node-3d/3d-qml-raub/actions/workflows/eslint.yml)\n[![Test](https://github.com/node-3d/3d-qml-raub/actions/workflows/test.yml/badge.svg)](https://github.com/node-3d/3d-qml-raub/actions/workflows/test.yml)\n\n```console\nnpm i -s 3d-qml-raub\n```\n\n[QML](https://doc.qt.io/qt-6/qmlapplications.html)-rendering helpers for Node.js 3D Core.\nThe QML backend is **Qt 6.8.0**.\n\n![Example](examples/screenshot.png)\n\n\u003e Note: **IMPORTANT**, QML has its own OpenGL context. Make sure to switch back.\nUse `document.makeCurrent()` or `release()` (see exported below).\n\n```typescript\nimport * as three from 'three';\nimport { init, addThreeHelpers } from '3d-core-raub';\nimport { init as initQml } from '3d-qml-raub';\n\n// Standard Node3D init\nconst {\n\tdoc, Image: Img, gl,\n} = init({\n\tisGles3: true, isWebGL2: true, autoEsc: true,\n});\naddThreeHelpers(three, gl);\n\n// Initialize QML and fetch the helpers\nconst {\n\tQmlOverlay, Property, Method, View, loop, release, textureFromId,\n} = initQml({\n\tdoc, gl, cwd: __dirname, three,\n});\n```\n\n* See [TypeScript declarations](/index.d.ts) for more details.\n* See [example](/examples/fps/main.ts) for a complete setup.\n\nIt is also possible to run [QtQuick examples](https://doc.qt.io/qt-6/qtquick-codesamples.html)\non Node.js with this renderer. But it will only work with `QtQuick` components, i.e.\nnot `QtMultimedia`, `QtNetwork`, etc. - because those libs are not included.\nSee [Dashboard](https://doc.qt.io/qt-5/qtquickextras-dashboard-example.html)\nexample being [copied](examples/qt-dashboard) as a proof of concept.\n\n\n## QmlOverlay\n\nA common use-case is full-screen overlay UI:\n\n```typescript\n// Loads QML and creates all threejs-related resources, e.g. `overlay.mesh` is `THREE.Mesh`\nconst overlay = new QmlOverlay({ file: `${__dirname}/qml/Test.qml` });\nscene.add(overlay.mesh);\n\n// QML property access shortcut\nconst propTest = new Property\u003cstring\u003e({\n\tview: overlay, name: 'hud', key: 'testProp',\n});\n\n// A typed callable example\ntype TMethodTest = (arg0: number) =\u003e void;\nconst methodTest: TMethodTest = new Method({\n\tview: overlay, name: 'hud', key: 'testMethod',\n});\n\n// Listen to a user-defined event (could be any other name)\noverlay.on('custom-event', (event) =\u003e {\n\trelease();\n\tif (event.button === 'test') {\n\t\tconsole.log('test');\n\t}\n\tif (event.button === 'quit') {\n\t\tprocess.exit(0)\n\t}\n});\n\npropTest.value = 'test';\nmethodTest(123);\n```\n\nSee [examples](examples) for more details.\n\n\n## Any Material\n\nCreating a threejs `Texture` from QML `View` is also supported.\nSuch textures may be used in arbitrary threejs materials of your choise.\n\n```js\nconst testView = new View({ file: `${__dirname}/qml/Test.qml` });\nconst materialTest = new three.SpriteMaterial();\n\n// If the view already has some texture - use it\nmaterialTest.map = textureFromId(testView.textureId, renderer);\n\n// If the view creates a new texture - update the material\ntestView.on('reset', (textureId) =\u003e {\n\trelease();\n\tmaterialTest.map = textureFromId(textureId, renderer);\n});\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnode-3d%2F3d-qml-raub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnode-3d%2F3d-qml-raub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnode-3d%2F3d-qml-raub/lists"}