Naive Puppets Marching

    nativescript-three
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0-alpha3 • Public • Published

    nativescript-three

    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

    Install

    npm i nativescript-three

    DownloadsWeekly Downloads

    5

    Version

    1.0.0-alpha3

    License

    Apache-2.0

    Unpacked Size

    19 kB

    Total Files

    12

    Last publish

    Collaborators

    • triniwiz