threejs(2)

이번에도 기본 사용법 익히기 위주

AmbientLight(color: String, intensity: Float)

• 장면의 모든 개체를 동일하게 비춤
• 방향이 없는 빛으로 그림자를 드리울 수는 없음
• 약간 필터 느낌인가보다. 🤔
• DirectionalLight 만 있을 때
  
• AmbientLight 도 적용 했을 때
  

AxesHelper(size: Number)

• 3개의 축을 시각화하는 축 개체
• X축은 빨간색, Y축은 녹색, Z축은 파란색으로 표시됨
  • setColor(x,y,z) 으로 축 색상은 변경 가능하다.
• 

GridHelper(size: number, divisions: Number, colorCenterLine: Color, colorGrid: Color )

• 그리드를 정의. 그리드는 선의 2차원 배열
• 

---

카메라 위치를 조절하여 위에서 Mesh 를 내려다보도록 조절하기

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 1;
camera.position.y = 3;
// z가 물체와 같은 위치라서 이대로는 아무것도 안보임
camera.position.z = 0; 
// 카메라가 Mesh 의 위치를 쳐다보게됨
camera.lookAt(mesh.position);

stats.js

• JavaScript Performance Monitor
• 자바스크립트 성능 모니터링 도구
  
  - 좌측 상단의에 초당 프레임이 표시되는중 (60 FPS)

## 설치
npm i stats.js

import Stats from 'stats.js';
// Stats
const stats = new Stats();
document.body.append(stats.domElement);
function draw(): void {
    stats.update(); // 이부분 추가
    const time = clock.getElapsedTime();
    mesh.rotation.y = time;

    renderer.render(scene, camera);
    renderer.setAnimationLoop(draw);
}

dat.gui

• 자바스크립트 오브젝트의 속성값을 그래픽기반의 UI로 조절할 수 있게 함

## 설치
npm i dat.gui

// Dat GUI
const gui = new GUI();
// mesh position 의 y 를 -5부터 5까지 0.01씩 조절하겠다. 
gui.add(mesh.position, 'y', -5, 5, 0.01); 
// 이렇게 메서드 체이닝 방식으로 작성해도 동일 (각각 메서드 호출 시 Controller 가 리턴됨)
// gui.add(mesh.position, 'y').min(-5).max(5).step(0.01)