threejs Manual 읽고 따라하기

[taenykim]

https://threejs.org/manual/#ko/fundamentals

[taenykim]

Threejs 란

Threejs

• 웹페이지에 3D 객체를 쉽게 렌더링하도록 도와주는 자바스크립트 3D 라이브러리
• WebGL은 점, 선, 삼각형만을 그리는 아주 단순한 시스템. 하지만 WebGL로 직접 무언가를 만들려면 상당히 많은 양의 코드를 짜야하는데 threejs API가 쉽게 도와줌

[taenykim]

https://github.com/taenykim/web-graphics-playground/issues/2#issuecomment-1118042298 에 광원 추가하기

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

• DirectionnalLight에는 위치(position)와 목표(target) 속성이 있다. (기본값은 0, 0, 0)
• MeshBasicMaterial은 광원에 반응하지 않으니, 광원에 반응하는 MeshPhongMaterial로 변경(phong은 광원 반사 모델을 처음 개발한 사람 이름)

[taenykim]

반응형 디자인

• canvas 요소는 기본적으로 300x150 픽셀.
• canvas 요소의 기본 display 속성은 inline. inline 속성은 글자 처럼 취급되어 흰 공백을 남길 수 있으니 display 속성을 block으로 지정.

창 크기에 따라 비율이 깨지는 이슈

• 카메라의 aspect(비율) 속성을 canvas의 화면 크기에 맞춰야 함.
• 렌더링함수에 다음 코드를 추가
  • 렌더링함수에 추가하는 이유 : 프레임을 생성할 때마다 계산해주어야함. (ex. 창을 줄이고 늘리는 행위)

    const canvas = renderer.domElement;
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();

계단 이슈

• canvas 요소에는 두 종류의 크기값이 있습니다.
  1. css로 설정한 canvas 엘리먼트의 크기 (디스플레이 크기)
  2. canvas 원본 pixel 수 (해상도, 드로잉버퍼)
• Three.js에서는 renderer.setSize 메서드로 canvas의 드로잉버퍼 크기를 지정할 수 있다
• 드로잉버퍼 크기는 canvas의 디스플레이 크기에 맞추면 좋다. (clientWidth와 clientHeight)

canvas의 원본 크기와 디스플레이 크기를 비교해 원본 크기를 변경할지 결정하는 함수

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

CSS를 제어하지 않고 CSS로 제어하기

• canvas가 다른 요소들과 잘 어울릴 수 일관성 있는 프로그래밍
• js를 수정할 필요 업고, html과 css만 수정하여 제어가능 하도록!!
• 위처럼 css를 읽어와서 sizing 하도록 하는 게 좋음.

HD-DPI 디스플레이

• HD-DPI : 고해상도(high-density dot per inch). 스마트폰의 실제 화면(디스플레이) 크기가 데스크탑에 비해 훨씬 작지만, 해상도는 비슷한 경우. 한 픽셀을 선명하게 표현하기 위해 다수의 작은 픽셀을 넣는 것.
• 브라우저단에서는 픽셀의 집적도에 상관 없이 CSS 픽셀을 이용해 요소의 크기를 지정할 뿐
• threejs에서 대응하는법
  1. 직접 해상도 배율 알려주기 : rederer.setPixelRatio 메소드 사용

     renderer.setPixelRatio(window.devicePixelRatio);
     # 그럼 renderer.setSize 에서 직접 배율을 곱해 계산해줌

  2. canvas를 리사이징할 때 직접 계산 ⭐️

     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;
     }

[taenykim]

해당페이지에 버그가 있어서 PR 올려서 수정했다. 😊 https://github.com/mrdoob/three.js/pull/24026

원시 모델(primitives)

• Three.js의 원시 모델이란, 주로 런타임에서 다양한 인자들로 정의한 3D 모양
• 대부분의 3D 모델들은 마야나 씨포디로 작업하긴함~

BoxGeometry (육면체)

• 육면체의 면의 segment는 1일때, 삼각형 2개, 2일때, 삼각형 4개로 나뉘어짐

const width = 8;  // ui: width
const height = 8;  // ui: height
const depth = 8;  // ui: depth
const widthSegments = 4;  // ui: widthSegments
const heightSegments = 4;  // ui: heightSegments
const depthSegments = 4;  // ui: depthSegments
const geometry = new THREE.BoxGeometry(
    width, height, depth,
    widthSegments, heightSegments, depthSegments);

CircleGeometry (플랫 원)

• segments(minimum = 3, default = 8)
• thetaLength(default = 2Pi)
• thetaStart : Start angle for first segment (3시방향에서 반시계로 segment가 펼쳐짐)

const radius = 7;  // ui: radius
const segments = 24;  // ui: segments
const thetaStart = Math.PI * 0.25;  // ui: thetaStart
const thetaLength = Math.PI * 1.5;  // ui: thetaLength
const geometry = new THREE.CircleGeometry(
    radius, segments, thetaStart, thetaLength);

[taenykim]

이슈 close

• 다른 튜토리얼로 공부