Skip to main content

회전 제어

디지털 휴먼을 좌우로 회전시켜 다양한 각도에서 볼 수 있습니다.

메서드​

sendTurnLeft()​

디지털 휴먼을 왼쪽으로 30도 회전시킵니다.

public sendTurnLeft(): void

sendTurnRight()​

디지털 휴먼을 오른쪽으로 30도 회전시킵니다.

public sendTurnRight(): void

사용법​

JavaScript/TypeScript​

import { KleverOneClient } from "@klever-one/web-sdk/core";

const client = new KleverOneClient({
  apiKey: "your-api-key",
  container: document.getElementById("streaming-container"),
});

await client.connect();

// 왼쪽으로 회전
client.sendTurnLeft();

// 오른쪽으로 회전
client.sendTurnRight();

React Hook​

"use client";

import { useRef, useEffect, useMemo } from "react";
import { useKleverOneClient } from "@klever-one/web-sdk/react";

function TurnControl() {
  const containerRef = useRef<HTMLDivElement>(null);
  const tempContainer = useMemo(() => {
    if (typeof document !== "undefined") {
      return document.createElement("div");
    }
    return {} as HTMLDivElement;
  }, []);

  const client = useKleverOneClient({
    apiKey: "your-api-key",
    container: containerRef.current || tempContainer,
    callbacks: {
      onReady: () => console.log("디지털 휴먼 준비 완료!"),
    },
  });

  useEffect(() => {
    return () => {
      if (client.client) {
        client.disconnect();
      }
    };
  }, [client.client]);

  const handleConnect = async () => {
    if (containerRef.current && client.client) {
      try {
        await client.connect();
      } catch (error) {
        console.error("연결 실패:", error);
      }
    }
  };

  const handleTurnLeft = () => {
    if (client.client) {
      client.sendTurnLeft();
    }
  };

  const handleTurnRight = () => {
    if (client.client) {
      client.sendTurnRight();
    }
  };

  return (
    <div>
      <div
        ref={containerRef}
        className="h-[400px] w-[800px] bg-black rounded-lg"
      ></div>

      <div className="controls">
        <button onClick={handleConnect}>연결</button>
        <button
          onClick={handleTurnLeft}
          disabled={client.state.connection !== "connected"}
        >
          왼쪽 회전
        </button>
        <button
          onClick={handleTurnRight}
          disabled={client.state.connection !== "connected"}
        >
          오른쪽 회전
        </button>
      </div>
    </div>
  );
}

관련 기능​

회전 제어와 함께 사용할 수 있는 기능들: