[React] 리액트로 Three.js 작업하기 기본 (3D 박스 구현)

내가 까먹을까봐 쓰는 Three.js 리액트 작업 순서

VSCODE 실행하고 터미널을 열어

npx create-react-app my-app

리액트 프로젝트를 설치한다. (my-app 부분을 내 프로젝트 이름으로 대체)
나는 대충 문서 폴더에 threejs라는 프로젝트를 생성했다.

순조롭게 설치

cd 프로젝트명
명령어를 통해 프로젝트 폴더로 이동해준다.

터미널에 npm start를 입력해 로컬 서버를 켠다.

익숙한 리액트 로고 등장
작업 준비완

이제 리액트로 three를 설치하면 된다.

https://threejs.org/docs/index.html#manual/en/introduction/Installation
three.js 작업에 필수적인 document. 설치법이 나와있다.

아래의 명령어들로 THREE와 THREE 작업을 도와주는? 패키지 두개를 설치한다.

npm install three

npm install @react-three/fiber

npm install @react-three/drei

이제 App.js를 연다.

기본 내용을 다 지워버립시다.
App.css의 내용도 지우고,
canvas를 width:100%; height:100%;로 설정한다.

이 상태로 브라우저를 열어보면 내용이 없는 텅 빈 화면일 것이다.
여기에 이제 컨트롤 가능한 3D 박스를 넣어봅시다.

일단 필요한 팩들을 불러와야겠죠?

import React from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

그리고 App 함수에 캔버스를 넣어준다.
왜냐..캔버스가 필요하기때문이다 (끄덕)
그리고 3D 도형을 감쌀 mesh 태그도 넣어준다.
왜냐..필요하다고 들었기때문이다 (끄덕)

이제 boxGeometry를 불러온다.

여기서 args는 크기 속성이며 너비, 높이, 깊이이다.

1:1:1 비율의 정육면체 도형을 소환했다.
이렇게 휑~ 하게 2D인지 3D인지 구분이 안되는 도형이 하나 생기는 것을 확인할 수 있다.

하지만 색이 없다! 움직임이 없다!
3D로 만들어보자.

먼저, meshStandardMaterial로 색상을 추가!
이렇게만 하면 도형이 까맣게 보인다. 빛이 없기때문이다.

빛도 추가해준다.
오브젝트 주변 주명인 ambientLight를 끼얹어준다. (기본값은 1)
부족하면 방향이 있는 빛인 directionalLight도 추가해준다.

드디어 색이 생겼다.
이제 얘가 3D라는 것을 보여주자.
OrbitControls를 추가하면 된다.
추가하고나서 도형을 움직여보면 회전하고 마우스 휠로 확대/축소도 된다.

혼자 돌아가도록 OrbitControls 태그 안에 autoRotate={true} 속성을 추가해주면 이제 알아서 혼자 돈다.

코드 완성본

import './App.css'
import React from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

function App() {
  return (
    <>
      <Canvas>
        <OrbitControls autoRotate={true}/>
        <mesh>
          <ambientLight intensity={1} />
          <directionalLight position={[-1,0,1]} intensity={0.5} />
          <boxGeometry args={[1, 1, 1]} />
          <meshStandardMaterial attach="material" color={0xa3b18a}/>
        </mesh>
      </Canvas>
    </> 
  );
}

export default App;

 

 

728x90