예제소개

Bezier curves & nodes

이 예제는 drei의 QuadraticBezierLine 컴포넌트를 사용하는 방법을 보여 줍니다.

Node 배치

먼저 Node 컴포넌트를 다음과 같이 배치합니다.

<Nodes>
  <Node ref={a} name="a" color="#204090" position={[-2, 2, 0]} />
  <Node ref={b} name="b" color="#904020" position={[2, -3, 0]} />
  <Node ref={c} name="c" color="#209040" position={[0, 0, 0]} />
  <Node ref={d} name="d" color="#204090" position={[1, -1, 0]} />
  <Node ref={e} name="e" color="#204090" position={[-1, -1, 0]} />
</Nodes>

연결선 배치

<Nodes>
  <Node ref={a} name="a" color="#204090" position={[-2, 2, 0]} connectedTo={[b, c, e]} />
  <Node ref={b} name="b" color="#904020" position={[2, -3, 0]} connectedTo={[d, a]} />
  <Node ref={c} name="c" color="#209040" position={[0, 0, 0]} />
  <Node ref={d} name="d" color="#204090" position={[1, -1, 0]} />
  <Node ref={e} name="e" color="#204090" position={[-1, -1, 0]} />
</Nodes>

connectedTo prop을 사용하여 연결 정보를 설정합니다.

Node컴포넌트는 connectedTo 정보를 context를 통해 Nodes 컴포넌트로 전달합니다.

Nodes 컴포넌트는 이 정보를 취함하여 QuadraticBezierLine를 렌더링 합니다.

Quadratic Bezier Curve는 3개의 점으로 이루어진 곡선을 만드는 방식입니다.

drei는 QuadraticBezierLine 컴포넌트는 three.js의 QuadraticBezierCurve3를 사용합니다.

그리고 mid prop을 설정하지 않을 경우 다음과 같이 자동으로 설정해 줍니다.

참조

curve.v1.copy(
  curve.v0
    .clone()
    .add(curve.v2.clone().sub(curve.v0))
    .add(v.set(0, curve.v0.y - curve.v2.y, 0))
);

따라서 시작(start)과 끝(end)점을 지정하는 것으로 node 사이를 이어주는 edge를 렌더링할 수 있습니다.

<QuadraticBezierLine start={line.start} end={line.end} />