Nocturnal Practitioners of Magic

    @react-vertex/material-hooks
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.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

    0

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    131 kB

    Total Files

    94

    Last publish

    Collaborators

    • sghall