브라우저 창 사이즈 변경에 대응하기

 

src/ex02_browserSize

  /*  디바이스 픽셀 비율을 설정 */
  console.log("📢 [ex02_browserSize.js:16]", window.devicePixelRatio); // 픽셀 해상도의 비율을 나타내는 배정밀도 부동 소수점 값 확인
  renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);

 

 

전체 코드 보기

import * as THREE from "three";

/* 주제: 브라우저 창 사이즈 변경에 대응하기 */

export default function example() {
  /* Renderer 만들기 : html에 캔버스 미리 만들기 */
  const canvas = document.querySelector("#three-canvas");
  const renderer = new THREE.WebGLRenderer({
    canvas,
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);

  /*  디바이스 픽셀 비율을 설정 */
  console.log("📢 [ex02_browserSize.js:16]", window.devicePixelRatio); // 픽셀 해상도의 비율을 나타내는 배정밀도 부동 소수점 값 확인
  renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);

  /*  Scene 만들기 */
  const scene = new THREE.Scene();

  /*  Camera 만들기 */
  const camera = new THREE.PerspectiveCamera(
    75, // 시야각 (field of view)
    window.innerWidth / window.innerHeight, // 종횡비(aspect)
    0.1, // near
    1000 // far
  );
  camera.position.x = 2;
  camera.position.y = 2;
  camera.position.z = 5;
  scene.add(camera);

  /*  Messh 만들기 */
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({
    // MeshBasicMaterial는 빛의 영향을 받지 않아 조명이 없어도 보인다.
    color: "red"
  });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  /*  그리기 */
  renderer.render(scene, camera);

  function setSize() {
    // 카메라
    camera.aspect = window.innerWidth / window.innerHeight; // window는 전역 객쳐여서 작성하지 않아도 됨. window.innerWidth === innerWidth
    // updateProjectionMatrix -  카메라 투영에 관련된 값에 변화가 있을 경우 실행해야 함
    camera.updateProjectionMatrix();
    // setSize - 변화된 것을 다시 그려주는 것까지 해야 작동된다.
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.render(scene, camera);
  }

  /*  이벤트 */
  window.addEventListener("resize", setSize);
}

 

 

• 이미지에서의 window.devicePixelRatio는 2.7.. 값이 나왔다. 이는 픽셀 밀도가 2 정도라는 것
• 100 픽셀 짜리 이미지 폭을 표현할 때 200픽셀을 실제로 사용하고 있다는 의미이다.

 

 

renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);

• 사용자마다 기기의 디바이스 픽셀 레시오는 각 각 다르다.
• 해상도가 높은 기기일 경우 픽셀 밀도가 3이 나오는 경우도 있지만 픽셀 밀도 2도 깨끗하게 보이므로 2로 맞추어주자.

 

 

•  window.devicePixelRatio
  • 해당 기기의 픽셀 비율.
  • 픽셀 해상도의 비율을 나타내는 배정밀도 부동 소수점 값 확인
  • 실제 크기가 클수록 고해상도이다.

 

• renderer.setPixelRatio(window.devicePixelRatio);
  • 고해상도 설정