{"id":15141874,"url":"https://github.com/arthurmj96/nativescript-troisjs","last_synced_at":"2025-09-29T10:31:20.700Z","repository":{"id":199414339,"uuid":"702829054","full_name":"ArthurMJ96/nativescript-troisjs","owner":"ArthurMJ96","description":"✨ TroisJS + NativeScript-Vue3 ⚡","archived":false,"fork":true,"pushed_at":"2024-01-28T17:10:00.000Z","size":10517,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-09-26T09:03:12.193Z","etag":null,"topics":["nativescript","threejs","troisjs","vue","vue3"],"latest_commit_sha":null,"homepage":"https://troisjs.github.io","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"troisjs/trois","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ArthurMJ96.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":"klevron","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2023-10-10T05:18:26.000Z","updated_at":"2024-01-29T09:38:38.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ArthurMJ96/nativescript-troisjs","commit_stats":null,"previous_names":["arthurmj96/trois","arthurmj96/nativescript-troisjs"],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArthurMJ96%2Fnativescript-troisjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArthurMJ96%2Fnativescript-troisjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArthurMJ96%2Fnativescript-troisjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArthurMJ96%2Fnativescript-troisjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArthurMJ96","download_url":"https://codeload.github.com/ArthurMJ96/nativescript-troisjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219874490,"owners_count":16554583,"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":["nativescript","threejs","troisjs","vue","vue3"],"created_at":"2024-09-26T09:03:28.594Z","updated_at":"2025-09-29T10:31:19.096Z","avatar_url":"https://github.com/ArthurMJ96.png","language":"TypeScript","funding_links":["https://github.com/sponsors/klevron"],"categories":[],"sub_categories":[],"readme":"\n[![NPM Package][npm]][npm-url]\n[![NPM Downloads][npm-downloads]][npmtrends-url]\n\n[npm]: https://img.shields.io/npm/v/nativescript-troisjs\n[npm-url]: https://www.npmjs.com/package/nativescript-troisjs\n[npm-downloads]: https://img.shields.io/npm/dw/nativescript-troisjs\n[npmtrends-url]: https://www.npmtrends.com/nativescript-troisjs\n\n# ✨ TroisJS + NativeScript-Vue3 ⚡\n\nI wanted something similar to *react-three-fiber* but for Nativescript + VueJS.\n\nSo I found TroisJS and adapted it.\n\n+ Changed Renderer Component to allow passing in custom Canvas instance.\n+ Added `\u003cNsRenderer\u003e` Component to \n   + properly wait for the Canvas to be loaded\n   + pass loaded canvas into Renderer\n   + apply width, height \u0026 scaling via wrapper ContentView\n   + add resolution-scale prop to optionally lower the rendered resolution for higher FPS (Ex: for Android TV)\n   + adapt resize prop to work on orientation change\n\n+ Changed Renderer's onMounted, onBeforeRender, onAfterRender \u0026 onResize callbacks to be register directly as props\n    \u003e Ex: \u003cNsRenderer @before-render=\"fn\" /\u003e\n+ Added `useGameLoop` composable.\n+ \u0026 more.\n\n## Usage (NativeScript-Vue3)\n\n### Install\n\n```bash\nnpm i three @nativescript/canvas @nativescript/canvas-polyfill nativescript-troisjs\n```\n\n#### Register canvas element \u0026 apply polyfill\n\n```js\n// app.ts|js\n\nimport '@nativescript/canvas-polyfill'\nregisterElement('canvas', () =\u003e require('@nativescript/canvas').Canvas)\n\n// ...\n\n```\n\n\n#### Example usage\n\nSimply use `\u003cNsRenderer\u003e` instead of `\u003cRenderer\u003e`.\n\n```html\n\u003cscript lang=\"ts\" setup\u003e\nimport { ref } from 'nativescript-vue'\nimport chroma from 'chroma-js'\nimport {\n  Camera,\n  ToonMaterial,\n  AmbientLight,\n  PointLight,\n  Torus,\n  Scene,\n  NsRenderer,\n  useGameLoop,\n} from 'nativescript-troisjs'\n\nconst n = ref(30)\nconst cscale = chroma.scale(['#dd3e1b', '#0b509c'])\nconst color = (i: number) =\u003e cscale(i / n.value).css()\nconst meshRefs = ref\u003c(typeof Torus)[]\u003e([])\n\n// useGameLoop is a optional helper to create a game loop with a fixed frame rate.\nconst { loop, fps } = useGameLoop(\n  function ({ time }, delta) {\n    // Example from: https://troisjs.github.io/examples/loop.html\n    let mesh, ti\n    for (let i = 1; i \u003c= n.value; i++) {\n      mesh = meshRefs.value?.[i]?.mesh\n      if (mesh) {\n        ti = time - i * 500\n        mesh.rotation.x = ti * 0.00015\n        mesh.rotation.y = ti * 0.0002\n        mesh.rotation.z = ti * 0.00017\n      }\n    }\n  },\n  144,\n  true\n)\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cGridLayout rows=\"*, auto\" class=\"bg-base-200\"\u003e\n    \u003cNsRenderer row=\"0\" rowSpan=\"2\" @before-render=\"loop\" alpha orbit-ctrl\u003e\n      \u003cCamera :position=\"{ z: 15 }\" /\u003e\n      \u003cScene\u003e\n        \u003cAmbientLight color=\"#808080\" /\u003e\n        \u003cPointLight color=\"#ffffff\" :position=\"{ y: 50, z: 0 }\" /\u003e\n        \u003cPointLight color=\"#ffffff\" :position=\"{ y: -50, z: 0 }\" /\u003e\n        \u003cPointLight color=\"#ffffff\" :position=\"{ y: 0, z: 0 }\" /\u003e\n        \u003cTorus\n          v-for=\"i in n\"\n          :key=\"i\"\n          ref=\"meshRefs\"\n          :radius=\"i * 0.2\"\n          :tube=\"0.1\"\n          :radial-segments=\"8\"\n          :tubular-segments=\"(i + 2) * 4\"\n        \u003e\n          \u003cToonMaterial :color=\"color(i)\" /\u003e\n        \u003c/Torus\u003e\n      \u003c/Scene\u003e\n    \u003c/NsRenderer\u003e\n\n    \u003cLabel row=\"1\" :text=\"`FPS: ${fps}`\" class=\"text-center\" /\u003e\n  \u003c/GridLayout\u003e\n\u003c/template\u003e\n\n```\n\u003chr\u003e\nRead more on https://troisjs.github.io/guide/\n\n- 💻 Examples (wip) : https://troisjs.github.io/ ([sources](https://github.com/troisjs/troisjs.github.io/tree/master/src/components))\n- 📖 Doc (wip) : https://troisjs.github.io/guide/ ([repo](https://github.com/troisjs/troisjs.github.io))\n- 🚀 Codepen examples : https://codepen.io/collection/AxoWoz\n\n\u003cp style=\"text-align:center;\"\u003e\n  \u003ca href=\"https://troisjs-flower.pages.dev\"\u003e\u003cimg src=\"/screenshots/troisjs_15.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs-water.pages.dev\"\u003e\u003cimg src=\"/screenshots/troisjs_14.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs-dof-test.pages.dev\"\u003e\u003cimg src=\"/screenshots/troisjs_13.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs.github.io/little-planet/\"\u003e\u003cimg src=\"/screenshots/little-planet.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs.github.io/examples/physics/1.html\"\u003e\u003cimg src=\"/screenshots/troisjs_10.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs-trails.pages.dev\"\u003e\u003cimg src=\"/screenshots/troisjs_12.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs.github.io/examples/demos/2.html\"\u003e\u003cimg src=\"/screenshots/troisjs_5.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs.github.io/examples/materials/2.html\"\u003e\u003cimg src=\"/screenshots/troisjs_2.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs.github.io/examples/loop.html\"\u003e\u003cimg src=\"/screenshots/troisjs_6.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs.github.io/examples/shadows.html\"\u003e\u003cimg src=\"/screenshots/troisjs_7.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs.github.io/examples/demos/5.html\"\u003e\u003cimg src=\"/screenshots/troisjs_8.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs.github.io/examples/lights.html\"\u003e\u003cimg src=\"/screenshots/troisjs_9.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n## Issues\n\nIf you encounter any issues, please open a new issue with as much detail as possible. This is **beta** software, so there might be bugs.\n\n- [Join Discord](https://nativescript.org/discord)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farthurmj96%2Fnativescript-troisjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farthurmj96%2Fnativescript-troisjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farthurmj96%2Fnativescript-troisjs/lists"}