[Three.js] threejsfundamentals 읽기 01

(해당페이지를 공부하며, 옮겨적은 요약정리 입니다.)

Renderer: Scene과 Camera를 넘겨 받아 카메라의 절두체 안 3D씬의 일부를 평면이미지로 렌더링하는 객체, 입력한 데이터를 실제로 canvas에 그려주는 역할!
Scene Graph: Scene 또는 다수의 Mesh, Light, Group, Object3D, Camera로 이루어진 트리 구조
Scene: 씬 그래프의 최상위 노드로서 배경색(background color), 안개(fog) 등의 요소를 포함
Camera: Camera는 다른 객체와 달리 씬 그래프에 포함될 필요가 없음
Mesh: 어떤 Material로 하나의 Geometry를 그리는 객체
Material: 기하학 객체를 그리는데 사용하는 표면 속성
Texture: 기하학 객체의 표면을 이미지로 덮어줄 때 사용
Geometry: 기하학 객체의 정점 데이터
Light: 여러 종류의 광원

스크립트 타입 = "module"

MDN문서

주의: type="module"을 포함하면 인터널 스크립트에서도 import 모듈을 사용할 수 있습니다. 예: <script type="module"> /* 여기에 코드를 작성하세요 */ </script>.

간단한 오브젝트 만들기 순서!

1) Three.js 로드!
2) renderer 생성
3) 카메라 생성
4) Scene 생성
5) Geometry & Material 생성
6) Mesh로 그리기
7) Scene에 mesh 객체 추가

Animation 구현시에는 requestAnimationFrame

function render(time) {
  time *= 0.001;  // convert time to seconds
 
  cube.rotation.x = time;
  cube.rotation.y = time;
 
  renderer.render(scene, camera);
 
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

Light 추가

{
  const color = 0xFFFFFF;
  const intensity = 1;
  const light = new THREE.DirectionalLight(color, intensity);
  light.position.set(-1, 2, 4);
  scene.add(light);
}

const material = new THREE.MeshPhongMaterial({color: 0x44aa88});  // greenish blue

MeshBasicMaterial은 빛을 반사하지 않음
MeshPhongMaterial은 빛을 반사!

Geometry와 Material은 여러 Mesh가 참조 가능!