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

notes

• the canvas inserted into the DOM will always be the height and width of the window
• this was built using React Slingshot