three.js 입문

3D로 반응형 웹사이트에 관심이 생겼고, 그것이 바로 thress.js라는 라이브러리로 사용이 가능하다고 알게되어, 바로 온라인 강의를 신청하였다.

---

✅ JS Module 기본

three.js에서는 스크립트를 불러올 때 모듈방식으로 많이 불러온다고 한다. (물론 일반 자바스크립트에서도 유용)

많은 js파일을 html에서 열어줄 순 있지만 이 것을 하나의 js에서 다른 js를 포함시키는 방법이다.

 <script type="module" src="main.js"></script>

일단 html파일에서 스크립트를 적어 준 후 type을 module로 해주어야 하고.

main.js

hello1();

hello.js

function hello1(){
consoloe.log('Hello 1!');
}

hello.js 파일에는 hello1이라는 함수에 콘솔 명령을 넣어주었고, main.js로 그 함수를 넣어 불러주도록 하려고 한다.

✅ 방법은 간단

내보내고 싶은 코드 앞에 export라는 키워드만 적어주면 된다.

⭐️export⭐️ function hello1(){
	consoloe.log('Hello 1!');
}

그렇다면 main.js에서는 어떻게 가져와야 하나~?

간단하다. import를 사용해서 가져오면 된다.

import { hello1 } from './hello.js(경로)';

hello1();

여기서 주의해야 할 것은 hello1 함수를 그냥 가져오는 것이 아니라 {}를 사용해서 불러주어야 한다!
그리고 그 뒤에는 그 함수의 경로인 ./hello.js를 넣어주면 된다.

---

그렇다면 함수가 여러개 일 경우에는??

function hello1(){
	consoloe.log('Hello 1!');
}
function hello2(){
	consoloe.log('Hello 2!');
}

이렇게 되어있다면
아래와 같이 ,(쉼표)로 함수 두가지를 넣어준 후 호출해주면 된다.

import { hello1,hello2 } from './hello.js(경로)';

hello1();
hello2();

---

🤯 함수가 2개가 아닌 100개와 같이 여러개일 경우에는??

import * as hello from './hello.js(경로)';

hello1();
hello2();

와 같이 * (모두를 뜻함)를 사용하고 as hello(임의의 오브젝트)
라는 이름으로 가져오겠다를 뜻한다.
그래서 결과를 확인한다면?? 오류가 나버린다

아래의 hello1()와 hello2();도 hello라는 오브젝트 이름처럼 사용해주어야 한다.

hello.hello1();
hello.hello2();

---

three.js에서는 아래와 같이 three~ 로 주로 사용한다고 한다.

import * as three from './hello.js(경로)';
three.hello1();
three.hello2();