Renderer

three.js의 핵심 객체로 camera, scene등을 객체로 넘겨 받아 표현합니다.
기본적으로 WebGL을 사용하며, renderer가 canvas에 대한 이미지를 생성 할 때, GPU가속 이미지 처리와 효과를 허용합니다.
WebGLRenderer 와 CanvasRenderer 두 종류가 있지만 성능상의 문제로 WebGLRenderer 를 추천드립니다.

WebGLRenderer

WebGLRenderer 를 생성 및 render 까지는 아래 단계를 따른다.

1. renderer 생성
2. Dom(HTML Element)에 Renderer 연결(Append)
3. Rndder

renderer 생성

THREE.WebGLRenderer(options);

parameters

• alpha : 투명도 조절, alpha:true,
• antialias: 안티알리아스, antialias: true;
• preserveDrawingBuffer: 수동으로 클레어 하거나 덮어씌울때까지 버퍼를 유지할지를 결정(default: false)

const renderer = new THREE.WebGLRenderer({
  alpha: true,
  antialias: true
})

properties

canvas

렌더러가 출력을 그리는 캔버스입니다. 이는 아래의 domElement 속성에 해당합니다. 여기에 정의하지 않으면 새 캔버스 요소가 생성됩니다.

domElement

렌더러가 출력을 그리는 캔버스입니다. 이것은 생성자에서 렌더러에 의해 자동으로 생성됩니다(아직 제공되지 않은 경우). 다음과 같이 페이지에 추가하기만 하면 됩니다.

document.body.appendChild( renderer.domElement );

shadowMap

그림자맵에 대한 참조가 포함되어 있습니다. 물체의 그림자를 나타내고자 할경우 사용하는데 default false 입니다.

.shadowMap.enabled = true;

setClearColor

renderer(canvas)의 배경색상을 설정할때 사용한다.

renderer.setClearColor(color: THREE.ColorRepresentation, alpha?: number);
renderer.setClearColor(0xfffafa, 1);
// 배경을 투명으로 설정시
// 먼저 THREE.WebGLRenderer({alpha: true});로 지정 후 setClearColor의  alpha값을 0으로 처리하면 투명하게 된다.
renderer.setClearColor( 0x000000, 0 );

this.renderer.setSize(width: number, height: number, updateStyle?:boolean);

renderer.shadowMap
renderer.shadowMap.enable = true

setPixelRatio

renderer.setPixelRatio(value: number);

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

setSize

renderer의 크기를 정해 줍니다.
출력 캔버스의 크기를 (너비, 높이)로 조정하고, (0, 0)에서 시작하여 해당 크기에 맞게 뷰포트를 설정합니다.

 WebGLRenderer.setSize(width: number, height: number, updateStyle?: boolean): void

this.renderer.setSize( this.sceneWidth, this.sceneHeight );

Dom(HTML Element)에 Renderer 연결(Append)

html 특정 엘리먼트에 위에서 정의한 renderer의 domElement 를 append 함으로서 canvas 형식의 renderer 가 생성됩니다.

const dom = document.getElementById('domContainer');
dom.appendChild(renderer.domElement);

Render

미리 생성된 카메라와 scene을 이용하여 render 한다.

renderer.render(scene: THREE.Object3D, camera:THREE.Camera);
renderer.render(scene, camera); // draw