Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

@react-vertex/material-hooks

2.5.0 • Public • Published

@react-vertex/material-hooks

license npm version bundlephobia

Documentation and Examples

React hooks for working with materials in React Vertex.

Install via npm:
npm install @react-vertex/material-hooks
Importing:
import {
  usePhongSolid,
  usePhongTextured,
  useBasicSolid,
  useBasicTextured,
  useLambertSolid,
  useLambertTextured,
} from '@react-vertex/material-hooks'
Naming convention

This package uses a naming convention based (loosely) on the convention used by the .mtl format.

Name Description
kd Material Diffuse
ka Material Ambient
na Ambient Strength
ks Material Specular
ns Specular Strength
mapKd Diffuse Map
mapKs Specular Map

usePhongSolid(kd?, na?, ns?, ka?, ks?) => WebGLProgram

Hook for Phong with a solid color. This program reacts to lights in the scene.

Arguments:

kd (optional): An array of length 3 for the diffuse color (defaults to white [1, 1, 1]).

na (optional): Number for amount of ambient lighting should be between 0 and 1 (defaults to 0).

ns (optional): Number for specular strength should be between 0 and 1000 (defaults to 500).

ka (optional): An array of length 3 for the ambient color (defaults to white [1, 1, 1]).

ks (optional): An array of length 3 for the specular color (defaults to grey [0.6, 0.6, 0.6]).

Returns:

WebGLProgram: A WebGLProgram instance.

Required attributes:

Geometries using this program must set the following attributes:

  • vec3 position
  • vec3 normal
Example Usage:
import { useHex } from '@react-vertex/color-hooks'
import { usePhongSolid } from '@react-vertex/material-hooks'
 
...
  const diffuse = useHex('#323334', true)
  const program = usePhongSolid(diffuse, 0.15)
 
  return (
    <material program={program}>
      ...
    </material>
  )
...

usePhongTextured(mapKd, na?, ns?, ka?, ks?) => WebGLProgram

Hook for Phong with texture colors. This program reacts to lights in the scene.

Arguments:

mapKd: A texture to be used for the material colors.

na (optional): Number for amount of ambient lighting should be between 0 and 1 (defaults to 0).

ns (optional): Number for specular strength should be between 0 and 1000 (defaults to 500).

ka (optional): An array of length 3 for the ambient color (defaults to white [1, 1, 1]).

ks (optional): An array of length 3 for the specular color (defaults to grey [0.6, 0.6, 0.6]).

Returns:

WebGLProgram: A WebGLProgram instance.

Required attributes:

Geometries using this program must set the following attributes:

  • vec3 position
  • vec3 normal
  • vec2 uv
Example Usage:
import { useTexture2d } from '@react-vertex/core'
import { usePhongTextured } from '@react-vertex/material-hooks'
 
...
  const [texture] = useTexture2d(textureUrl)
  const program = usePhongTextured(texture, 0.15)
 
  return (
    <material program={program}>
      ...
    </material>
  )
...

useBasicSolid(kd?) => WebGLProgram

Hook for basic program with a solid color. This program does not react to lights in the scene.

Arguments:

kd (optional): An array of length 3 for the diffuse color (default to white [1, 1, 1]).

Returns:

WebGLProgram: A WebGLProgram instance.

Required attributes:

Geometries using this program must set the following attributes:

  • vec3 position
Example Usage:
import { useHex } from '@react-vertex/color-hooks'
import { useBasicSolid } from '@react-vertex/material-hooks'
 
...
  const diffuse = useHex('#323334', true)
  const program = useBasicSolid(diffuse)
 
  return (
    <material program={program}>
      ...
    </material>
  )
...

useBasicTextured(mapKd) => WebGLProgram

Hook for basic program with texture colors. This program does not react to lights in the scene.

Arguments:

mapKd: An array of length 3 for the diffuse color (default to white [1, 1, 1]).

Returns:

WebGLProgram: A WebGLProgram instance.

Required attributes:

Geometries using this program must set the following attributes:

  • vec3 position
  • vec2 uv
Example Usage:
import { useTexture2d } from '@react-vertex/core'
import { useBasicTextured } from '@react-vertex/material-hooks'
 
...
  const [texture] = useTexture2d(textureUrl)
  const program = useBasicTextured(texture)
 
  return (
    <material program={program}>
      ...
    </material>
  )
...

useLambertSolid(kd?, na?, ka?) => WebGLProgram

Hook for Lambert with a solid color. This program reacts to lights in the scene.

Arguments:

kd (optional): An array of length 3 for the diffuse color (defaults to white [1, 1, 1]).

na (optional): Number for amount of ambient lighting should be between 0 and 1 (defaults to 0).

ka (optional): An array of length 3 for the ambient color (defaults to white [1, 1, 1]).

Returns:

WebGLProgram: A WebGLProgram instance.

Required attributes:

Geometries using this program must set the following attributes:

  • vec3 position
  • vec3 normal
Example Usage:
import { useHex } from '@react-vertex/color-hooks'
import { useLambertSolid } from '@react-vertex/material-hooks'
 
...
  const diffuse = useHex('#323334', true)
  const program = useLambertSolid(diffuse, 0.15)
 
  return (
    <material program={program}>
      ...
    </material>
  )
...

useLambertTextured(mapKd, na?, ka?) => WebGLProgram

Hook for Lambert with texture colors. This program reacts to lights in the scene.

Arguments:

mapKd: A texture to be used for the material colors.

na (optional): Number for amount of ambient lighting should be between 0 and 1 (defaults to 0).

ka (optional): An array of length 3 for the ambient color (defaults to white [1, 1, 1]).

Returns:

WebGLProgram: A WebGLProgram instance.

Required attributes:

Geometries using this program must set the following attributes:

  • vec3 position
  • vec3 normal
  • vec2 uv
Example Usage:
import { useTexture2d } from '@react-vertex/core'
import { useLambertTextured } from '@react-vertex/material-hooks'
 
...
  const [texture] = useTexture2d(textureUrl)
  const program = useLambertTextured(texture, 0.15)
 
  return (
    <material program={program}>
      ...
    </material>
  )
...

Install

npm i @react-vertex/material-hooks

DownloadsWeekly Downloads

8

Version

2.5.0

License

MIT

Unpacked Size

79.5 kB

Total Files

43

Last publish

Collaborators

  • avatar