HELLICAT

ThreeJS는 자바스크립트로 직접 웹 GL을 프로그래밍해 3D애니메이션을 제작할 수 있는 라이브러리이다. 

먼저 scene , camera , renderer를 정의한다.

Scene

scene 객체는 렌더링할 ㅁ모든 객체와 사용할 모든 광원을 저장하는데 쓰인다. scene없이는 아무것도 렌더링할 수 없다.

Camera

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

Renderer

renderer는 scene객체가 camera객체의 각도에 따라 브라우저에서 어떠헥 보이는지를 산출하는 역할을 담당함.

Axes 생성

const axes = new THREE.AxesHelper(50);
scene.add(axes);

평면 생성

//생성하는 평면이 가로와 세로가 어떻게 보일것인지를 알려준다.
const planeGeometry = new THREE.PlaneGeometry(60, 20);
//만든 평면의 면이 어떻게 보일지를 작성
const plaenMaterial = new THREE.MeshBasicMaterial({
    color: 0x123ccc,
  });
/** const plaenMaterial = new THREE.MeshLambertMaterial({
    color: 0x123ccc,
  }); */
  
//위를 토대로 Mesh로 결합하여 사물을 만들어준다.
  const plane = new THREE.Mesh(planeGeometry, plaenMaterial);

//장면의 위치를 정해주어야한다.
  plane.rotation.x = -0.5 * Math.PI;
  plane.position.x = 15;
  plane.position.y = 0;
  plane.position.z = 0;

// 장면에 추가
  scene.add(plane);

카메라에 추가

camera를 position으로 camera 위치를 잡아주고 lookAt으로 바라보는 위치를 잡아준다. 

물질과 광원 그림자 추가

물질의 광원과 그림자를 추가하기 위해서는 THREE.MeshBasicMatrial()에서 광원효과가 유효할 수 있는 다른것으로 바꿔주어야한다.

또한 광원 소스도 추가해야한다. 

// 광원 색상을 고르고 생성
const spotLight = new THREE.SpotLight(0xffffff);
// 광원의 지정된 위치 
spotLight.position.set(-40, 60, -10);

//광원의 밝기를 정한다.
spotLight.intensity = 15000;

//광원을 통한 그림자 생성 
renderer.shadowMap.enabled = true; // 기본값은 false로 되어있다. 
//그림자의 타입
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

//광원을 통한 사물의 그림자 생성
plane.receiveShadow = true;
cube.castShadow = true;
sphere.castShadow = true;
spotLight.castShadow = true;

//광원을 장면에 추가
scene.add(spotLight);

애니메이션 주기

requestAnimationFrame을 사용하여 장면을 지속적으로 애니메이션이 움직일수 있게 불러준다.

개발당시 애니메이션이 얼만큼의 리소스 혹은 몇프레임으로 운영되는지 보기 위해 ThreeJS내부에 stats.module.js를 불러와서 화면에 띄어준다.  stats도 어떻게 보면 움직임의 일종이니 requestAnimationFrame이 불러려지는 곳에 같이 update될 수 있게 불러준다.

사물도 position이나 rotation 같은 것들로 애니메이션을 줄 수 있으며 자바스크립트의 Math관련 해서 cos , abs, sin 등으로 바운스를 구현할수 있으며 그밖의 동작도 구현할수 있을 것이다.

dat.GUI

dat.gui로 코드의 변수를 변경할 수 있는 라이브러리다.

반응형 

브라우저의 창의 크기가 변하면 camera와 renderer를 업데이트하는 코드를 추가한다. 

function onResize() {
//화면의 종횡비를 표시하는 카메라의 aspect 속성과 렌더러의 크기를 업데이트
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener("resize", onResize);

또한 처음 선언했던 scene, camera, renderer는 수가 변하니 상수로 두지말고 변수로 두고 함수 외부에서 선언하여 다른 함수에서도 사용할 수 있게 만든다.