# orthofloat

> floating shape React component using three.js

Latest version **1.0.0** (published 2016-07-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install orthofloat
pnpm add orthofloat
yarn add orthofloat
bun add orthofloat
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2016-07-16 |
| First published | 2016-06-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Known vulnerabilities | 0 (+11 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Russ Rinzler |
| Maintainers | russhr |

## Links

- npm: https://www.npmjs.com/package/orthofloat
- Repository: https://github.com/RussHR/orthofloat_src
- Homepage: https://github.com/RussHR/orthofloat_src#readme
- Issues: https://github.com/RussHR/orthofloat_src/issues
- npm.io page: https://npm.io/package/orthofloat

## Dependencies (10)

- [react](https://npm.io/package/react.md) 15.0.1
- [three](https://npm.io/package/three.md) 0.77.1
- [bowser](https://npm.io/package/bowser.md) 1.3.0
- [lodash](https://npm.io/package/lodash.md) 4.12.0
- [stats.js](https://npm.io/package/stats.js.md) 0.16.0
- [tween.js](https://npm.io/package/tween.js.md) 16.3.4
- [react-dom](https://npm.io/package/react-dom.md) 15.0.1
- [classnames](https://npm.io/package/classnames.md) 2.2.5
- [normalize-css](https://npm.io/package/normalize-css.md) 2.3.1
- [object-assign](https://npm.io/package/object-assign.md) 4.0.1

## Recent versions

- 1.0.0 (latest) — 2016-07-16
- 0.2.2 — 2016-06-14
- 0.2.1 — 2016-06-14
- 0.2.0 — 2016-06-14
- 0.1.2 — 2016-06-13
- 0.1.1 — 2016-06-13
- 0.1.0 — 2016-06-13
- 0.0.1 — 2016-06-13

## README

orthofloat
=========

a React component that lets you view floating shapes in orthographic space by using three.js.

## installation

    npm install orthofloat

## importing

### es6

    import Orthofloat, { randomRGB, randomWithRange } from 'orthofloat';

### non-es6

    var Orthofloat = require('orthofloat').default;
    var randomRGB = require('orthofloat').randomRGB;
    var randomWithRange = require('orthofloat').randomWithRange;

## usage

    <Orthofloat />

    var color = randomRGB(); // returns { r: Math.random(), g: Math.random(), b: Math.random() }
    var randNum = randomWithRange(0, 5); // returns a float from 0 up to but not including 5

### props
prop | type | default value | description
--- | --- | --- | ---
bottomColor | object | { r: Math.random(), g: Math.random(), b: Math.random() } | object with values from 0 to 1 that correspond to the bottom color of the first stripe
topColor | object | { r: Math.random(), g: Math.random(), b: Math.random() } | object with values from 0 to 1 that correspond to the top color of the first stripe
showStats | bool | false | toggles visibility of fps/ms, does nothing if initializeWithStats is not set to true
initializeWithStats | bool | false | enables toggling of stats with showStats prop
cameraAngle | number | 0 | angle of the camera looking at the scene

## example
[russrinzler.com/orthofloat](http://www.russrinzler.com/orthofloat)

## notes
* the canvas inserted into the DOM will always be the height and width of the window
* this was built using [React Slingshot](https://github.com/coryhouse/react-slingshot)

---
_Source: https://npm.io/package/orthofloat · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._