4

How to properly set position of a 3d model into Canvas regarding to x,y,z axes?

<div>
   <Canvas shadows dpr={[1, 2]} camera={{position: [5, 50, 5], fov: 10}}>
     <Suspense fallback={null}>
         <Model/>  
     </Suspense>
  </Canvas> 
</div>

My object is centered and extra small, I want to manually configure it's position regarding to [x,y,z] axes into Canvas

P.S: Here is my result: (the model is too small) description

This is my target: (I manually zoomed my model and move it down, because if I zoom it to target size it goes beyond the canvas and doesn't fit completely, so I need to move it a bit down.) description

If I apply zoom property It also doesn't fit.

middleStackoverflower
  • 162
  • 7
  • It's not clear what you are trying to improve. You say it is centered and very small. If that is the case you could position the camera closer. FOV also allows you to zoom in, but you already have a tight FOV. It appears that you have tried both of those approaches, but the result is insufficient. How so? – Bill O Jun 09 '22 at 23:10

1 Answers1

1

You can target the camera towards the center of your model instead of moving your model. The camera has a 'target' property like the 'position' property you used. However, the last time I tried using that property it didn't work.

Instead I target the camera using the OrbitControls component.

<OrbitControls target={[.6, .4, 0]}/>
Bill O
  • 315
  • 4
  • 13