Skip to content

Instantly share code, notes, and snippets.

@threepointone
Last active September 20, 2017 09:38
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save threepointone/7af180a8e3c57aedb67ce3bedf8e2c4d to your computer and use it in GitHub Desktop.
Save threepointone/7af180a8e3c57aedb67ce3bedf8e2c4d to your computer and use it in GitHub Desktop.
react-motion + react-vr
/* @flow */
import React from 'react';
import { Motion, spring } from 'react-motion';
import {
AppRegistry,
Box,
View,
PointLight,
} from 'react-vr';
type Props = {};
type State = {
x: number, y: number, z: number,
r: number, g: number, b: number,
};
export default class Boxy extends React.Component<Props, State> {
interval: ?number;
state = {
x: 0, y: 0, z: 0,
r: 0, g: 0, b: 0,
};
componentDidMount() {
this.interval = setInterval(() => {
this.setState({
x: Math.random() * 90,
y: Math.random() * 90,
z: Math.random() * 90,
r: Math.random() * 255,
g: Math.random() * 255,
b: Math.random() * 255,
});
}, 500);
}
render() {
return (
<View>
<PointLight />
<Motion
defaultStyle={this.state}
style={{
x: spring(this.state.x),
y: spring(this.state.y),
z: spring(this.state.z),
r: spring(this.state.r),
g: spring(this.state.g),
b: spring(this.state.b),
}}
>
{style => (
<Box
lit={true}
dimWidth={1}
dimDepth={1}
dimHeight={1}
style={{
color: `rgb(${style.r},${style.g},${style.b})`,
layoutOrigin: [0.5, 0.5],
transform: [
{ translate: [0, 0, -3] },
{ rotateX: style.x },
{ rotateY: style.y },
{ rotateZ: style.z },
],
}}
/>
)}
</Motion>
</View>
);
}
}
AppRegistry.registerComponent('Boxy', () => Boxy);
@gauravmishr
Copy link

gauravmishr commented Sep 15, 2017

Pretty neat :- ) May be one day, some one may come up with drag and drop components for react lib. ecosystem as most of the underlying details played by actor/components is been hidden. And they continue to play top level game/behavior enforcing the semantics and help in nourishing of the controlled sentiments of dev/builder while reading source code.

@gre
Copy link

gre commented Sep 15, 2017

@gauravmishr not sure you are talking about UI drag&drop but have you tried react-dnd ? i've used it for a little project 2 years ago, and it was such a relief. doing things like this: https://gre.gitbooks.io/diaporama-maker/content/docs/getting_started/imgs/library_timeline_dnd.gif

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment