Three.js로 3D 그래픽 만들기 2/e(ACORN+PACKT TECHNICAL BOOK)

★ 이 책에서 다루는 내용 ★ ■ Three.js가 제공하는 다양한 지오메트리 사용 ■ 3D 장면에 사실적인 조명과 그림자 적용 ■ Three.js가 제공하는 다양한 카메라 컨트롤을 사용해 3D 장면 탐색 ■ 범프 맵과 노멀 맵, 반사 맵, 라이트 맵의 고급 텍스처를 사용한 사실적인 3D 객체 생성 ■ OBJ와 STL, 콜라다 같은 외부 포맷의 모델 가져오기와 애니메이션 ■ 모프 타겟과 스켈레톤 애니메이션을 이용한 애니메이션 생성 ■ Physijs 자바스크립트 라이브러리로 3D 장면에 물리 적용 ■ 사용자 정의 꼭지점 셰이더와 프레그먼트 셰이더를 작성해 웹지엘과 직접 상호작용

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로 상세한 제어 생성 ____장면에 사운드 추가