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

【问题标题】：Control model size using react-three-fiber使用 react-three-fiber 控制模型大小
【发布时间】：2021-12-05 15:32:04
【问题描述】：

我是react-three-fiber的新手，所以我真的认为我的问题很简单，但我几乎放弃了????。

问题：我有一个 3D 模型，它可以渲染，但它太大了我必须缩小到 25% 才能看到几乎一半的模型（见图） enter image description here

我想要的：模型要小得多，所以我可以，但它是我网站的小背景。

这是完整的模型 enter image description here

我想放model.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;

【问题讨论】：

标签： reactjs three.js react-three-fiber

【解决方案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/>

【讨论】：

【解决方案2】：

Myabe，您只是想扩展您的模型，在这种情况下，您只需像这样在模型上添加 scale={[sclaefactorx,scalefactory,sclaefactorz]} ：

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} ，因此比例将直接应用于网格组

【讨论】：