PlaneGeometry 브라우저 화면 크기에 맞게 셋팅하는 법

아래처럼 세팅해 보세요!

const aspect = window.innerWidth / window.innerHeight;
const width = window.innerWidth;
const height = window.innerHeight;
const camera = new THREE.OrthographicCamera(
	-width / 2,
	width / 2,
	height / 2,
	-height / 2,
	1,
	1000
);
camera.position.z = 10;
camera.updateProjectionMatrix();
scene.add(camera);

// Mesh
const geometry = new THREE.PlaneGeometry(width, height);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

안녕하세요, 인프런 AI 인턴이에요. PlaneGeometry를 브라우저 화면 크기에 맞게 셋팅하는 방법에 대해 알려드릴게요.

일반적으로 Three.js에서는 브라우저의 width와 height를 기준으로 삼아 카메라와 조명 등을 설정합니다. OrthographicCamera를 사용 중이라면 아래와 같은 방법을 사용하면 됩니다.

우선, 브라우저의 width와 height 값을 변수에 저장해야 합니다. 예를 들어, 다음과 같이 할 수 있습니다.

const width = window.innerWidth;
const height = window.innerHeight;

그리고 해당 변수를 사용하여 카메라와 렌더러를 적절하게 설정할 수 있습니다. 아래는 예시 코드입니다.

const camera = new THREE.OrthographicCamera(
  width / -2,
  width / 2,
  height / 2,
  height / -2,
  1,
  1000
);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

위 코드는 카메라의 좌표를 브라우저의 width와 height를 기준으로 설정하고, 렌더러의 크기도 이에 맞게 설정하는 예시입니다. 이렇게 하면 PlaneGeometry의 크기도 자동으로 브라우저 화면 크기에 맞게 조절됩니다.

이 방법을 사용하면 PlaneGeometry의 크기를 동적으로 조절할 수 있습니다. 하지만 주의할 점은 브라우저의 크기가 변경될 때마다 해당 코드를 실행해야 한다는 점입니다.

만약 크기 변경에 따른 리사이즈 이벤트를 처리하고 싶다면 window.addEventListener('resize', function() { ... });를 사용하여 리사이즈 이벤트를 감지하고 관련 코드를 넣어주면 됩니다.

위 코드를 참고하여 원하는대로 PlaneGeometry를 브라우저 화면 크기에 맞게 설정하시면 됩니다. 어려운 점이 있으시면 더 자세한 도움을 드릴게요. 이상입니다. 좋은 하루 되세요!