交互与动画

与 React Spring 协同使用

我们学习了如何创建小的动画，以及如何对用户的互动做出反应，但我们还没有学习如何以创建动画的方式改变这些道具。为此，我们将使用 react-spring，react-spring 是基于弹簧物理学的动画库，它与 React Three Fiber 完美配合，因为它来自同一个维护者，而且它还专门为 React Three Fiber 创建了出口。

import React, { useState } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { useSpring, animated, config } from "react-spring/three";
import "./styles.css";

function MyRotatingBox() {
  const myMesh = React.useRef();
  const [active, setActive] = useState(false);

  const { scale } = useSpring({
    scale: active ? 1.5 : 1,
    config: config.wobbly,
  });

  useFrame(({ clock }) => {
    const a = clock.getElapsedTime();
    myMesh.current.rotation.x = a;
  });

  return (
    <animated.mesh
      scale={scale}
      onClick={() => setActive(!active)}
      ref={myMesh}
    >
      <boxBufferGeometry />
      <meshPhongMaterial color="royalblue" />
    </animated.mesh>
  );
}

export default function App() {
  return (
    <div className="App">
      <Canvas>
        <MyRotatingBox />
        <ambientLight intensity={0.1} />
        <directionalLight />
      </Canvas>
    </div>
  );
}

最近更新于 0001-01-01