three.js 셋팅_메쉬 (3)

메쉬 셋팅

<script>
// Mesh
  const geometry = new THREE.BoxGeometry(1,1,1); // 1m * 1m * 1m를 의미
  const material = new THREE.MeshBasicMaterial({
      // color:'red',
      color:'#f00000'
  });
</script>

박스 구현

1. geometry(기하학)라는 변수에 BoxGeometry를 활용하여 (1,1,1)
   예를 들어 1m,1m,1m인 박스 형태를 구현한다.

재질 구현

2. material(재질)라는 변수에 MeshBasicMaterial를 활용하여 색상을 넣어주는데
   color의 경우에는 0xf00000 라고도 표현을 하는데 0x의 경우는 16진수를 뜻하는 표기법이다.
   그외로 ''콤마를 사용해서 'red','yellow'와 같이 표현이 가능하며
   '#f00000'와 같이 콤마를 사용해 헥스코드를 사용해도 된다!

---

<script>
  const mesh = new THREE.Mesh(geometry,material);
  scene.add(mesh);
</script>

렌더링

1. 위에서 선언해준 박스은 geometry와 material을 mesh에 설정하는 mesh변수를 생성
2. 그리고 박스와 재질을 갖춘 mesh를 scene에 삽입해준다.

이렇게만 하면 딱 mesh가 화면에 노출이 될줄 알았는데 아니었따!

<script>
	renderer.render(scene,camera);
</script>

이와 같이 (1)에서 선언해준 renderer에 render을 해줘야하는데
해당 렌더에 scene과 camera를 설정해줘야 렌더에 노출이 된다!⭐️

이렇게 하면 설정해준 박스가 딱 화면에 노출되는데,
여기서 박스가 2d처럼 딱 정면이라 좀 화면을 변경해줘야 할거 같다!

<script>
  const camera= new THREE.PerspectiveCamera(
      75, //시야각
      window.innerWidth / window.innerHeight, //종횡비
      0.1, //near
      1000 //far
  );
  camera.position.x = 1; 👈
  camera.position.y = 2; 👈
  camera.position.z = 5; // 5m라고 가정
  scene.add(camera);
</script>

화살표 표시와 같이 position 속성을 활용하여 카메라의 x,y축을 이동!

이동하면 이렇게 카메라의 위치가 바뀌어서 3d인 박스가 정상적으로 들어간걸 확일할 수 있는데,
표시한 부분을 보면 약간 해상도가 깨진것처럼 박스의 선이 지글지글하게 노출된다!
이럴때는 살짝 코드가 무거워질수도 있지만 (그렇게 크으으으게 무거워지진 않는다고 함)

<script>
const renderer = new THREE.WebGLRenderer({
    canvas,
    antialias: true
});
</script>

renderer에서 antialias를 true로 추가 기입해주면!
지글지글한 부분이 깔끔~하게 처리된다!