✨ TroisJS + NativeScript-Vue3 ⚡

我想找一个类似 react-three-fiber 的库，但适用于 Nativescript + VueJS。

所以我找到了 TroisJS 并对其进行了适配。

• 更改了渲染器组件，以允许传入自定义 Canvas 实例。

• 添加了 <NsRenderer> 组件，以

  • 正确等待 Canvas 加载
  • 将加载的 Canvas 传递给渲染器
  • 通过包装 ContentView 应用宽度、高度和缩放
  • 添加了 resolution-scale 属性，可选项降低渲染分辨率以提高帧率（例如：适用于 Android TV）
  • 适配 resize 属性以适应方向变化

• 更改了渲染器的 onMounted、onBeforeRender、onAfterRender 和 onResize 回调，以便直接注册为属性

  例如：<NsRenderer @before-render="fn" />

• 添加了 useGameLoop 组合式。

• & 更多。

使用方法（NativeScript-Vue3）

安装

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

注册 canvas 元素并应用 polyfill

// app.ts|js

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

// ...

示例用法

只需使用 <NsRenderer> 而不是 <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>

• 💻 示例（wip）: https://troisjs.github.io/ (源代码)
• 📖 文档（wip）: https://troisjs.github.io/guide/ (仓库)
• 🚀 Codepen 示例: https://codepen.io/collection/AxoWoz

问题

如果您遇到任何问题，请尽可能详细地打开一个新问题。这是一个 beta 软件，所以可能存在错误。

• 加入 Discord