[three.js] scene, camera, renderer

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();

scene 객체는 렌더링할 모든 객체와 사용할 모든 광원을 저장하는 데 쓰이는 컨테이너다.

camera객체는 장면을 렌더링했을 때 어떻게 보여질 것인지를 정의한다.

renderer객체는 scene객체가 camera객체의 각도에 따라 브라우저에서 어떻게 보이는지 산출하는 역할을 담당한다.

renderer.setClearColorHex();
renderer.setClearColor(new THREE.Color(0xEEEEEE));
renderer.setSize(window.innerWidth, window.innerHeight);

renderer의 배경생을 흰색으로 설정.

setSize로 장면이 얼마나 크게 렌더링되어야 하는지 설정.

var planeGeometry = new THREE.PlaneGeometry(60,20);
var planeMaterial = new Three.MeshBasicMaterial({color: 0xcccccc});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);

plane.ratation.x = -0.5*Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);

THREE.PlaneGeometry(60,20) 코드를 사용해 평면이 어떻게 보일지 설정.

그 다음줄은 색상이나 투명도.

x축으로 90도 회전

position속성으로 장면에서의 위치 정의

camera.position = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.posiiton);

document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderer.render(scene, camera);

- three.js로 3D 그래픽 만들기 챕터1