使用 react-three-fiber 在 React 中制作一个摇摆的立方体

在这篇文章中，我们将学习如何在 React 中创建一个摇摆的立方体，它将循环摇摆并同时旋转。我们首先创建一个立方体，然后添加摇摆效果。我们还可以添加一个功能，使立方体在悬停时摇摆。所以，让我们开始吧。

示例

首先下载 **react-three-fiber** 包：

npm i --save @react-three/fiber
npm i --save @react-three/drei
npm i --save three

**threejs** 和 **react-three/fiber** 将用于向网站添加 WebGL 渲染器。react-three/fiber 将用于连接 **threejs** 和 **React。drei** 用于添加 **wobblingMesh**。

在 **App.js** 中添加以下代码：

import React, { useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { MeshWobbleMaterial } from "@react-three/drei";

function Box(props) {
   const mesh = useRef();
   useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01));
   return (
      <mesh {...props} ref={mesh}>
         <boxGeometry args={[3, 3, 3]} />
         <MeshWobbleMaterial
            attach="material"
            factor={1}
            speed={10}
            color={"lightblue"}/>
      </mesh>
   );
}

export default function App() {
   return (
      <Canvas>
         <ambientLight />
         <pointLight position={[10, 10, 10]} />
         <Box position={[0, 0, 0]} />
      </Canvas>
   );
}