npm:react-spring-three

README

This demo is real, click it!

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')
)

Usage no npm install needed!

README