You can install the packages individually or just grab the kitchensink version with everything - and leave it to treeshaking to remove unused code.

npm i @gsimone/things

import { CatenaryCurve, RaycasterHelper } from "@gsimone/things";

Packages

• Three
  • RaycasterHelper
  • Catenary Curve
  • Smoothdamp
• React Three Fiber
  • Layers
• Leva
  • bitmask plugin
• Vanilla
  • Bitmask

Three

RaycasterHelper

npm i @gsimone/three-raycaster-helper

Visualize a Raycaster (ray and near/far) and, optionally, its hits.

import { RaycasterHelper } from "@gsimone/three-raycaster-helper";

const raycaster = new Raycaster(origin, direction, 0.5, 10);
const helper = new RaycasterHelper(raycaster);

const hits = raycaster.intersectObjects(scene.children);
helper.hits = hits;

Catenary Curve

npm i @gsimone/three-catenary

Codesandbox

An hyperbole that passes through 2 points, used as a good enough approximation of ropes collapsing under their own weight between two points.

import { CatenaryCurve } from "@gsimone/three-catenary";

const catenary = new CatenaryCurve(p1, p2, 10);
const myGeometry = new TubeGeometry(catenary, 100, 0.1, 20, false);

@todo add credits & tiny explaination

Smoothdamp

npm i @gsimone/smoothdamp

Port of Unity's SmoothDamp.

import { SmoothDamp } from "@gsimone/smoothdamp";
import { SmoothDampVectors } from "@gsimone/smoothdamp/three";

const smoothDamp = new SmoothDamp(0.5, 10);
const x = smoothDamp.get(10, deltaTime);

// using with three.js Vectors
const mySmoothDampV = new SmoothDampVectors(0.5, 10);
const target = new Vector3(0, 0, 0);
const dest = new Vector3(10, 0, 0);

target.copy(mySmoothDampV.get(target, dest, deltaTime));

React Three Fiber

Layers

npm i @gsimone/r3f-layers

Simple helper for three's Layers, lets you set an object's layers in a declarative manner:

<mesh>
  <Layers layers={[0, 1, 3]} /> {/* will set layers 0, 1 and 3 exclusively */}
</mesh>

Leva

bitmask plugin

npm i @gsimone/leva-plugin-bitmask

Plugin to add a bitmask-type input. Returns a bitmask object from bitmaskjs with an additional layersArray property to get an array compatible with the Layers r3f component

const { layers } = useControls({
  layers: bitmask({
    value: [1, 0, 1], // sets first bit to 1, second to 0, third to 1
    size: 16,
  }),
  layers2: bitmask({
    value: 3, // sets the integer of the bitmask to 3, equivalent to [1, 1]
  }),
});

layers.layersArray; // [0]

TODO

Add alternative APIs to set the initial value.

Vanilla

Bitmask

npm i @gsimone/bitmask

Tiny library for bitmasks.

const bitmask = new Bitmask([1, 0, 1], 16);

bitmask.setBit(1, 1).clearBit(2).getBits();