如何将 Suspense 位置正确配置到 Canvas 中？答案

【问题标题】：How to properly configure Suspense position into Canvas?如何将 Suspense 位置正确配置到 Canvas 中？
【发布时间】：2022-06-14 05:52:32
【问题描述】：

如何正确设置 3d 模型在 Canvas 中关于 x、y、z 轴的位置？

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

我的对象居中且特别小，我想手动将其相对于 [x,y,z] 轴的位置配置到 Canvas 中

附注： 这是我的结果：（模型太小）

这是我的目标：（我手动缩放我的模型并将其向下移动，因为如果我将它缩放到目标大小，它会超出画布并且不完全适合，所以我需要将它向下移动一点。）

如果我申请zoom属性它也不适合。

【问题讨论】：

不清楚您要改进什么。你说它居中而且很小。如果是这种情况，您可以将相机放置得更近。 FOV 还允许您放大，但您已经有一个狭窄的 FOV。看来你已经尝试了这两种方法，但结果是不够的。怎么样？

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

【解决方案1】：

您可以将相机对准模型的中心，而不是移动模型。相机具有类似于您使用的“位置”属性的“目标”属性。但是，我上次尝试使用该属性时它不起作用。

我使用 OrbitControls 组件来定位相机。

<OrbitControls target={[.6, .4, 0]}/>

【讨论】：