@react-spring/three

What is @react-spring/three?

@react-spring/three is a library that provides animations for React Three Fiber using the react-spring library. It allows you to create smooth and interactive animations for 3D objects in a React application.

What are @react-spring/three's main functionalities?

Basic Animation

This code demonstrates a basic animation where a box scales up from its original size to 1.5 times its size using @react-spring/three.

import { useSpring, animated } from '@react-spring/three';
import { Canvas } from '@react-three/fiber';

function AnimatedBox() {
  const props = useSpring({ scale: [1.5, 1.5, 1.5], from: { scale: [1, 1, 1] } });
  return (
    <animated.mesh scale={props.scale}>
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color='orange' />
    </animated.mesh>
  );
}

function App() {
  return (
    <Canvas>
      <ambientLight />
      <AnimatedBox />
    </Canvas>
  );
}

export default App;

Animating Position

This code demonstrates animating the position of a box from the origin to the coordinates (2, 2, 2) using @react-spring/three.

import { useSpring, animated } from '@react-spring/three';
import { Canvas } from '@react-three/fiber';

function AnimatedBox() {
  const props = useSpring({ position: [2, 2, 2], from: { position: [0, 0, 0] } });
  return (
    <animated.mesh position={props.position}>
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color='blue' />
    </animated.mesh>
  );
}

function App() {
  return (
    <Canvas>
      <ambientLight />
      <AnimatedBox />
    </Canvas>
  );
}

export default App;

Animating Rotation

This code demonstrates animating the rotation of a box from 0 to 90 degrees on the X and Y axes using @react-spring/three.

import { useSpring, animated } from '@react-spring/three';
import { Canvas } from '@react-three/fiber';

function AnimatedBox() {
  const props = useSpring({ rotation: [Math.PI / 2, Math.PI / 2, 0], from: { rotation: [0, 0, 0] } });
  return (
    <animated.mesh rotation={props.rotation}>
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color='green' />
    </animated.mesh>
  );
}

function App() {
  return (
    <Canvas>
      <ambientLight />
      <AnimatedBox />
    </Canvas>
  );
}

export default App;

Other packages similar to @react-spring/three

react-three-fiber

react-three-fiber is a React renderer for Three.js. It allows you to build and manage 3D scenes using React components. While it does not provide built-in animation capabilities like @react-spring/three, it can be used in conjunction with other animation libraries to achieve similar results.

three.js

three.js is a popular JavaScript library for creating 3D graphics in the browser. It provides a comprehensive set of features for building 3D scenes, but it does not have built-in React integration or animation capabilities like @react-spring/three. However, it can be used with other libraries to achieve similar animations.

react-move

react-move is a library for creating animations in React. It provides a flexible API for animating the state of React components. While it is not specifically designed for 3D animations, it can be used in combination with react-three-fiber to animate 3D objects.

README

@react-spring/three

react-three-fiber support. This package is for version 6 of react-three-fiber