npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@react-vertex/geometry-hooks

v4.0.0

Published

React hooks for geometries in React Vertex

Downloads

24

Readme

@react-vertex/geometry-hooks

license npm version bundlephobia

Documentation and Examples

React hooks for working with geometries in React Vertex. This package contains ports of the code from THREE.js that generates the indices, vertices, normals and uvs for various geometry types.

Install via npm:
npm install @react-vertex/geometry-hooks
Importing:
import {
  boxGeometry,
  useBoxGeometry,
  useBoxElements,

  circleGeometry,
  useCircleGeometry,
  useCircleElements,

  cylinderGeometry,
  useCylinderGeometry,
  useCylinderElements,

  planeGeometry,
  usePlaneGeometry,
  usePlaneElements,
  
  sphereGeometry,
  useSphereGeometry,
  useSphereElements,
  
  torusGeometry,
  useTorusGeometry,
  useTorusElements,
} from '@react-vertex/geometry-hooks'

boxGeometry(width?, height?, depth?, wCount?, hCount?, dCount?) => object

useBoxGeometry(width?, height?, depth?, wCount?, hCount?, dCount?) => object

useBoxElements(width?, height?, depth?, wCount?, hCount?, dCount?) => object

React hooks and a pure function for working with box geometries. boxGeometry is a regular pure function (not a hook) that returns the raw indices, vertices, normals and uvs. useBoxGeometry returns the same thing as boxGeometry but can be used as a hook to memoize the generation of the data. useBoxElements is a convenience hook that will create all the buffers and attributes needed to draw the geometry into the scene.

Arguments:

width (optional): A number for the width of the box (defaults to 1).

height (optional): A number for the height of the box (defaults to 1).

depth (optional): A number for the depth of the box (defaults to 1).

wCount (optional): Number of segments for the width (defaults to 1).

hCount (optional): Number of segments for the height (defaults to 1).

dCount (optional): Number of segments for the depth (defaults to 1).

Return Values:

boxGeometry => { indices, vertices, normals, uvs }

useBoxGeometry => { indices, vertices, normals, uvs }

useBoxElements => { index, count, attributes, drawElements }

Example Usage:
import React, { Fragment } from 'react'
import { useVector3 } from '@react-vertex/math-hooks'
import { useBoxElements } from '@react-vertex/geometry-hooks'

function Boxes() {
  const boxElements = useBoxElements(10, 10, 10)

  const p1 = useVector3(10, 0, 0)
  const p2 = useVector3(20, 0, 0)
  const p3 = useVector3(30, 0, 0)
  const p4 = useVector3(40, 0, 0)

  return (
    <Fragment>
      <geometry position={p1} {...boxElements} />
      <geometry position={p2} {...boxElements} />
      <geometry position={p3} {...boxElements} />
      <geometry position={p4} {...boxElements} />
    </Fragment>
  )
}
import React, { Fragment, useMemo } from 'react'
import { useVector3 } from '@react-vertex/math-hooks'
import { useBoxGeometry } from '@react-vertex/geometry-hooks'
import { useWebGLContext, useStaticBuffer, useAttribute } from '@react-vertex/core'

// NOTE: This is exactly equivalent to the above example.
// More advanced users can see here how to access the attributes, buffers, etc.
// All the geometries work in exactly the same way.

function Boxes() {
  const geometry = useBoxGeometry(10, 10, 10)

  // this is what "useBoxElements" does internally...
  const gl = useWebGLContext()

  const positionBuffer = useStaticBuffer(gl, geometry.vertices, false, 'F32')
  const position = useAttribute(gl, 3, positionBuffer)

  const normalBuffer = useStaticBuffer(gl, geometry.normals, false, 'F32')
  const normal = useAttribute(gl, 3, normalBuffer)

  const uvBuffer = useStaticBuffer(gl, geometry.uvs, false, 'F32')
  const uv = useAttribute(gl, 2, uvBuffer)

  const indexBuffer = useStaticBuffer(gl, geometry.indices, true, 'U16')

  const boxElements = useMemo(
    () => ({
      index: indexBuffer,
      attributes: { position, normal, uv },
      drawElements: { mode: 'TRIANGLES', count: geometry.indices.length },
    }),
    [indexBuffer, geometry.indices.length, position, normal, uv],
  )

  const p1 = useVector3(10, 0, 0)
  const p2 = useVector3(20, 0, 0)
  const p3 = useVector3(30, 0, 0)
  const p4 = useVector3(40, 0, 0)

  return (
    <Fragment>
      <geometry position={p1} {...boxElements} />
      <geometry position={p2} {...boxElements} />
      <geometry position={p3} {...boxElements} />
      <geometry position={p4} {...boxElements} />
    </Fragment>
  )
}

circleGeometry(radius?, segments?, thetaStart?, thetaLength?) => object

useCircleGeometry(radius?, segments?, thetaStart?, thetaLength?) => object

useCircleElements(radius?, segments?, thetaStart?, thetaLength?) => object

React hooks and a pure function for working with circle geometries. circleGeometry is a regular pure function (not a hook) that returns the raw indices, vertices, normals and uvs. useCircleGeometry returns the same thing as circleGeometry but can be used as a hook to memoize the generation of the data. useCircleElements is a convenience hook that will create all the buffers and attributes needed to draw the geometry into the scene.

Arguments:

radius (optional): A number for the radius of the circle (defaults to 1).

segments (optional): Number of segments (defaults to 8).

thetaStart (optional): Start angle for first segment (defaults to 0).

thetaLength (optional): Angle amount to be generated (defaults to Math.PI * 2).

Return Values:

circleGeometry => { indices, vertices, normals, uvs }

