three.js

 

* npm i three @react-three/fiber *

box.js
import { useFrame } from "@react-three/fiber";
import { useState, useRef } from "react";

export default function Box({ color, ...props }) {
  const [isHovered, setIsHovered] = useState(false);

  const ref = useRef();
  useFrame(() => {
    ref.current.rotation.x += 0.01;
    ref.current.rotation.y += 0.01;
  });

  return (
    <mesh
      ref={ref}
      scale={isHovered ? 1.5 : 1}
      onPointerOver={() => {
        setIsHovered(true);
      }}
      onPointerOut={() => {
        setIsHovered(false);
      }}
      {...props}
    >
      <pointLight></pointLight>
      <boxBufferGeometry></boxBufferGeometry>
      <meshPhysicalMaterial color={color}></meshPhysicalMaterial>
    </mesh>
  );
}

App.js

import { Canvas } from "@react-three/fiber";
import Box from "./component/box";

export default function App() {
  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <Canvas style={{ backgroundColor: "#000" }}>
        <ambientLight intensity={0.3}>
          <Box color="green" position={[3, 0, 0]}></Box>
          <Box color="red" position={[-3, 0, 0]}></Box>
          <Box color="yellow" position={[0, 0, 0]}></Box>
        </ambientLight>
      </Canvas>
    </div>
  );
}