使用react-three-fiber控制模型大小

Question

我刚接触react-three-fiber，所以我真的认为我的问题很简单，但我几乎放弃了。

问题:我有一个3D模型，它渲染得很好，但它太大了，我必须缩小到25%，才能看到几乎一半的模型(见图) enter image description here

我想要的:模型要小得多，所以我可以把它作为我的网站的一个小背景。

这是完整的enter image description here模型

我想放入model.js，但是它的行数太多了，没有什么特别的。我使用gltfjsx命令行将我的.gltf文件转换为.js文件，并且我没有对它做任何更改。

这是我的app.js

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/>
   </Suspense>

 </Canvas>
  );
}
 
export default App;

Answer 1

使用来自'three/drei‘的Stage来展示你的模型它会解决这个问题，

示例：

 <Canvas>
  <Stage preset="rembrandt" intensity={1} environment="city">
    <Model/>
    ...
  <Stage/>
 <Canvas/>

或者：

像这样控制你在画布相机内的变焦

<Canvas camera={{ fov: 35, zoom: 1.3, near: 1, far: 1000 }}>
    ...
<Canvas/>

Answer 2

也许你只是在尝试缩放你的模型，在这种情况下，你只需要在你的模型上添加scale={ scalefactory，scalefactory，scalefactory}，如下所示：

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;

由于在由gltfjsx创建的模型文件中，创建的组中应该有{...props}，因此比例将直接应用于网格组