如何使用react-three-fiber调整3D模型尺寸以适配网页背景需求

开发者阿泽

2026-9-29

解决方案

以下按改造成本从低到高提供3种可行方案：

方案1：直接在引用Model组件时添加scale属性
无需修改生成的模型文件，直接在App.js中给Model组件传缩放参数即可，三个值分别对应X/Y/Z轴的缩放比例，你可以根据实际展示需求调整数值，修改后的App.js示例如下：

import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import './App.css';
import Model from './components/Bedroom';

function App() {
  return (
    <Canvas>
      <OrbitControls />
      <ambientLight intensity={0.6} />
      <directionalLight intensity={0.5} />
      <Suspense fallback={null}>
        {/* 可自行调整数组数值控制缩放比例 */}
        <Model scale={[0.1, 0.1, 0.1]} />
      </Suspense>
    </Canvas>
  );
}

export default App;

方案2：修改gltfjsx生成的模型文件默认缩放
打开/components/Bedroom.js模型文件，给组件添加默认scale参数，后续引用时无需重复传参：

// 仅需修改组件声明和根节点部分，其余模型内部代码保持不变
export default function Model({ scale = 0.1, ...props }) {
  return (
    <group scale={scale} {...props}>
      {/* 原有模型的mesh、geometry等内容全部保留 */}
    </group>
  )
}

方案3：自动适配Canvas尺寸（无需手动计算缩放比例）
用@react-three/drei提供的Bounds组件，可自动将模型缩放到适配Canvas视口的大小，适合不确定具体缩放比例的场景：
第一步先导入Bounds组件：
```
import { OrbitControls, Bounds } from "@react-three/drei";
```
第二步修改Suspense内的代码：
```
<Suspense fallback={null}>
  <Bounds fit clip observe margin={1.2}>
    <Model />
  </Bounds>
</Suspense>
```
其中margin参数控制模型和Canvas边缘的留白比例，数值越大留白越多。