三纤维帆布尺寸答案

【问题标题】：Three-fiber canvas size三纤维帆布尺寸
【发布时间】：2022-02-01 06:35:25
【问题描述】：

我有一个关于三纤维帆布尺寸的问题。我需要一个固定的画布宽度和高度。不幸的是，我还没有找到如何更改画布宽度和高度的方法。即使我可以使用style={{width: 100px, height: 100px}} 更改尺寸，但这不是正确的事情。画布应该比 div 大。有谁知道如何用三纤维做到这一点？

<Canvas
    size={[`2000px`,`3000px`]}
    style={{width: `100%`, height: `auto`, position: `relative` }}
    ref={canvas}
    shadows
    camera={{position: [10, 0, 80], fov: 45}}
>
    <Suspense fallback={false}>
        <Content/>
    </Suspense>
</Canvas>

【问题讨论】：

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

【解决方案1】：

三纤维画布采用其父容器的宽度。只需调整包含它的任何 div 的大小。

【讨论】：

【解决方案2】：

React Three Fiber 的画布将采用父容器的宽度和高度。

不要在Canvas 组件上设置宽度和高度，而是尝试在父组件上设置宽度和高度，如下所示：

<div style={{ width: "50vw", height: "50vh" }}>
  <Canvas flat linear>
    <App />
  </Canvas>
</div>

View Demo

【讨论】：