WebGLRenderer

The WebGL renderer displays your beautifully crafted scenes using WebGL.

WebGLRenderer 는 WebGL을 이용해서 예쁘게 만들어진 화면을 보여준다.

• 생성자(optional)
  • canvas
    • 렌더러가 그것의 결과를 그릴 canvas
    • domElement 속성과 일치body에 canvas를 붙이겠다는 의미
    • const renderer = new THREE.WebGLRenderer(); document.body.appendChild(renderer.domElement);
  • antialias
    • 안티앨리어싱을 할 것인가
  • alpha
    • 투명도 . 아무것도 없는 공간은 투명하게 보이도록 설정
    • default는 false (1): 불투명 , true (0) : 투명
• 속성
  • domElement
    • 렌더러가 그것의 결과를 그리는 캔버스
• 함수
  • setSize
    • 장치 픽셀 비율을 고려하여 출력 캔버스의 크기를 (너비, 높이)로 조정하고 (0, 0)에서 시작하여 해당 크기에 맞게 뷰포트를 설정합니다. updateStyle을 false로 설정하면 출력 캔버스에 대한 스타일 변경이 방지됩니다.
    • ex. setStyle false
    • setSize(window.innerWidth/2, window.innerHeight/2, false) //setSize로 크기를 1/4로 만들면서 세번째 인수 setStyle을 false로 주어 더 낮은 해상도로 렌더링하기
  • setPixelRatio
    • 장치 픽셀 비율을 설정합니다. 일반적으로 출력 캔버스가 흐려지는 것을 방지하기 위해 HiDPI 장치에 사용됩니다.
  • setClearColor , setClearAlpha
    • 배경 색 설정하기 , 배경 투명도 설정하기
    • 하지만 scene에 칠해진 배경이 있으면 scene이 더 우선순위 높음
    • //배경색 칠하기 renderer.setClearColor("#00ff00"); renderer.setClearAlpha(0.2); //반투명 , 불투명도`

  const canvas = document.querySelector("#three-canvas");

  // html에 직접 canvas 그리는 방식 사용하면 이 작업 필요없음
  // document.body.appendChild(renderer.domElement);

  // Renderer
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });

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

  // 기기 해상도에 맞춰서 픽셀비 변경
  console.log(window.devicePixelRatio);
  renderer.setPixelRatio(devicePixelRatio > 1 ? 2 : 1);

 

 

 

https://threejs.org/docs/#api/en/renderers/WebGLRenderer