소개

Exploring the Process of Building a Procedural 3D Kitchen Designer with Three.js | Codrops

3D 주방 디자이너를 Three.js로 구현한 과정에 대한 글입니다.

Three.js와 React Three Fiber(R3F)를 사용하여 3D 주방 디자이너를 만드는 과정을 설명합니다. 이 프로젝트는 사용자 인터페이스(UI)와 3D 모델링을 결합하여 사용자가 주방 레이아웃을 시각적으로 디자인할 수 있도록 합니다.

마우스 이벤트 처리

기본적으로 onPointerDown와 onPointerMove 이벤트를 사용하여 마우스 클릭과 이동을 처리합니다.

<mesh
  onPointerDown={(e) => {
    const [intersection] = e.intersections;
    if (intersection) {
      const point = intersection.point;
      setPoints((prev) => [...prev, point]);
    }
  }}
  onPointerMove={(e) => {
    refMoving.current = e.point;
    if (points.length) {
      const lastPoint = points[points.length - 1];
      bufferGeometry.setFromPoints([lastPoint, e.point]);
    }
  }}
>
  <planeGeometry args={[100, 100]} />
  <meshBasicMaterial color={0xcccccc} side={THREE.DoubleSide} />
</mesh>

벽 생성

그려지는 선을 따라 벽을 생성합니다. 벽은 BoxGeometry를 사용하여 생성되며, 벽의 두께와 높이를 설정할 수 있습니다.

Cabinet

그려진 벽을 따라 캐비닛을 배치합니다. 캐비닛은 벽에 스냅되며, 벽의 길이에 맞게 자동으로 조정됩니다.

결론

리뷰를 해 보려했지만, 공유한 코드가 충분치 않아 최종 모습까지는 재현하지 못했습니다.