WebGLRenderer

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

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

renderer 생성

THREE.WebGLRenderer(options);

options

• alpha : alpha:true
• antialias: antialias: true;

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

setPixelRatio

renderer.setPixelRatio(value: number);
renderer.setPixelRatio(window.devicePixelRatio);

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

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

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