CODEWITHSUNDEEP
javascriptreactjscanvasthree.jsreact-three-fiber
middleStackoverflower
middleStackoverflower

Reputation: 260

How to properly configure Suspense position into Canvas?

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.

Upvotes: 3

Views: 332

Answers (1)

Bill O
Bill O

Reputation: 400

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]}/>

Upvotes: 2

Related Questions