Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

driver-webgl

0.6.5 • Public • Published

driver-webgl

WebGL driver for Rax.

Components and APIs are based on three.js design and implementation. Use markup language and declarative writing to simplify development.

Install

s

$ npm install --save driver-webgl

Usage

import {createElement, Component, render} from 'rax';
import WebGLDriver from 'driver-webgl';
 
class HelloWorld extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      cubeRotation: [0, 0, 0]
    };
    this.width = window.innerWidth;
    this.height = window.innerHeight;
    this.cameraPosition = [0, 0, 5];
  }
 
  onFrame = () => {
    this.setState({
      cubeRotation: [
        this.state.cubeRotation[0] + 0.01,
        this.state.cubeRotation[1] + 0.01,
        0
      ]
    });
  }
 
  render() {
    return (
      <scene
        width={this.width}
        height={this.height}
        onFrame={this.onFrame}
      >
        <perspective-camera
          fov={75}
          aspect={this.width / this.height}
          near={0.1}
          far={1000}
          position={this.cameraPosition}
        />
        <mesh
          rotation={this.state.cubeRotation}
        >
          <box-geometry
            width={1}
            height={1}
            depth={1}
          />
          <mesh-basic-material
            color={0x00ff00}
          />
        </mesh>
      </scene>
    );
  }
}
 
render(<HelloWorld />, document.body, {
  driver: WebGLDriver
});

Built-in Tags

Scenes

  • scene

Cameras

  • perspective-camera

Controls

  • orbit-controls
  • trackball-controls

Core

  • geometry
  • buffer-geometry
  • object-3d
  • raycaster

Geometries

  • box-geometry
  • cylinder-geometry
  • sphere-geometry

Lights

  • ambient-light
  • directional-light

Materials

  • line-basic-material
  • line-dashed-material
  • mesh-basic-material
  • mesh-lambert-material
  • mesh-phong-material
  • points-material

Objects

  • line
  • mesh
  • points

install

npm i driver-webgl

Downloadsweekly downloads

0

version

0.6.5

license

BSD-3-Clause

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability