Three.js 기초

Three.js 기초

Renderer

Scene와 Camera 객체를 넘겨받아서 랜더링 한다.

Scene

배경색 안개등의 요소를 포함하게되며, 최상위 노드에 해당한다.

Mesh

Material로 하나의 Geometry를 그리는 객체이다.
Material, Geometry 둘다 재사용이 가능하다.

Group

Geometry(물체의 형태)

기하학 객체의 정점 데이터이다.

Material(물체의 색, 밝기, 질감)

객체를 그리는데 사용하면 표면속성이다.
하나의 material은 여러개의 texture를 사용할수있다.

  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

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

  const cube = new THREE.Mesh(geometry, material); //mesh로 geometry, material을 하나로 묶어줌
  scene.add(cube); //scene에 추가

Texture

이미지나 파일에서 로드한 이미지, canvas로 생성한 이미지,
다른 Scene 객체에서 렌더링한 결과물에 해당.

---

Three.js 반응형 디자인

창 크기를 조절할때에 객체의 모양이 변하는것을 방지하기위하여
아래와 같은 방법을 사용한다.

const canvas = render.domElement;
//aspect(비율 속성)
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProejctionMatrix();

고해상도 다루는 방법(직접 배율을 게산하여서 변경해주는 방법)

function resizeRendererToDisplaySize(renderer){
  const canvas = renderer.domElement;
  const pixelRatio = window.devicePixelRatio;
  const width = canvas.clientWidth * pixelRatio | 0;
  const height = canvas.clientHeight * pixelRatio | 0;
  const needResize = canvas.width !== width || canvas.height !== height;
  if(needResize){
    renderer.setSize(width, height, false);
  }
  return needResize;
}

function render(time){
 time *= 0.001;

 if(resizeRendererToDisplaySize(renderer)){
   const canvas = renderer.domElement;
   camera.aspect = canvas.clientWidth / canvas.clientHeight;
   camera.updateProjectionMatrix();
 }
 ...
}

---

Scene Graph 자세히 알아보기

Object3D는 Mesh와 마찬가지로 Scene Graph의 한 요소이지만,
material과 geometry가 없다는것이 다른점이다.
Object3D로 지역공간을 만들어서 Scene Graph 아래에 추가시켜줄수있다.

const solarSystem = new THREE.Object3D();

---

Material

• 재질의 속성을 정하는 방법은

1. 생성자를 호출할때 값을 넘겨주는것
   0xFFFFFF와 같은 hex값 외에 css 문자열을 넘겨줘도 된다.

const m4 = new THREE.MeshBasicMaterial({color: 'rgb(255,0,0)'}); 

2. 생성한뒤에 변경시켜주는것

material.color.set(rgb(255,127,64))

Material에 따라 광원의 영향을 받지 않는것들도 있다.

1. MeshBasicMaterial - color
2. MeshLambertMaterial - color. emissive
3. MeshPhongMaterial - color, emissive, shininess(반사점 밝기)
4. MeshStandardMaterial
   여러 Material들이 잇는데 그건 상황에 맞게 찾아서 사용하면 된다.

---

Texture

일반적으로 포토샵같은 프로그램으로 만든 이미지를 의미한다.

const loader = new THREE.TextureLoader();
const material = new THREE.MeshBasicMaterial({
  //텍스처 불러오기
  map : loader.load('./wall.jpg'),
})

loader.load 메소드는 비동기로 작동하게된다.

const loader = new THREE.TextureLoader();
loader.load('resources/images/wall.jpg', (texture) => {
  const material = new THREE.MeshBasicMaterial({
    map: texture,
  });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
  cubes.push(cube);
})

다수의 텍스처를 한번에 불러와야 할 경우에는 LoadingManager를 사용할수있다.

const loadManager = new THREE.LoadingManager();
const loader = new THREE.TextureLoader(loadManager);

//...

loadManager.onLoad = () => {
  const cube = new THREE.Mesh(geometry, materials);
  scene.add(cube);
  cubes.push(cube);
}

필터링과 Mips

텍스처의 반복, 위치조절, 회전, 래핑

Three.js 기본적으로 텍스처를 반복하지 않는다.
반복여부를 설정하는 2가지 속성중 수평 래핑 wrapS, 수직 래핑 wrpaT가 있다.

texture의 각각 repeat, offset, center, rotation을 사용하여서 각 값을 바꿀순있다.
즉 정육면체에 만약 texture를 적용한다면 정육면체 각 면에 나타나는 화면을 조금씩 바꿀수있다는것.

---

조명

• OrbitControls : 특정 좌표를 중심으로 카메라를 자전 또는 공전하도록 해준다.