[ three.js ] Scene에 Box 오브젝트를 추가하고 컨트롤해보자.

 

이전 게시글에서 3D 공간인 Scene을 만들었다.

 

이제 해당 공간에 박스를 생성해보자.

 

우선 3D 객체의 구성을 알아보자.

3D 객체는 다음과 같이 이루어져있다.

 

이하, 3D 객체를 모델로 표현하겠다.

 

🍕 Model

∙ 📦 Mesh

Mesh란, 객체를 생성하기 위해서 여러 폴리곤(다각형)의 집합을 이루고 있다.

점들이 무수히 모여 선이 되고, 그 선이 모여 폴리곤을 이루고, 해당 폴리곤들이 모여 Mesh라는 객체를 이룬다.

 

∙ 🌏 Geometry

공간의 속성과 관련한 수학 값들이다.

 

∙ 👕 Material

해당 물질을 이루는 재료를 나타낸다.

 

 

 

이 세 가지가 있으면 모델을 표현할 수 있다.

 

 

그럼 이제 모델을 만들어보자.

 

📦 Box

박스를 불러오기 위해 📄 BoxLoader.tsx를 생성해주었다.

 

나는 박스를 두 개 만들 것이다.

박스를 구분하고, 위치, 색을 구분하기 위해 전달자에 name, position, color 값을 줄 것이다.

 

📁 Editor / 📄 BoxLoader.tsx

import { FC } from "react";

interface BoxLoaderProps {
  name: string;
  position: [number, number, number];
  color: string;
}

export const BoxLoader: FC<BoxLoaderProps> = ({ name, position, color }) => {
  return (
    <>
      <mesh name={name} position={position}>
      </mesh>
    </>
  );
};

 

<mesh/> 태그를 이용하여 mesh를 생성하고, 해당 mesh에 이름과 위치값을 설정해주었다.

 

근데 뭘 만들지 아직 모른다.

 

이게 메쉬는 메쉬인데, 박스인지 원인지

 

다음 코드를 추가한다.

 

📁 Editor / 📄 BoxLoader.tsx

import { FC } from "react";

interface BoxLoaderProps {
  name: string;
  position: [number, number, number];
  color: string;
}

export const BoxLoader: FC<BoxLoaderProps> = ({ name, position, color }) => {
  return (
    <>
      <mesh name={name} position={position}>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial roughness={1} color={color} />
      </mesh>
    </>
  );
};

 

args는 박스의 크기를 의미한다.

 

이제 📁 Editor / 📄 EditorScene.tsx에서 📄 BoxLoader를 불러오면 Scene에 박스가 생성되는데,

전달자에 name과 position, color값을 넣어주자.

 

📁 Editor / 📄 EditorScene.tsx

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

export const EditorScene = () => {
  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,
  });

  return (
    <div className={styles.editorFrame}>
      <Canvas
        camera={{
          aspect: 1280 / 720,
          fov: 50,
          near: 0.1,
          far: 1000,
          position: [2.5, 1, 3.5],
        }}
      >
        <OrbitControls />
        <BoxLoader name={"box1"} position={[-1, 0, 0]} color={"red"} />
        <BoxLoader name={"box2"} position={[1, 0, 0]} color={"skyblue"} />
        <Grid {...gridConfig} />
      </Canvas>
    </div>
  );
};

 

자~ 그럼 박스가 잘 나왔나보자.

 

...?

 

분명 color 값을 줬는데 검은색이다.

 

왜일까... 🤔

 

바로 공간에 빛이 없기 때문이다.

 

따라서 Scene 공간에 빛을 만들어주자.

 

💡 DirectionalLight

손전등과 같은 빛을 Directional-light라고 한다. 직선으로 쭈욱 뻗어나가는 빛이다.

 

📁 Editor / 📄 EditorScene.tsx

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

export const EditorScene = () => {
  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,
  });

  return (
    <div className={styles.editorFrame}>
      <Canvas
        camera={{
          aspect: 1280 / 720,
          fov: 50,
          near: 0.1,
          far: 1000,
          position: [2.5, 1, 3.5],
        }}
      >
        <directionalLight
          position={[2.5, 1, 3.5]}
          intensity={1}
          color={"white"}
        />
        <OrbitControls />
        <BoxLoader name={"box1"} position={[-1, 0, 0]} color={"red"} />
        <BoxLoader name={"box2"} position={[1, 0, 0]} color={"skyblue"} />
        <Grid {...gridConfig} />
      </Canvas>
    </div>
  );
};

 

프로젝트를 실행하면

 

 

(찌부되어 보이는 건 내 화면 비율 탓...)

 

모델이 전달자로 전달 받은 값에 따라 잘 동작한다.

 

---

 

 

