Three.js로 3D 그래픽 만들기 2/e

1 Three.js로 첫 번째 3D 장면 제작
__Three.js 사용에 필요한 요구사항
__소스 코드 가져오기
____깃을 사용해 저장소 복제
____아카이브를 다운로드하고 추출
____예제 테스트
________대부분의 유닉스/맥 시스템에서 동작하는 파이썬 기반의 웹 서버
________Node.js로 작업하는 경우의 npm 기반 웹 서버
________맥 또는 윈도우용 몽구스 포터블 버전
________파이어폭스와 크롬에서의 보안 설정 비활성화
__HTML 스켈레톤 생성
__3D 객체의 렌더링과 표시
__물질과 광원, 그림자 추가
__애니메이션으로 장면 개선
____requestAnimationFrame 소개
____정육면체 애니메이션
____공 바운싱
__dat.GUI로 실험을 쉽게 만든다
__브라우저 크기 변경에 따라 자동으로 결과물의 크기 조정
__요약

2 Three.js 장면의 기본 구성요소
__장면 작성
____장면의 기본 기능
____장면에 안개 추가
____overrideMaterial 속성 사용
__지오메트리와 메시
____지오메트리의 속성과 함수
____메시용 함수와 속성
__두 가지 카메라의 사용
____직교카메라 대 원근카메라
____특정 지점을 바라보기
__요약

3 Three.js에서 사용할 수 있는 다양한 광원
__Three.js가 제공하는 다양한 빛
__기본 광원
____THREE.AmbientLight
________THREE.Color 객체 사용
____THREE.PointLight
____THREE.SpotLight
____THREE.DirectionalLight
__특수 광원
____THREE.HemisphereLight
____THREE.AreaLight
____LensFlare
__요약

4 Three.js 물질로 작업
__물질의 공통 속성
____기본 속성
____브렌딩 속성
____고급 속성
__간단한 메시부터 시작
____THREE.MeshBasicMaterial
____THREE.MeshDepthMaterial
____물질의 결합
____THREE.MeshNormalMaterial
____THREE.MeshFaceMaterial
__고급 물질
____THREE.MeshLambertMaterial
____THREE.MeshPhongMaterial
____THREE.ShaderMaterial로 자신만의 셰이더 제작
__라인 지오메트리에서 사용할 수 있는 물질
____THREE.LineBasicMaterial
____THREE.LineDashedMaterial
__요약

5 지오메트리로 작업
__Three.js가 제공하는 기본 지오메트리
____2D 지오메트리
________THREE.PlaneGeometry
________THREE.CircleGeometry
________THREE.RingGeometry
________THREE.ShapeGeometry
____3D 지오메트리
________THREE.BoxGeometry
________THREE.SphereGeometry
________THREE.CylinderGeometry
________THREE.TorusGeometry
________THREE.TorusKnotGeometry
________THREE.PolyhedronGeometry
__요약

6 고급 지오메트리와 이항 연산
__THREE.ConvexGeometry
__THREE.LatheGeometry
____압출로 지오메트리 생성
________THREE.ExtrudeGeometry
________THREE.TubeGeometry
________SVG에서 압출
________THREE.ParmametricGeometry
__3D 텍스트 생성
____텍스트 렌더링
____사용자 정의 폰트 추가
__이항 연산으로 메시 결합
____subtract 함수
____intersect 함수
____union 함수
__요약

7 파티클과 스프라이트, 포인트 클라우드
__파티클의 이해
__파티클과 THREE.PointCloud, THREE.PointCloudMaterial
__HTML5 캔버스로 파티클에 스타일 주기
____HTML5 캔버스를 THREE.CanvasRenderer와 함께 사용
____HTML5 캔버스를 WebGLRenderer와 함께 사용
__텍스처로 파티클에 스타일 주기
__스프라이트 맵으로 작업
__고급 지오메트리에서 THREE.PointCloud 제작
__요약

8 고급 메시와 지오메트리의 생성과 로딩
__지오메트리의 그룹화와 병합
____객체의 그룹화
__여러 메시를 병합해 하나의 메시 생성
__외부 자원에서 지오메트리 로딩
__Thee.js JSON 포맷으로 저장하고 로딩
____THREE.Mesh의 저장과 로딩
____장면의 저장과 로딩
__블렌더로 작업
__블렌더에 Three.js 익스포터 설치
____블렌더에서 모델을 로딩하고 내보내기
__3D 파일 포맷에서 가져오기
____OBJ와 MTL 포맷
____콜라다 모델의 로드
____STL과 CTM, VTK, AWD, Assimp, VRML, 바빌론 모델 로딩
____단백질 데이터 은행에서 가져온 단백질 구조 표시
____PLY 모델로 파티클 시스템 제작
__요약

9 애니메이션과 카메라 이동
__기본 애니메이션
____간단한 애니메이션
____객체 선택
____Tween.js를 이용한 애니메이션
__카메라를 이용한 작업
____TrackballControls
____FlyControls
____RollControls
____FirstPersonControls
____OrbitControl
__모핑과 스켈레탈 애니메이션
____모프 타깃으로 애니메이션
________MorphAnimMesh를 이용한 애니메이션
________morphTargetInfluence 속성으로 애니메이션 생성
____뼈대와 스키닝을 이용한 애니메이션
__외부 모델을 사용해 애니메이션 생성
________블렌더로 뼈대 애니메이션 생성
________콜라다 모델에서 애니메이션 로딩
________퀘이크 모델에서 애니메이션 로드
__요약

10 텍스처 로딩과 작업
__물질에서 텍스처 사용
____텍스처를 로딩하고 메시에 적용
____범프 맵을 사용해 주름 생성
____법선 맵으로 더 세밀한 범프와 주름 생성
____라이트 맵으로 페이크 그림자 생성
____환경 맵으로 페이크 반영 생성
____스페큘라 맵
__고급 텍스처 사용
____사용자 정의 UV 매핑
____래핑 반복
____캔버스에 렌더링하고 이를 텍스처로 사용
________캔버스를 텍스처로 사용
________캔버스를 범프 맵으로 사용
____비디오의 출력을 텍스처로 사용
__요약

11 사용자 정의 셰이더와 렌더링 후처리
__후처리를 위한 Three.js 설정
____THREE.EffectComposer
________후처리를 위한 THREE.EffectComposer 설정
________render 루프 업데이트
__후처리 패스
____간단한 후처리 패스
________THREE.FilePass를 사용해 TV 효과 생성
________THREE.BloomPass로 장면에 블룸 효과 추가
________장면을 점의 집합으로 출력
________동일 화면의 여러 렌더러의 결과 보기
____마스크를 사용한 고급 EffectComposer 흐름
____THREE.ShaderPass로 사용자 정의 효과 주기
________간단한 셰이더
________블러링 셰이더
________고급 셰이더
__사용자 정의 후처리 셰이더 생성
____사용자 정의 그레이스케일 셰이더
____사용자 정의 비트 셰이더 생성
__요약

12 장면에 물리 이론과 사운드 추가
__기본 Three.js 장면 제작
__물질 속성
__기본 지원 형상
__제약조건을 사용해 객체의 움직임 제한
____PointConstraint를 사용해 두 지점 사이의 움직임 제한
____HingeConstraint로 문 같은 제약조건 생성
____SliderConstraint로 움직임을 단일 축으로 제한
____ConeTwistConstraint로 구상관절 같은 제약조건 생성
____DOFConstraint로 상세한 제어 생성
____장면에 사운드 추가
__요약