03. 기본 뼈대 이해하기 Renderer, Scene, Camera - Three.js 강좌 скачать в хорошем качестве

03. 기본 뼈대 이해하기 Renderer, Scene, Camera - Three.js 강좌

안녕하세요. 저번 시간에 기본적인 설치를 마쳤는데, 바로 코드로 직접 짜기 전에 three.js의 기본 구조를 살펴볼게요. three.js에서 가장 기본이 되는 구조는 renderer, scene, camera,입니다. 장면을 만들어서 그 안에 3D 도형을 넣고 그걸 카메라로 비춘 다음에 렌더 어를 통해 그걸 canvas라는 HTML안에 렌더링해서 보여주는 개념이에요. 씬 scene scene은 최상위 노드로 배경색과 안개 등의 요소를 포함하며 여러 개의 3D 오브젝트와 빛, 질감들이 모인 화면입니다. 카메라 Camera 카메라는 scene에 담긴 3D 공간을 카메라로 비춰서 화면을 담아서 렌더러에게 데이터를 넘기는 역할을 합니다. 카메라는 시야각, 카메라의 시작과 끝 지점, 위치 등을 조절할 수 있습니다. 렌더러 renderer 렌더러는 three.js의 핵심 객체입니다. 렌더러를 쉽게 정의해보면 scene과 camera 객체 데이터를 넘겨 받아서 화면 안에 이미지로 렌더링 해주는 역할입니다. 대략적인 개념을 이해하고 가장 기본이 되는 장면과 카메라, 랜더러 코드를 작성해볼게요. three.js 기본구조 - https://threejs.org/manual/#en/fundam... 00:00 시작 00:34 THREE 웹사이트 참고 01:09 구조 상세 설명 02:41 THREE 코드 작성 06:49 애니메이션 코드 추가 #웹코딩 #3D #three #threejs #JS #웹디자이너 #web #threejs기초 🚀 디자인베이스 멤버십 가입하면 다양한 고급 강좌와 예제 파일을 받아볼 수 있어요 ┗    / @designbase   🌟예제 다운은 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.🌟 *디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요. ☞ 디자인베이스 소개 : http://designbase.co.kr/about/ ☞ 공식 웹사이트 : http://designbase.co.kr/ ☞ 네이버블로그 : https://blog.naver.com/designbasekorea