react-spring-three
v1.0.4
Published
React-spring for the react-three-fiber renderer
Downloads
53
Maintainers
Readme
npm install react-spring-three
React-spring for react-three-fiber
import { animated, useSpring } from 'react-spring-three'
import { Canvas } from 'react-three-fiber'
function Thing() {
const [active, setActive] = useState(false)
const [hovered, setHover] = useState(false)
const prop = useSpring({
'material-opacity': hovered ? 0.6 : 0.25,
scale: active ? [1.5, 1.5, 1.5] : [1, 1, 1],
rotation: active ? [THREE.Math.degToRad(180), 0, THREE.Math.degToRad(45)] : [0, 0, 0],
})
return (
<group>
<animated.mesh
onClick={e => setActive(!active)}
onHover={e => setHover(true)}
onUnhover={e => setHover(false)}
{...props}>
<octahedronGeometry name="geometry" />
<meshStandardMaterial name="material" color="grey" transparent />
</animated.mesh>
</group>
)
}
ReactDOM.render(
<Canvas>
<Thing />
</Canvas>,
document.getElementById('root')
)