使用 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>
   );
}