使用 reactthree-fiber 在 React 中添加 OrbitControls

react jsjavascript libraryfront end technology更新于 2025/11/19 3:24:17

在本文中，我们将了解如何使用 react-three-fiber 在 React 中添加 OrbitControls。这就像制作一台相机;我们可以在屏幕上移动并查看任何 3D 对象的每一面。我们还可以使用 OrbitControl 提供缩放和滑动效果。那么，让我们开始吧。

示例

安装 react-three/fiber 库 −

npm i --save @react-three/fiber three

threejs 和 react-three/fiber 将用于向网站添加 WebGL 渲染器。 three-fiber 将用于连接 threejs 和 React。

首先在 App.js 中创建一个轨道控制对象 −

import React, { useEffect } from "react";
import { Canvas, useThree } from "@react-three/fiber";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as THREE from "three";
import "./App.scss";

const CameraController = () => {
   const { camera, gl } = useThree();
   useEffect(
      () => {
         const controls = new OrbitControls(camera, gl.domElement);
         controls.minDistance = 3;
         controls.maxDistance = 20;
         return () => {
           controls.dispose();
         };
      },
      [camera, gl]
   );
   return null;
};

CameraController 用于在整个屏幕上添加轨道控制。
useThree() 为您提供一个相机对象，用于在屏幕上移动。
gl 指示您正在移动的区域。
在 useEffect 中，我们合并了两个 OrbitControls 对象。
然后我们添加了 minDistance 和 maxDistance 参数，以限制屏幕上的移动。

接下来，在 App.css 中添加以下代码行 −

* {
   box-sizing: border-box;
}
   html,body,#root{
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
}

body{
   background: #f1f4f8;
   position: fixed;
}

此 CSS 用于使画布与父级大小匹配。

现在，我们在 App 组件中添加 OrbitControl。在 App.js 中添加以下代码行 −

export default function App(){
   return (
      <Canvas>
         <CameraController />
         <ambientLight />
         <spotLight intensity={0.3} position={[5, 10, 50]} />
         <mesh>
            <boxGeometry attach="geometry" args={[3, 2, 1]} />
            <meshPhongMaterial attach="material" color="hotpink" />
         </mesh>
      </Canvas>
   );
};

我们创建了一个长方体，并在 App 组件中添加了之前的 orbitcontrol 对象 “CameraController”。OrbitControl 用于在画布上添加放大、缩小、移动和其他效果。