useCircleGeometry => { indices, vertices, normals, uvs }

useCircleElements => { index, count, attributes, drawElements }

Example Usage:

(see the examples for box geometry)

cylinderGeometry(radiusTop?, radiusBottom?, height?, radialSegments?, heightSegments?, openEnded?, thetaStart?, thetaLength?) => object

useCylinderGeometry(radiusTop?, radiusBottom?, height?, radialSegments?, heightSegments?, openEnded?, thetaStart?, thetaLength?) => object

useCylinderElements(radiusTop?, radiusBottom?, height?, radialSegments?, heightSegments?, openEnded?, thetaStart?, thetaLength?) => object

React hooks and a pure function for working with cylinder geometries. cylinderGeometry is a regular pure function (not a hook) that returns the raw indices, vertices, normals and uvs. useCylinderGeometry returns the same thing as cylinderGeometry but can be used as a hook to memoize the generation of the data. useCylinderElements is a convenience hook that will create all the buffers and attributes needed to draw the geometry into the scene.

Arguments:

radiusTop (optional): A number for the top radius of the cylinder (defaults to 1).

radiusBottom (optional): A number for the bottom radius of the cylinder (defaults to 1).

height (optional): A number for the height of the cylinder (defaults to 1).

radialSegments (optional): Number of radial segments (defaults to 8).

heightSegments (optional): Number of height segments (defaults to 1).

openEnded (optional): Boolean for not including caps on ends (defaults to false).

thetaStart (optional): Start angle for first segment (defaults to 0).

thetaLength (optional): Angle amount to be generated (defaults to Math.PI * 2).

Return Values:

cylinderGeometry => { indices, vertices, normals, uvs }

useCylinderGeometry => { indices, vertices, normals, uvs }

useCylinderElements => { index, count, attributes, drawElements }

Example Usage:

(see the examples for box geometry)

planeGeometry(width?, height?, widthSegments?, heightSegments?) => object

usePlaneGeometry(width?, height?, widthSegments?, heightSegments?) => object

usePlaneElements(width?, height?, widthSegments?, heightSegments?) => object

React hooks and a pure function for working with plane geometries. planeGeometry is a regular pure function (not a hook) that returns the raw indices, vertices, normals and uvs. usePlaneGeometry returns the same thing as planeGeometry but can be used as a hook to memoize the generation of the data. usePlaneElements is a convenience hook that will create all the buffers and attributes needed to draw the geometry into the scene.

Arguments:

width (optional): A number for the width of the plane (defaults to 1).

height (optional): A number for the height of the plane (defaults to 1).

widthSegments (optional): Number of width segments (defaults to 1).

heightSegments (optional): Number of height segments (defaults to 1).

Return Values:

planeGeometry => { indices, vertices, normals, uvs }

usePlaneGeometry => { indices, vertices, normals, uvs }

usePlaneElements => { index, count, attributes, drawElements }

Example Usage:

(see the examples for box geometry)

sphereGeometry(radius?, widthSegments?, heightSegments?, phiStart?, phiLength?, thetaStart?, thetaLength?) => object

useSphereGeometry(radius?, widthSegments?, heightSegments?, phiStart?, phiLength?, thetaStart?, thetaLength?) => object

useSphereElements(radius?, widthSegments?, heightSegments?, phiStart?, phiLength?, thetaStart?, thetaLength?) => object

React hooks and a pure function for working with sphere geometries. sphereGeometry is a regular pure function (not a hook) that returns the raw indices, vertices, normals and uvs. useSphereGeometry returns the same thing as sphereGeometry but can be used as a hook to memoize the generation of the data. useSphereElements is a convenience hook that will create all the buffers and attributes needed to draw the geometry into the scene.

Arguments:

radius (optional): A number for the radius of the sphere (defaults to 1).

widthSegments (optional): Number of width segments (defaults to 8).

heightSegments (optional): Number of height segments (defaults to 6).

phiStart (optional): Horizontal start angle for first segment (defaults to 0).

phiLength (optional): Horizontal angle amount to be generated (defaults to Math.PI * 2).

thetaStart (optional): Vertical start angle for first segment (defaults to 0).

thetaLength (optional): Vertical angle amount to be generated (defaults to Math.PI).

Return Values:

sphereGeometry => { indices, vertices, normals, uvs }

useSphereGeometry => { indices, vertices, normals, uvs }

useSphereElements => { index, count, attributes, drawElements }

Example Usage:

(see the examples for box geometry)

torusGeometry(radius?, tube?, radialSegments?, tubularSegments?, arc?) => object

useTorusGeometry(radius?, tube?, radialSegments?, tubularSegments?, arc?) => object

useTorusElements(radius?, tube?, radialSegments?, tubularSegments?, arc?) => object

React hooks and a pure function for working with torus geometries. torusGeometry is a regular pure function (not a hook) that returns the raw indices, vertices, normals and uvs. useTorusGeometry returns the same thing as torusGeometry but can be used as a hook to memoize the generation of the data. useTorusElements is a convenience hook that will create all the buffers and attributes needed to draw the geometry into the scene.

Arguments:

radius (optional): A number for the radius of the torus (defaults to 1).

tube (optional): A number for the radius of the tube of the torus (defaults to 0.4).

radialSegments (optional): Number of radial segments (defaults to 8).

tubularSegments (optional): Number of tubular segments (defaults to 6).

arc (optional): Angular amount to be generated (defaults to Math.PI * 2).

Return Values:

torusGeometry => { indices, vertices, normals, uvs }

useTorusGeometry => { indices, vertices, normals, uvs }

useTorusElements => { index, count, attributes, drawElements }

Example Usage:

(see the examples for box geometry)