!NPM Packagenpmnpm-url
!NPM Downloadsnpm-downloadsnpmtrends-url
Read more on https://troisjs.github.io/guide/
✨ TroisJS + NativeScript-Vue3 ⚡
I wanted something similar to react-three-fiber but for Nativescript + VueJS.
So I found TroisJS and adapted it.
- Changed Renderer Component to allow passing in custom Canvas instance.
- Added
<NsRenderer>Component to
+ properly wait for the Canvas to be loaded+ pass loaded canvas into Renderer+ apply width, height & scaling via wrapper ContentView+ add resolution-scale prop to optionally lower the rendered resolution for higher FPS (Ex: for Android TV)+ adapt resize prop to work on orientation change- Changed Renderer's onMounted, onBeforeRender, onAfterRender & onResize callbacks to be register directly as props
> Ex: <NsRenderer @before-render="fn" />- Added
useGameLoopcomposable.
- & more.
Usage (NativeScript-Vue3)
Install
```bash npm i three @nativescript/canvas @nativescript/canvas-polyfill nativescript-troisjs ```Register canvas element & apply polyfill
```js // app.ts|js import '@nativescript/canvas-polyfill' registerElement('canvas', () => require('@nativescript/canvas').Canvas) // ... ```Example usage
Simply use<NsRenderer> instead of <Renderer>.
```html
<NsRenderer row="0" rowSpan="2" @before-render="loop" alpha orbit-ctrl><Camera :position="{ z: 15 }" /><Scene><AmbientLight color="#808080" /><PointLight color="#ffffff" :position="{ y: 50, z: 0 }" /><PointLight color="#ffffff" :position="{ y: -50, z: 0 }" /><PointLight color="#ffffff" :position="{ y: 0, z: 0 }" /><Torusv-for="i in n":key="i"ref="meshRefs":radius="i * 0.2":tube="0.1":radial-segments="8":tubular-segments="(i + 2) * 4"><ToonMaterial :color="color(i)" /></Torus></Scene></NsRenderer><Label row="1" :text="`FPS: ${fps}`" class="text-center" />Read more on https://troisjs.github.io/guide/
- 💻 Examples (wip) : https://troisjs.github.io/ (sources)
- 📖 Doc (wip) : https://troisjs.github.io/guide/ (repo)
- 🚀 Codepen examples : https://codepen.io/collection/AxoWoz
