three.js 를 사용해보았다.

12

해보기

목록 보기
4/5

three.js 공식 홈페이지

하도 유명하니 이게 뭐하는건지 따로 설명은 하지 않겠습니다.

쉽지만 쉽지 않은(?) 라이브러리

그대로 사용하기엔 그리 만만한 라이브러리는 아니었습니다.

renderer를 정의하고
renderer의 사이즈를 설정하며
body에 children으로 renderer를 밀어넣고
카메라를 설정하고
scene을 정의하고
scene에 카메라를 넣고,
도형을 만들고

아 이제 더 설명하기 너무 힘들다...

완벽하지 않은 한글 번역

한글 번역이 있긴 하지만 100%는 아닙니다.
en 으로 볼 때와 한국어 로 볼 때의 메뉴 갯수도 다르고 어느 순간부터는 마치 번역기같은 느낌도 많이 들며 링크도 많이 깨져있습니다.

결국은 원문 문서를 읽어야 합니다.

그래서 쉽게 사용할 수 있게 해주는 라이브러리

@react-three/fiber
@react-three/drei

fiber는 react에서 three.js를 사용할 수 있도록 도와주는 라이브러리이며, drei는 fiber에 더해 여러 헬퍼기능을 추가해주는 라이브러리 입니다.

물론 없이도 쌩으로 할 수 있는데 있으면 더 쉽고 재밌게 하는게 가능합니다.
이걸 사용하면 마치 react의 컴포넌트처럼 구현할 수 있습니다.

예제

CodeSandBox를 타고 가면 코드도 볼 수 있습니다.
three.js의 기본 예제를 fiber와 drei를 사용해서 구현했으니 좋은 샘플이 될거에요(?).

Creating a scene

Drawing lines

마우스로 잡아끌면 화면 돌아가는 멋있는건 왜 안되는건데?!

그래서 찾아보니 OrbitControls 라는걸 사용하면 됩니다.

import { OrbitControls } from "@react-three/drei";

를 추가하고
<OrbitControls /> 를 추가하면 쉽게 되는거였습니다.

샘플

profile
지상 최강의 개발자 쥬니니

2개의 댓글

comment-user-thumbnail
2021년 9월 26일

요새 three.js 에 관심이 많았는데, 덕분에 잘 읽어보았습니다.

1개의 답글