[ #6 ] Fullscreen과 Resizing

★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★  

 

대부분의 ThreeJS 프로젝트는 화면의 Fullscreen으로 띄워주는 경우가 많다!
고런즉, Fullscreen 안배워볼 수 없겠쥬?

 

👇 기본 ThreeJS의 틀은 아래 게시글을 참고하세용

[ #1 ] ThreeJS의 기본 틀

 

 

🍀 Resizing & Fullscreen Setting

[ CSS Setting ]

* {
  margin: 0;
  padding: 0;
}

html,
body { // canvas 바깥의 scroll 기능 비활성화
  overflow: hidden;
}

.webgl { // canvas의 css 설정
  position: fixed;
  top: 0;
  left: 0;
  outline: none; // 특정 브라우저에서 ouline이 생기는 현상 방지
}

 

[ JS Setting ]

const sizes = { // 초기 sizes 객체의 값을 fullscreen의 width, height로 설정
  width: window.innerWidth, // 전체 가로 길이
  height: window.innerHeight, // 전체 세로 길이
};

window.addEventListener("resize", () => { // 브라우저 사이즈의 변경 시 호출
  // Size Setting
  sizes.width = window.innerWidth; // 전체 가로 길이 재할당
  sizes.height = window.innerHeight; // 전체 세로 길이 재할당

  // Camera Setting
  camera.aspect = sizes.width / sizes.height; // aspect 재할당
  camera.updateProjectionMatrix();
  // 이후 .updateProjectionMatrix()를 통해 업데이트 꼭 필요!

  // Renderer Setting
  renderer.setSize(sizes.width, sizes.height); // size 재할당
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // ⭐자세한 설명은 아래에
});

⭐ 없던 "renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))"가 생겼죠?

기기에는 각기 다른 픽셀의 비율이 존재합니다!
보통 1에서 많게는 5까지의 비율을 갖고 있습니당

"Pixel Ratio"란?   같은 1인치안에 표현되는 Pixel의 수를 말한다!

Pixel Ratio가 높으면 높을수록 선명한 화질을 얻을 수는 있지만 (계단현상의 완화),
너무 높은 Pixel Ratio는 성능의 저하를 일으킬 수 있습니다요..

따라서 우리의 Bruno Simon 센세께서는 최대 2정도의 값이 적당하다고 하셨습니다.

2의 Pixel Ratio 정도면 충분히 심한 계단현상을 해결할 수 있다고 하셨죠!

 

참고로 위 Pixel Ratio의 값을 설정하는 코드는 첫 renderer의 설정 시에도 넣어주셔야 합니다!

const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

 

 

🍀 DoubleClick & Fullscreen Setting

아래는 더블클릭시 브라우저에서 제공하는 기능인 Fullscreen을 활성/비활성하는 코드입니당

window.addEventListener("dblclick", () => { // doubleClick시에
  const fullscreenElement =
    document.fullscreenElement || document.webkitFullscreenElement;
    // safari 외의 브라우저를 위한 document.fullscreenElement 또는
    // safari 브라우저를 위한 document.webkitFullscreenElement를 지정

  if (!fullscreenElement) { // 아래의 코드 또한, 조건부를 통해 safari에서도 기능 구현
    if (canvas.requestFullscreen) {
      canvas.requestFullscreen();
    } else if (canvas.webkitRequestFullscreen) {
      canvas.webkitRequestFullscreen();
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
});
// webkit이 붙은 메서드가 safari를 위한 메서드라고 이해하시면 됩니다!