Renderer
three.js의 핵심 객체로 camera, scene등을 객체로 넘겨 받아 표현합니다.
기본적으로 WebGL을 사용하며, renderer가 canvas에 대한 이미지를 생성 할 때, GPU가속 이미지 처리와 효과를 허용합니다.
WebGLRenderer 와 CanvasRenderer 두 종류가 있지만 성능상의 문제로 WebGLRenderer 를 추천드립니다.
WebGLRenderer
WebGLRenderer 를 생성 및 render 까지는 아래 단계를 따른다.
- renderer 생성
- Dom(HTML Element)에 Renderer 연결(Append)
- 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