three.js 10.04 강의 (2)

const renderer = new THREE.WebGLRenderer(); // 버퍼가 잡혔어? document page에 html에 들어갈 element로 넣어줘야함.
      //gpu에서 가동한 그것들을 element로 넣어주게끔...

The WebGL renderer displays your beautifully crafted scenes using WebGL.
WebGL renderer는 우리가 만든 scene을 디스플레이 해준다.

renderer.setSize(640,480);

음.. 렌더링될 공간의 크기를 설정한다.

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

예제에서는 window.innerWidth, window.innerHeight 값을 넣어주었다. 이는 웹브라우저의 안쪽 가로크기, 안쪽 세로크기를 의미한다. 아무튼 이렇게 하면 그냥 꽉찰 것이다.

.setSize ( width : Integer, height : Integer, updateStyle : Boolean )

공식문서에서 첫번째 인자는 width, 두번째 인자는 height라고 명시한다. 세번째는 무엇일지 모르겠음.
Setting updateStyle to false prevents any style changes to the output canvas.
세번째 인자를 false로 하면 canvas의 스타일이 바뀌지 않는다고 한다. => 연구 필요.

renderer.setViewport(320, 0, 640, 480);

.setViewport ( x : Integer, y : Integer, width : Integer, height : Integer ) :

The x, y, width, and height parameters of the viewport.
Optionally, a 4-component vector specifying the parameters of a viewport.

Sets the viewport to render from (x, y) to (x + width, y + height).
(x, y) is the lower-left corner of the region.

x,y에서 x+width, y+height까지 렌더링 하는 viewPort를 설정한다.
x,y는 lower-left corner라 하는데 이는 사각형의 왼쪽 아래를 의미하는 것 같다.

const container = document.getElementById("myContainer");
container.appendChild(renderer.domElement);

renderer.domElement는 렌더러가 출력을 그리는 canvas이다.

//camera setting
const camera = new THREE.PerspectiveCamera(
        45, // vertical fov
        640.0 / 480.0, // aspect 비율?
        1, // near plane
        500 //far plane
      );
camera.position.set(0, 0, -150); // x, y, z축 있는데 0,0,100에 넣음.
camera.up.set(0, 1, 0); // 이거 안해도 object3D default값이 0,1,0이라 설정되어있음.
camera.lookAt(0, 0, 50); // 원점을 바라보고 있음.
//up vector가 어딘지..~ 알려줘야되는데 여기선 빠져있네용
/up vector의 default {0,1,0} y축이 업벡터로 되어있다.

fov = field of view , 시야 범위를 말한다.
aspect = 가로와 세로의 비율, 종횡비를 말한다.
nearplane = 원점으로부터 거리
farplane = 원점으로부터 거리

//gemetry setting
//object space에서 정의됨. 여기선 object space == world space
const points = [];
points.push(new THREE.Vector3(-10, 0, 0));
points.push(new THREE.Vector3(0, 10, 0));
points.push(new THREE.Vector3(10, 0, 0));

const geometry = new THREE.BufferGeometry().setFromPoints(points); //이렇게하면 내가 정의한 포인트를 통해 geometry를 만든다.
//bufferGeometry..?

//create a blue LineBasicMaterial
const material = new THREE.LineBasicMaterial({ color: 0xffff00 });

//create line model
const line = new THREE.Line(geometry, material);

//create scene
const scene = new THREE.Scene();

scene.add(line);
renderer.render(scene, camera);

.render ( scene : Object3D, camera : Camera ) : undefined
Render a scene or another type of object using a camera.
The render is done to a previously specified renderTarget set by calling .setRenderTarget or to the canvas as usual.
By default render buffers are cleared before rendering but you can prevent this by setting the property autoClear to false. If you want to prevent only certain buffers being cleared you can set either the autoClearColor, autoClearStencil or autoClearDepth properties to false. To forcibly clear one or more buffers call .clear.

setRenderTarget이 무엇일지?? => render링 될 target을 설정하는 것이다. 음 그니깐 캔버스가 두개가 있다면?? 나는 어떤 곳에 rendering할지 골라야한다.