react实现一个3D小房子

好的，我可以给您提供一些思路和代码示例。首先，您需要安装 `three` 和 `react-three-fiber` 依赖：

npm install three react-three-fiber

接下来，您可以在 React 组件中使用 `Canvas` 组件和 `useThree` 钩子来创建一个3D场景，并在其中创建一个小房子：

import * as THREE from "three";
import { Canvas, useThree } from "react-three-fiber";

function House() {
  return (
    <mesh position={[0, 0.5, 0]}>
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={"#c4c4c4"} />
    </mesh>
  );
}

function Scene() {
  const { camera } = useThree();
  camera.position.z = 2;

  return (
    <>
      <ambientLight intensity={0.5} />
      <spotLight intensity={0.8} position={[5, 25, 20]} angle={0.2} />
      <House />
    </>
  );
}

export default function App() {
  return (
    <Canvas>
      <Scene />
    </Canvas>
  );
}

在上面的代码中，`House` 组件表示一个小房子，`Scene` 组件是一个3D场景，其中包含一个环境光和一个聚光灯。`useThree` 钩子可以获取到场景、相机和渲染器等对象，从而可以控制3D场景的各个方面。

在 `House` 组件中，使用了 `mesh`、`boxBufferGeometry` 和 `meshStandardMaterial` 组件来创建一个立方体对象，并设置其颜色为灰色。

最后，在 `App` 组件中，使用 `Canvas` 组件来创建一个3D画布，将 `Scene` 组件放入其中。这样就可以在浏览器中看到一个简单的3D小房子了。

当然，这只是一个简单的示例，您可以根据需要添加更多的3D对象和材质，从而创建出更加复杂的3D场景。