OrthographicCamera当调整窗口resize时变形的解决方法

最新推荐文章于 2024-09-19 00:00:00 发布

原创最新推荐文章于 2024-09-19 00:00:00 发布 · 614 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

32 篇文章

订阅专栏

本文介绍如何在Three.js中通过修改相机的Aspect比来适配窗口大小变化，提供了两种不同的实现方式。

修改相机的aspect就好了

       function onWindowResize() {

				const aspect = window.innerWidth / window.innerHeight;

				camera.left = - frustumSize * aspect / 2;
				camera.right = frustumSize * aspect / 2;
				camera.top = frustumSize / 2;
				camera.bottom = - frustumSize / 2;

				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

另一个resize

function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

参考这里
https://threejs.org/examples/#webgl_interactive_cubes_ortho