10분만에 Three.js 띄우기
D+38
오늘도 나는 독자들과 쉐도우 복싱을 하고 있다. 무슨말이냐 하면 독자들이 나에게 원하는 것은 1번이 Three.js이고 2번이 이것을 AEC분야와 연결 시키는 것이라고 생각한다. 회사에서 Three.js 프로젝트를 잠시 해봤다라고 하며 미천한 전문성을 이야기 해보며 Three.js를 하나하나 이야기 해본다. 누군가에게 설명하면서 배우기. 그것이 제일 큰 공부법이라고 했으니까. 참고로 Three.js Doc기준의 내용이니 Docs도 참고해 주시길 바란다. https://threejs.org/docs/index.html#manual/en/introduction/Installation
1. 설치 및 띄우기
나의 밑천은 여기서부터 바로 드러난다. 대부분 Javascript 패키지는 CDN을 통해 링크로 불러오거나 NPM을 통해 로컬에 다운받은 후 쓰게 되어있다. NPM을 쓰려면 Node.js를 설치해야한다. Node.js를 처음 써본다면 https://nodejs.org/en 에서 다운받으면 된다. 조금 써본 사람들이라면 내가 굳이 설명할 필요는 없겠지만, nvm을 쓰길 권장한다.
정상적으로 설치되었다는 가정하에, 빈폴더에서 npm install --save three 를 커맨드 창에 입력하면 뭔가 알아서 돌아가는 것을 볼 수 있다.
해당 폴더에 index.html을 만들고 아래 내용을 입력한다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script type="module" src="/main.js"></script>
</body>
</html>
같은 폴더 위계에 main.js를 만든다 그리고 아래 내용을 입력한다
import * as THREE from 'three';
여기까지 하고 npx vite를 입력하면 페이지를 볼 수있다.
2. 폴더 구조 및 각 내용
나머지 내용은 docs에 있기 때문에 생략하고 최종 폴더 구조를 보면 다음과 같다.
main.js는 이렇게 되어있다.
이 상태에서 띄운 창을 보면 다음과 같다
이것만 보면 Three.js를 왜쓰는지 이해가 안갈 것이다. 왜냐면 매우 볼품없기 때문이다. 하지만 나중에 Lighting 등을 더하면 훨씬 멋진 모습으로 재탄생 한다.
독자들이 원하는 컨텐츠를 만들기 위해 나도 내가 듣던 수업을 좀더 빠르게 하고 AEC와 접목시키는 부분을 좀더 연구해야겠다. 해당 내용은 크게 뭐가 없지만 혹시 참고하고 싶은 독자들을 위해 링크를 남긴다
https://github.com/Chaeguevara/playGround/tree/main/ThreeJS/myFirstThree
