GLTF在画布内三度拉伸

Question

问题所在

当加载我的GLTF在帆布元素的反应-三纤维在一个100 of x 100 three，GLTF模型似乎看起来很好。但是，当我将包含div和画布的大小更改为50 be x 100 be时，GLTF模型似乎被拉伸了。

100 x 100截图

​

100 vh x 50 vh截图

​

到目前为止我尝试过的

我试着设置相机的高宽比。

<Controls
        enableDamping
        rotateSpeed={0.3}
        dampingFactor={0.1}
        cameraProps={{
          position: [11, 11, 11],
          near: 0.1,
          far: 1000,
          fov: 50,
          aspect: [random number here doesn't change anything]
        }}
        maxDistance={18}
      />

我尝试在调整大小和设置高宽比时添加一个窗口事件侦听器，如下所示：

function onWindowResize() {
    camera.aspect = 2.0 -> doesn't have any effect, not even with random numbers
    camera.updateProjectionMatrix();
    renderer.setSize(book.clientWidth, book.clientHeight);
}

上述一切似乎都没有用，我别无选择。我在google上找到了几个相关的帖子。我都试过了..。

版本等

"@react-three/drei": "^7.25.0",
"@react-three/fiber": "^7.0.21",
"@react-three/postprocessing": "^2.0.5",

我使用orbot控件和透视相机。下面是到代码沙箱的链接。

https://codesandbox.io/s/36uiq?file=/src/index.js

希望有人能帮我。

Answer 1

当更新相机的高宽比时，确保它与渲染器的纵横比匹配：

camera.aspect = book.clientWidth / book.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize( book.clientWidth, book.clientHeight );

确保camera存在，并且它是用来进行渲染的照相机。