react three fiber のチュートリアルからやってみた

App.jsx

function Box(props) {
  // This reference will give us direct access to the mesh
  const mesh = useRef()
  // Set up state for the hovered and active state
  const [hovered, setHover] = useState(false)
  const [active, setActive] = useState(false)
  
  useFrame((state, delta) => (mesh.current.rotation.x += 0.01))
	// Subscribe this component to the render-loop, rotate the mesh every frame
	// エフェクトの実行やコントロールの更新など、レンダリングフレームごとにコードを実行

  return (
	//JSXで表現された通常のthree.jsの要素
    <mesh
      ref={mesh}
      scale={active ? 1.5 : 1}
      onClick={(event) => setActive(!active)}
      onPointerOver={(event) => setHover(true)}
      onPointerOut={(event) => setHover(false)}>
	//<mesh />==THREE.Mesh()
	//三角ポリゴンメッシュベースのオブジェクトを表現するクラス
      <boxGeometry args={[1, 1, 1]} />
	//BoxGeometry(width : Float, height : Float, depth : Float)
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
	//メッシュスタンダードマテリアル Metallic-Roughnessワークフローを使用した、標準的な物理ベースマテリアル
    </mesh>
  )
}

export default function App() {
  return (
    <Canvas>
	//React Three Fiber Scene の定義
      <ambientLight intensity={0.5} />
	//すべてのオブジェクトに均等に光を当てる
      <pointLight position={[-10, -10, -10]} />
      <Box position={[-1.2, 0, 0]} />
      <OrbitControls />
	//カメラのコントロール
    </Canvas>
  )
}