[ three.js ] Scene(3D 공간)을 생성하고 컨트롤해보자.

 

작성자가 자바스크립트를 써와서 타입스크립트에 대해 미숙하여 타입스크립트에 미흡한 부분이 포함되어 있습니다.

 

📄 fiber / drei

리액트에서 three.js를 좀 더 편하게 사용하기 위해 사용하는 라이브러리 입니다.

 

작성자는 이 두개를 사용하여 게시글을 작성해보겠습니다. 🙂

 

https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

React Three Fiber Documentation

 

https://github.com/pmndrs/drei

GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber

 

⬇️ install

리액트(타입스크립트) 프로젝트를 만듭니다.

$ npx create-react-app <FolderName> --template typescript

 

이후, three.js를 사용하기 위한 라이브러리를 설치합니다.

# three.js 설치
$ npm install --save three

# fiber 설치
$ npm install three @types/three @react-three/fiber

# drei 설치
$ npm install @react-three/drei

 

🌏 Scene 생성

3D 공간을 편집하기 위한 Scene을 만들어줍니다.

 

작성자는 프로젝트에 📁Editor를 생성하여 해당 폴더 안에 📄 EditorScene.tsx를 생성하겠습니다.

 

 

🌏 Scene

📁 Editor/ 📄 EditorScene.tsx

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

export const EditorScene = () => {

  return (
    <div>
      <Canvas>
      </Canvas>
    </div>
  );
};

 

해당 컴포넌트를 📄 App.js에 불러온다.

 

$ npm run start

 

그리고 프로젝트를 실행하면

화면이 나타나는데 아무것도 보이질 않는다.

 

좀 더 3D 공간의 느낌을 낼 수 있도록 코드를 추가해주자.

 

배경색을 변경하고 그리드를 추가해보자.

이때, Scene은 부모 컨테이너의 넓이를 그대로 상속 받는다.

 

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

.editorFrame {
  width: 100vw;
  height: 100vh;
  background-color: #2e2e2e;
}

 

➰ Grid

📁 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";

export const EditorScene = () => {

  return (
    <div className={styles.editorFrame}>
      <Canvas>
        <Grid/>
      </Canvas>
    </div>
  );
};

 

다시 프로젝트를 새로고침 한다면,

 

 

🎉짜잔~

아무것도 안 보인다.

 

사실은 추가되어 있는 상태이며, 현재 기본 각도가 정면이라서 해당 그리드 라인이 안 보이는 것이다.

 

Scene에서 카메라의 기본 위치값을 변경해주자.

 

🎥 Camera

📁 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";

export const EditorScene = () => {

  return (
    <div className={styles.editorFrame}>
      <Canvas
        camera={{
          aspect: 1280 / 720,
          fov: 50,
          near: 0.1,
          far: 1000,
          position: [2.5, 1.2, 3.5],
        }}
      >
        <Grid />
      </Canvas>
    </div>
  );
};

 

 

그리드가 나타났지만 많이 아쉽다.

 

three-drei에 들어가면 그리드의 기본 설정값이 나온다.

설정해주자.

 

📁 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";

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.2, 3.5],
        }}
      >
        <Grid {...gridConfig} />
      </Canvas>
    </div>
  );
};

 

다음 코드를 실행하면,

 

 

이제 뭔가 3D 공간 처럼 보인다. 👏🏻👏🏻👏🏻👏🏻👏🏻

 

마우스를 드래그해도 해당 공간을 둘러볼 수가 없다.

Controller를 추가하여 공간을 컨트롤해보자.

 

🕹️ OrbitControls

📁 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";

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/>
        <Grid {...gridConfig} />
      </Canvas>
    </div>
  );
};

 

그럼 이제 기본 카메라 각도를 마우스로 조종할 수 있다.