Three.jsで3Dbox

  import {Canvas, useFrame} from '@react-three/fiber';
import './App.css';
import {useRef, useState} from "react";

function Box(props) {
  const ref = useRef();
  const [clicked, setClicked] = useState(false);
  const [hoverd, setHoverd] = useState(false);
  useFrame(() => ref.current.rotation.x += 0.01);

  return(
    mesh
      {...props}
      ref={ref}
      onClick={() => setClicked(!clicked)}
      onPointerOver={() => setHoverd(true)}
      onPointerOut={() => setHoverd(false)}
      scale={clicked ? 2 : 1}
    >
      boxGeometry args={[1,1,1]} />
      meshStandardMaterial color={hoverd ? "hotpink" : "orange"} />
    /mesh>
  )
}

function App() {
  return (
    div id="canvas-container">
      Canvas>
          Box position={[-1.6,0,0]} />
          Box position={[1.6,0,0]} />
          ambientLight intensity={0.5} />
          spotLight position={[10,10,10]} />
          pointLight position={[-10,10,10]} />
      /Canvas>
    /div>
  );
}

export default App;