[ three.js ] 3D Box 모델의 Transform을 변경해보자. (feat. fontAwesome)

 

🕹️ TransformControls

해당 컴포넌트는 mode의 속성을 통해 오브젝트의 편집 모드를 변경할 수 있다.

 

∙ translate: 오브젝트의 위치 좌표값을 변경

∙ rotate: 오브젝트의 회전값을 변경

∙ scale: 오브젝트의 규모 변경

 

따라서 버튼을 생성하고, 해당 버튼을 누를 때 버튼에 적용된 값으로 상태값을 변경하여 컨트롤러의 편집 모드를 설정해보겠다.

 

이전 게시글에서 mode라는 useState()를 생성하여 "translate" 값을 넣었다.

 

해당 상태를 만들기 위해 버튼을 만들어보자

 

📁 Editor / 📄 TransformControlButtons.tsx

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import styles from "./CSS/TransformControllButtons.module.css";
import translate from "./Assets/translate.svg";
import {
  faRotate,
  faUpDownLeftRight,
  faUpRightAndDownLeftFromCenter,
} from "@fortawesome/free-solid-svg-icons";
import { Dispatch, FC, SetStateAction } from "react";

interface TransformControllButtonsProps {
  mode: string;
  setMode: Dispatch<SetStateAction<string>>;
}
export const TransformControllButtons: FC<TransformControllButtonsProps> = ({
  mode,
  setMode,
}) => {
  const handlerMode = (type: string) => {
    setMode(type);
  };

  return (
    <>
      <div className={styles.toolbox}>
        <div
          className={styles.mode}
          style={{
            backgroundColor: mode === "translate" ? "#0082ff" : "#101010",
          }}
          onClick={() => {
            handlerMode("translate");
          }}
        >
          <FontAwesomeIcon icon={faUpDownLeftRight} />
        </div>
        <div
          className={styles.mode}
          style={{
            backgroundColor: mode === "rotate" ? "#0082ff" : "#101010",
          }}
          onClick={() => {
            handlerMode("rotate");
          }}
        >
          <FontAwesomeIcon icon={faRotate} />
        </div>
        <div
          className={styles.mode}
          style={{
            backgroundColor: mode === "scale" ? "#0082ff" : "#101010",
          }}
          onClick={() => {
            handlerMode("scale");
          }}
        >
          <FontAwesomeIcon icon={faUpRightAndDownLeftFromCenter} />
        </div>
      </div>
    </>
  );
};

 

fontawesome을 통해 각 버튼에 시각적으로 변경 모드를 설정해준다.

 

그리고 해당 버튼 컴포넌트를 에디터 위에 띄우기 위해 css. position값을 "absolute"로 설정해주었다.

 

📁 Editor / 📁 CSS / 📄 TransformControlButtons.module.css

.toolbox {
  position: absolute;
  top: 2rem;
  left: 2rem;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;

  width: 2.2rem;
  height: 6.3rem;
  background-color: #101010;

  border-radius: 3px;

  z-index: 1;
}

.mode {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 2rem;
  height: 2rem;

  border-radius: 3px;

  font-size: 1.2rem;
  font-weight: 800;
  color: white;
}

.mode:hover {
  cursor: pointer;
  color: white;
  background-color: #0082ff;
}

 

 

해당 컴포넌트를 캔버스 밖에서 호출하여 준다면,

 

 

버튼을 변경할 때 마다 mode가 변경되면서, 해당 컨트롤러가 mode값을 전달받아 해당 속성을 변경할 수 있다.

 

 

Scene을 눌렀을 때, 선택된 객체를 해제하고 싶다.

 

📁 Editor / 📄 EditorScene.tsx

import { useState } from "react";
import { Grid } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import styles from "./CSS/EditorScene.module.css";
import { BoxLoader } from "./BoxLoader";
import { Controller } from "./Controller";
import { TransformControllButtons } from "./TransformControllButtons";

export const EditorScene = () => {
  const [selectedName, setSelectedName] = useState<string | any>(null);
  const [mode, setMode] = useState("translate");
  const [gridConfig, setGridConfig] = useState({
    cellSize: 0.25,
    /** Cell thickness, default: 0.5 */
    // cellThickness: "white",
    /** Cell color, default: black */
    cellColor: "#afafaf",
    /** Section size, default: 1 */
    sectionSize: 0.5,
    /** Section thickness, default: 1 */
    // sectionThickness?: number
    /** Section color, default: #2080ff */
    sectionColor: "#afafaf",
    /** Follow camera, default: false */
    // followCamera: true,
    /** Display the grid infinitely, default: false */
    infiniteGrid: true,
    /** Fade distance, default: 100 */
    fadeDistance: 30,
    /** Fade strength, default: 1 */
    fadeStrength: 3,
  });

  const missedObject = () => {
    setSelectedName(null);
  };

  return (
    <div className={styles.editorFrame}>
      <TransformControllButtons mode={mode} setMode={setMode} />
      <Canvas
        camera={{
          aspect: window.innerWidth / window.innerHeight,
          fov: 50,
          near: 0.1,
          far: 1000,
          position: [3, 1, 7],
        }}
        onPointerMissed={missedObject}
      >
        <Controller mode={mode} selectedName={selectedName} />
        <directionalLight
          position={[2.5, 1, 3.5]}
          intensity={2}
          color={"white"}
        />
        <BoxLoader
          name={"box1"}
          position={[-1, 0, 0]}
          color={"red"}
          setSelectedName={setSelectedName}
        />
        <BoxLoader
          name={"box2"}
          position={[1, 0, 0]}
          color={"skyblue"}
          setSelectedName={setSelectedName}
        />
        <Grid {...gridConfig} />
      </Canvas>
    </div>
  );
};

 

 onPointerMissed를 설정하여 마우스 포인터를 잃었을 때, 선택된 값이  null이 되도록 해주었다.