三纤帆布尺寸

Question

我对三纤维帆布尺寸有疑问。我需要固定的画布宽度和高度。不幸的是我还没有找到如何改变画布的宽度和高度。尽管我可以用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>

Answer 1

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

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

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

查看演示

Answer 2

三纤维画布具有其父容器的宽度。只需调整它所在的 div 的大小即可。