threejs 웹을 통하여 공부하며 개인적으로 정리한 내용을 개인경험을 추가하여 정리한 곳 입니다.
https://threejs.org/ 에서 제공 하는 Three.js Fundamentals 진행 이후,
유료 강의인 Three.js Journey에 대한 리뷰를 진행 할 예정입니다.
Learn Three.js의 경우 기본 이론의 심화 과정 느낌인데, 학생ID 이용시 무료 로 사용한 Ebook도 있습니다.
Three.js란
- https://threejs.org/manual/#ko/fundamentals
간단하게 HTML 환경에서 3D 구성을 쉽게 하게 도와주는 툴이며, WebGL을 사용하여 복잡하게 할 것을 간단하게 해준다고 생각 하면 쉽습니다. 코드로 힘들게 구현하는 이미지와 3D 툴의 중간적인 느낌이며, 활용도에 따라 다양한 작품을 만 들 수 있습니다. 위 링크를 통해 완성 품의 예제들 확인이 가능합니다.
먼저 알아야 할 것들
- https://threejs.org/manual/#ko/prerequisites
많은 Threejs 강의 들이 있는데 구형 방식의 코드가 많이 존재하여, 이곳에서 최신방식의 코드로 진행 합니다. 주로 Import를 쓰는것이 목적이나, 서버연동 등의 이유로 실제 테스트에선 보안이슈로 진행 안되는 경우가 많아, script 참조로 진행하여도 상관 없습니다. ( 현재 제가 개인적으로 진행하는 프로젝트 또한 서버연동이 가능한 상황이 아니라 Script 참조로 진행 합니다.)
1. ES2015 모듈
<script type="module">
import * as THREE from '../../build/three.module.js';
...
</script>script type이 모듈일때만 사용 가능하며, 결로가 상대 혹은 절대 경로여야만 합니다.
유의 사항은 비쥬얼 스튜디오 같은 곳에서 preview 서버 등으로 실행 할 경우 웹서버 기반이라 정상 실행 되지만, 일반 html 파일로 만들어 실행시 참조를 웹에서 가져오지 않을 경우 참조 위배로 실행이 되지 않으니 웹 기반으로 준비가 필요하다
추가 : 최근 Threejs 의 경우 Moduel 형으로 도어 expert 형의 Js를 제공하여 module 형 아니게 쓸경우 코드 수정 필요
2. document.querySelector와 document.querySelectorAll
document.querySelector : CSS 셀렉터와 일치하는 첫번째 요소 반환
document.querySelectorAll : CSS 셀렉터와 일치하는 모든 요소 반환
3.onbody 지양
<body onload="somefunction()"> 위와 같은 스타일을 지양하고,
<html>
<head>
...
</head>
<body>
...
</body>
<script>
// inline javascript
</script>
</html>위와 같이 사용, 추가로 defer 사용 권장 하는데 정작 Module 형으로 불러올 경우 이미 .. defer 적용되서 불러와서 필요없다고 한다.
ex : <script src="threejs.js" defer></script>
4. 클로저 (closure)
-https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures
function a(v) {
const foo = v;
return function() {
return foo;
};
}
const f = a(123);
const g = a(456);
console.log(f()); // 123 출력
console.log(g()); // 456 출력클러저 사용, 사용하는 이유는 threejs 코드가 전반적으로 클로저 형식이라 값을 변화주어 다양한 출력을 만들 수 있기 때문이다.
5. this 이해하기
-https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this
this - JavaScript | MDN
JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있습니다.
developer.mozilla.org
6.ES5/ES2015/ES2016
var 대신 const let 사용
- var : 구 변수 선언자, 중복 사용 가능 등 코드 병합에서문제 발생,
- const : 재 할당 없는 변수 선언 = 일반적
- let : 재할당 될 변수 선언
for(elem in collection) 대신 for(elem of collection) 사용하기
- 간단히 담을 수 없어 생략
forEach, map, filter 등을 적절히 활용하기
- 간단히 담을 수 없어 생략
구조분해할당(destructuring) 사용하기
ex
//기본 방식
const width = dims.width;
const height = dims.height;
//변경 방식
const { width, height } = dims;
// 배열에 사용 기존방식
const x = position[2];
const y = position[1];
//배열에 사용 변경 방식
const [ , y, x ] = position;객체 선언 시 축약 문법 사용
//기존
const width = 300;
const height = 150;
const obj = {
width: width,
height: height,
area: function() {
return this.width * this.height
},
};
//변경
const width = 300;
const height = 150;
const obj = {
width,
height,
area() {
return this.width * this.height;
},
};개인적으로 아직은 기존 방법이 더좋은게 아닌가.. 싶은...
전개 연산자 ... 사용하기
1차원에서만 유용하단 것을 확인하면 된다.
class 사용하기
- 간단히 담을 수 없어 생략
getter와 setter
- 간단히 담을 수 없어 생략
화살표 함수(arrow function) 활용하기
- 간단히 담을 수 없어 생략
프로미스(Promise)와 async/await
- 간단히 담을 수 없어 생략
템플릿 리터럴(Template Literals)
' 점 기호와 $ 사용하여 한수 안에서 별도의 기능을 수행하는 역할을 한다.
const foo = `템플릿
리터럴
문자열입니다`;
const bar = "템플릿\n리터럴\n문자열입니다";bar 처럼 엔터를 넣어 주는 바식이 아닌 foo 처럼 사용 가능
//참조응용
const r = 192;
const g = 255;
const b = 64;
const rgbCSSColor = `rgb(${r},${g},${b})`;
//참조응용
const color = [ 192, 255, 64 ];
const rgbCSSColor = `rgb(${ color.join(',') })`;
// 계산 응용
const aWidth = 10;
const bWidth = 20;
someElement.style.width = `${ aWidth + bWidth }px`;
7.자바스크립트 네이밍 컨벤션(coding convection, 코딩 스타일 규약) 지키기
- 자바스크립트의 변수, 메서드, 함수 이름은 전부 lowerCamelCase
- 생성자나, 클래스의 이름은 UpperCamelCase
8.Visual Studio Code 사용해보기
'공부 > threeJS' 카테고리의 다른 글
| 03_2 원시 모델(primitives)-회전 중앙 정렬 (0) | 2022.11.28 |
|---|---|
| Three.js 따라 강의 - 03 원시 모델(primitives)- geometry 종류 (0) | 2022.11.28 |
| Three.js 따라 강의 - 02 반응형 다자인 (화면 채우기 (0) | 2022.05.18 |
| Three.js 따라 강의 - 01 Threejs 란? (정육면체만들기) (0) | 2022.05.17 |