https://github.com/gsimone/things
Loose collection of *things*
https://github.com/gsimone/things
Last synced: 12 months ago
JSON representation
Loose collection of *things*
- Host: GitHub
- URL: https://github.com/gsimone/things
- Owner: gsimone
- Created: 2022-04-02T09:27:40.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-06-21T17:27:14.000Z (about 4 years ago)
- Last Synced: 2025-07-06T18:56:38.523Z (12 months ago)
- Language: TypeScript
- Size: 3.01 MB
- Stars: 25
- Watchers: 1
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/@gsimone/things) [](https://github.com/gsimone/things/actions/workflows/node.js.yml)
👉 You can install the packages individually or just grab the kitchensink version with everything - and leave it to treeshaking to remove unused code.
```bash
npm i @gsimone/things
```
```js
import { CatenaryCurve, RaycasterHelper } from "@gsimone/things";
```
### Packages
- [Three](#three)
* [RaycasterHelper](#raycasterhelper)
* [Catenary Curve](#catenary-curve)
* [Smoothdamp](#smoothdamp)
- [React Three Fiber](#react-three-fiber)
* [Layers](#layers)
- [Leva](#leva)
* [bitmask plugin](#bitmask-plugin)
- [Vanilla](#vanilla)
* [Bitmask](#bitmask)
# Three
## RaycasterHelper
[](https://www.npmjs.com/@gsimone/three-raycaster-helper) [](https://bundlephobia.com/package/@gsimone/three-raycaster-helper)
```bash
npm i @gsimone/three-raycaster-helper
```
Visualize a Raycaster (ray and near/far) and, optionally, its hits.
```js
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
[](https://www.npmjs.com/@gsimone/three-catenary) [](https://bundlephobia.com/package/@gsimone/three-catenary)
```bash
npm i @gsimone/three-catenary
```
[](https://codesandbox.io/s/github/gsimone/things/tree/main/demo/src/demos/catenary)
An hyperbole that passes through 2 points, used as a good enough approximation of ropes collapsing under their own weight between two points.
```js
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
[](https://www.npmjs.com/@gsimone/smoothdamp) [](https://bundlephobia.com/package/@gsimone/smoothdamp)
```bash
npm i @gsimone/smoothdamp
```
Port of Unity's SmoothDamp.
```js
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
[](https://www.npmjs.com/@gsimone/r3f-layers) [](https://bundlephobia.com/package/@gsimone/r3f-layers)
```bash
npm i @gsimone/r3f-layers
```
Simple helper for three's Layers, lets you set an object's layers in a declarative manner:
```js
{/* will set layers 0, 1 and 3 exclusively */}
```
# Leva
## bitmask plugin
[](https://www.npmjs.com/@gsimone/leva-plugin-bitmask) [](https://bundlephobia.com/package/@gsimone/leva-plugin-bitmask)
```bash
npm i @gsimone/leva-plugin-bitmask
```
Plugin to add a bitmask-type input. Returns a bitmask object from [bitmaskjs](https://www.npmjs.com/package/bitmaskjs) with an additional `layersArray` property to get an array compatible with the [🔗 Layers r3f component](https://github.com/gsimone/things#layers)
```js
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
[](https://www.npmjs.com/@gsimone/bitmask)
[](https://bundlephobia.com/package/@gsimone/bitmask)
```bash
npm i @gsimone/bitmask
```
Tiny library for bitmasks.
```js
const bitmask = new Bitmask([1, 0, 1], 16);
bitmask.setBit(1, 1).clearBit(2).getBits();
```