@react-vertex/matrix-hooks v1.3.0

@react-vertex/matrix-hooks

Documentation and Examples

React hooks for working with matrices in WebGL. This package just contains a couple of items that were helpful in developing the examples. I think a package like this would be great but the API needs to be fleshed out. This package uses gl-matrix.

Install via npm:

npm install @react-vertex/matrix-hooks

Importing:

import {
  useIdentity,
  usePerspective,
} from '@react-vertex/matrix-hooks'

usePerspective(fov, aspect, near, far) => matrix

React hook to create a perspective projection matrix with the given field of view.

Arguments:

fov: A number defining the field of view. Generally, numbers from 35 to 75 are reasonable.

aspect: A number defining aspect ratio. In most cases you want to use canvas.width / canvas.height but other scenarios exist.

near (optional): The camera frustum near plane. Defaults to 1.

far (optional): The camera frustum far plane. Defaults to 1000.

Returns:

matrix: Returns an instance of a gl-matrix mat4

Example Usage:

import { usePerspective } from '@react-vertex/matrix-hooks'

...
  const projection = usePerspective(55, canvas.width / canvas.height, 0.1, 5000)
...

useIdentity([px], [py], [pz], [rx], [ry], [rz]) => matrix

React hook to create a new identity matrix. You can set the initial position and rotation.

Arguments:

px (optional): A number for the x position. Defaults to 0.

py (optional): A number for the y position. Defaults to 0.

pz (optional): A number for the z position. Defaults to 0.

rx (optional): A number for the x rotation in radians. Defaults to 0.

ry (optional): A number for the y rotation in radians. Defaults to 0.

rz (optional): A number for the z rotation in radians. Defaults to 0.

Returns:

matrix: Returns an instance of a gl-matrix mat4

Example Usage:

import { useIdentity } from '@react-vertex/matrix-hooks'

...
  const view = useIdentity(0, 20, 0)
...