Nativescript-troisjs NPM

✨ 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 useGameLoop composable.
& more.

Usage (NativeScript-Vue3)

Install

npm i three @nativescript/canvas @nativescript/canvas-polyfill nativescript-troisjs

Register canvas element & apply polyfill

// app.ts|js

import '@nativescript/canvas-polyfill'
registerElement('canvas', () => require('@nativescript/canvas').Canvas)

// ...

Example usage

Simply use <NsRenderer> instead of <Renderer>.

<script lang="ts" setup>
import { ref } from 'nativescript-vue'
import chroma from 'chroma-js'
import {
  Camera,
  ToonMaterial,
  AmbientLight,
  PointLight,
  Torus,
  Scene,
  NsRenderer,
  useGameLoop,
} from 'nativescript-troisjs'

const n = ref(30)
const cscale = chroma.scale(['#dd3e1b', '#0b509c'])
const color = (i: number) => cscale(i / n.value).css()
const meshRefs = ref<(typeof Torus)[]>([])

// useGameLoop is a optional helper to create a game loop with a fixed frame rate.
const { loop, fps } = useGameLoop(
  function ({ time }, delta) {
    // Example from: https://troisjs.github.io/examples/loop.html
    let mesh, ti
    for (let i = 1; i <= n.value; i++) {
      mesh = meshRefs.value?.[i]?.mesh
      if (mesh) {
        ti = time - i * 500
        mesh.rotation.x = ti * 0.00015
        mesh.rotation.y = ti * 0.0002
        mesh.rotation.z = ti * 0.00017
      }
    }
  },
  144,
  true
)
</script>

<template>
  <GridLayout rows="*, auto" class="bg-base-200">
    <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 }" />
        <Torus
          v-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" />
  </GridLayout>
</template>