Control model size using react-three-fiber

Question

I'm new to react-three-fiber, so I really think my problem is easy but I almost give up on it .

the problem : I have a 3D model it renders ok but it’s away too big I have to zoom out to 25% just to see almost half the model (see the picture)

what I wanted: the model to be way smaller so I can put it as a small background for my website.

Here’s the full model

I want to put the model.js but it’s too many lines , there’s nothing special really I use the gltfjsx command line to transfer my .gltf file to .js file and I didn’t do any changes to it.

and here's my 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/>
      </Suspense>
    </Canvas>
  );
}
 
export default App;

score 3 · Answer 1 · answered Oct 21 '21 at 14:23

use Stage from 'three/drei' to stage your model it will fix this issue,

example:

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

Or:

control your zoom inside camera of canvas like this

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

score 1 · Answer 2 · answered Oct 22 '21 at 11:53

Myabe you are just trying to scale your model, in that case you just need to add scale={[sclaefactorx,scalefactory,sclaefactorz]} on your model like so :

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;

Since in the model file created from gltfjsx there should be a {...props} on the created group the scale will be applied directly to the mesh group

Control model size using react-three-fiber

2 Answers2

Linked