nt
nativescript-three
npm i nativescript-three
nt

nativescript-three

The source is now managed at https://github.com/NativeScript/canvas

by Osei Fortune

1.0.0-alpha3 (see all)License:Apache-2.0TypeScript:Not Found
npm i nativescript-three
Readme

nativescript-three

The source is now managed at https://github.com/NativeScript/canvas

npm npm Build Status

Installation

npm i three nativescript-three

Usage

import TNSTHREE from 'nativescript-three';

Creating a Renderer

TNSTHREE.Renderer({ gl: WebGLRenderingContext, width: number, height: number, pixelRatio: number, ...extras })

Given a gl (context) from an TNSCanvas, return a THREE.WebGLRenderer that draws into it.

import { Renderer } from 'nativescript-three';

var camera, scene, renderer;
var geometry, material, mesh;

canvas; // TNSCanvas instance
init();
animate();

function init() {
  const gl = canvas.getContext('webgl');
  // We have access to window.innerWidth / window.innerHeight but we want the current view size
  const { drawingBufferWidth: width, drawingBufferHeight: height } = gl;
  camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);
  camera.position.z = 1;

  scene = new THREE.Scene();

  geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
  material = new THREE.MeshNormalMaterial();

  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  renderer = new TNSTHREE.Renderer({ gl });
  renderer.setSize(width, height);
}

function animate() {
  requestAnimationFrame(animate);

  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.02;

  renderer.render(scene, camera);

  canvas.flush(); // very important, call when you need to render to screen.
}

E.G Output

Output

E.G Output

License

Apache License Version 2.0, January 2004

Downloads/wk

21

GitHub Stars

23

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

0

OPEN PRs

1
VersionTagPublished
1.0.0-alpha3
latest
2yrs ago
No alternatives found
No tutorials found
Add a tutorial