Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arthurmj96/nativescript-troisjs
✨ TroisJS + NativeScript-Vue3 ⚡
https://github.com/arthurmj96/nativescript-troisjs
nativescript threejs troisjs vue vue3
Last synced: 1 day ago
JSON representation
✨ TroisJS + NativeScript-Vue3 ⚡
- Host: GitHub
- URL: https://github.com/arthurmj96/nativescript-troisjs
- Owner: ArthurMJ96
- License: mit
- Fork: true (troisjs/trois)
- Created: 2023-10-10T05:18:26.000Z (12 months ago)
- Default Branch: master
- Last Pushed: 2024-01-28T17:10:00.000Z (8 months ago)
- Last Synced: 2024-09-26T09:03:12.193Z (1 day ago)
- Topics: nativescript, threejs, troisjs, vue, vue3
- Language: TypeScript
- Homepage: https://troisjs.github.io
- Size: 10 MB
- Stars: 8
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[![NPM Package][npm]][npm-url]
[![NPM Downloads][npm-downloads]][npmtrends-url]
[npm]: https://img.shields.io/npm/v/nativescript-troisjs
[npm-url]: https://www.npmjs.com/package/nativescript-troisjs
[npm-downloads]: https://img.shields.io/npm/dw/nativescript-troisjs
[npmtrends-url]: https://www.npmtrends.com/nativescript-troisjs
# ✨ 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 `` 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:
+ Added `useGameLoop` composable.
+ & 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 `` instead of ``.
```html
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
)
```
Read more on https://troisjs.github.io/guide/
- 💻 Examples (wip) : https://troisjs.github.io/ ([sources](https://github.com/troisjs/troisjs.github.io/tree/master/src/components))
- 📖 Doc (wip) : https://troisjs.github.io/guide/ ([repo](https://github.com/troisjs/troisjs.github.io))
- 🚀 Codepen examples : https://codepen.io/collection/AxoWoz
## Issues
If you encounter any issues, please open a new issue with as much detail as possible. This is **beta** software, so there might be bugs.
- [Join Discord](https://nativescript.org/discord)