P5.js는 간단한 2D 그래픽 뿐만 아니라 멋진 3D 그래픽도 작성할 수 있는 강력한 JavaScript 라이브러리입니다. 이 블로그 포스트에서는 P5.js를 사용하여 3D 그래픽을 처리하는 방법에 대해 알려드리겠습니다.

1. 3D 그래픽을 위한 기본 설정

P5.js에서 3D 그래픽을 사용하기 위해서는 createCanvas() 함수를 호출할 때 3D 모드를 사용하도록 설정해야 합니다. 다음 예제 코드를 살펴보세요:

function setup() {
  createCanvas(400, 400, WEBGL); // 3D 모드로 설정
}

2. 3D 모델 작성

3D 그래픽을 작성하기 위해서는 3D 모델이 필요합니다. P5.js는 다양한 기본 도형 (예: 구, 상자, 원통)을 생성하는 함수들을 제공합니다. 다음은 구를 그리는 예제 코드입니다:

function draw() {
  background(220);
  
  rotateX(frameCount * 0.01); // X축 회전 애니메이션
  rotateY(frameCount * 0.01); // Y축 회전 애니메이션
  
  sphere(100); // 구 그리기
}

rotateX()와 rotateY() 함수를 사용하여 구를 회전시키는 애니메이션을 만들었습니다. sphere() 함수는 지름이 100인 구를 그립니다.

3. 조명과 재질 설정

3D 그래픽을 리얼리스틱하게 만들기 위해서는 조명과 재질을 설정해주어야 합니다. 다음은 조명과 재질을 설정하는 예제 코드입니다:

function setup() {
  createCanvas(400, 400, WEBGL);
  ambientLight(100); // 환경 조명 설정
  directionalLight(255, 255, 255, 0, 0, 1); // 방향 조명 설정
  
  noStroke(); // 테두리 없음
  shininess(20); // 재질의 광택 설정
  specularMaterial(255); // 재질의 색상 설정
}

function draw() {
  background(220);
  
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  
  sphere(100);
}

ambientLight() 함수를 사용하여 주변 환경의 조명을 설정하고, directionalLight() 함수를 사용하여 특정 방향에서 오는 조명을 설정합니다. noStroke() 함수는 모델의 테두리는 그리지 않도록 설정하며, shininess() 함수를 사용하여 재질의 광택을 설정합니다. specularMaterial() 함수를 사용하여 재질의 색상을 설정합니다.

4. 키보드 및 마우스 이벤트 처리

P5.js는 키보드 및 마우스 이벤트를 처리할 수도 있습니다. 예를 들어, 마우스 드래그로 모델을 회전시키는 기능을 추가하고 싶다면 다음과 같이 마우스 이벤트를 사용할 수 있습니다:

let xRotation = 0;
let yRotation = 0;

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  background(220);
  
  rotateX(xRotation);
  rotateY(yRotation);
  
  sphere(100);
}

function mouseDragged() {
  let dx = mouseX - pmouseX;
  let dy = mouseY - pmouseY;
  
  xRotation += dy * 0.01;
  yRotation += dx * 0.01;
}

mouseDragged() 함수를 사용하여 마우스 드래그 이벤트를 처리하고, mouseX와 mouseY 변수를 사용하여 마우스의 이동 변화를 가져옵니다. 이 변화를 사용하여 xRotation 및 yRotation 값을 업데이트하여 모델을 회전시킵니다.

이제 여러분은 P5.js를 사용하여 멋진 3D 그래픽을 만들 수 있습니다. 자세한 내용과 다양한 예제는 P5.js 공식 웹사이트를 참조해주세요. Happy coding!