프로젝트 폴더 이름은 Editor이다. 그러나 지금은 모델을 놓고 아무 것도 편집할 수 없는 Viewer 기능만을 제공한다.

 

해당 물체를 수정할 수 있도록 클릭 시, 컨트롤이 나타나게 해보자.

 

컨트롤러를 한 번에 모아주기 위해 📄 Contoller.tsx 파일을 생성해주자.

 

✂️ TransformControls

📁 Editor / 📄 Controller.tsx

import { OrbitControls, TransformControls, useTrail } from "@react-three/drei";
import { useThree } from "@react-three/fiber";
import { FC } from "react";

interface ControllerProps {
  mode: any;
  selectedName: string;
}
export const Controller: FC<ControllerProps> = ({ mode, selectedName }) => {
  const scene = useThree((state) => state.scene);
  const object = scene.getObjectByName(selectedName);

  return (
    <>
      {selectedName && <TransformControls object={object} mode={mode} />}
      <OrbitControls makeDefault enableDamping={false} />
    </>
  );
};

 

기존 OrbitControls를 제거하고 현재 파일에 생성하였다.

 

OrbitControls에 값이 추가되었는데,

makeDefault를 통해 해당 컨트롤이 기본적으로 사용되나 다른 컨트롤러가 사용될 때 사용되지 않도록 정의할 수 있다.

enableDamping을 통해 카메라의 이동의 종료가 천천히 멈추지 않고 딱딱 끊기도록 Editor의 속성을 지니도록 하였다.

(편집기가 스무스하게 이동한다면, 편집이 힘들 것이니 바로 멈추도록하여 사용자가 편집에 용이하도록 하였다.)

 

 

인터페이스로는 TransformControls에서 오브젝트의 어떤 것을 바꿀지에 대한 값이 들어가는데

 

∙ 위치: "translate"

∙ 회전: "rotate"

∙ 규모: "scale"

 

string 타입의 값이 들어갈 수 있다.

 

object는 어떠한 오브젝트에 해당 TransformControls를 띄울지에 대한 모델이 들어간다. 

 

selectedName은 어떤 객체를 TransformControls를 통하여 수정할지에 대한 오브젝트의 이름값이다..

 

useThree는 Canvas 안에 사용할 수 있는 Hook으로 Canvas의 내용을 가져올 수 있다.

 

useThree((state) => state.scene);

 

해당 코드를 통해 현재 상태의 Scene을 가져오고

 

const object = scene.getObjectByName(<objectName>);

 

scene의 .getObjectByName(<objectName>) 메서드를 통해 scene에서 name값으로 오브젝트를 가져온다.

 

선택된 객체를 분간할 수 있도록 선택된 객체의 name 값을 담을 State 코드를 추가하자.

 

📁 Editor / 📄 EditorScene.tsx

import { useState } from "react";
import { Grid, OrbitControls } 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";

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,
  });

  return (
    <div className={styles.editorFrame}>
      <Canvas
        camera={{
          aspect: 1280 / 720,
          fov: 50,
          near: 0.1,
          far: 1000,
          position: [2.5, 1, 3.5],
        }}
      >
        <Controller mode={mode} selectedName={selectedName} />
        <directionalLight
          position={[2.5, 1, 3.5]}
          intensity={1}
          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>
  );
};

 

변경된 점은 mode라는 State와 selectedName이라는 선택된 객체의 이름이 새로 생성되었고

이를 필요한 컴포넌트에 전달자로 props를 통해 전달하고 있다.

 

객체를 클릭했을 때, 객체가 name값을 selectedName에 설정할 수 있도록 📄 BoxLoader.tsx의 코드를 수정하자.

 

📁 Editor / 📄 BoxLoader.tsx

import { Dispatch, FC, SetStateAction, useCallback } from "react";

interface BoxLoaderProps {
  name: string;
  position: [number, number, number];
  color: string;
  setSelectedName: Dispatch<SetStateAction<string>>;
}

export const BoxLoader: FC<BoxLoaderProps> = ({
  name,
  position,
  color,
  setSelectedName,
}) => {
  const handleClick = useCallback(() => {
    setSelectedName(name);
  }, [name, setSelectedName]);

  return (
    <>
      <mesh name={name} position={position} onPointerDown={handleClick}>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color={color} />
      </mesh>
    </>
  );
};

 

handleClick() 함수를 작성하여 mesh에 onPointerDown을 통해 함수를 실행시켜 해당 오브젝트의 name을 설정되게 하였다.

 

이제 오브젝트를 누르면,

 

모델의 translate 값을 편집할 수 있게 되었다.

 

이제 버튼을 만들고 mode를 변경하여 다른 속성을 편집할 수 있게 다음 게시글에서 작성하겠다.