ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko nb ko ko ko en en ko ko ko ko ko ko ko ko ko en ko en ko ko ko ko ko ko ko ko nb ko en ko ko ko fr ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko ko en ko ko ko ko en es ko ko ko ko ko ko en
#03 기본 뼈대 이해하기 Renderer, Scene, Camera – Three.js 강좌 | 디자인베이스
안녕하세요. 저번 시간에 기본적인 설치를 마쳤는데, 바로 코드로 직접 짜기 전에 three.js의 기본 구조를 살펴볼게요.
three.js에서 가장 기본이 되는 구조는 renderer, scene, camera,입니다.
장면을 만들어서 그 안에 3D 도형을 넣고 그걸 카메라로 비춘 다음에 렌더 어를 통해 그걸 canvas라는 HTML안에 렌더링해서 보여주는 개념이에요.
대략적인 개념을 이해하고 가장 기본이 되는 장면과 카메라, 랜더러 코드를 작성해볼게요.
three.js 기본 구조 – https://threejs.org/manual/#en/fundamentals
*디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
Three.js의 기본 구조입니다. 이번 강좌에서는 렌더러, 씬, 카메라를 위주로 알아보겠습니다
렌더러는 three.js의 핵심 객체입니다. 렌더러를 쉽게 정의해보면 scene과 camera 객체 데이터를 넘겨 받아서 화면 안에 이미지로 렌더링 해주는 역할입니다
scene은 최상위 노드로 배경색과 안개 등의 요소를 포함하며 여러 개의 3D 오브젝트와 빛, 질감들이 모인 화면입니다.
카메라는 scene에 담긴 3D 공간을 카메라로 비춰서 화면을 담아서 렌더러에게 데이터를 넘기는 역할을 합니다. 카메라는 시야각, 카메라의 시작과 끝 지점, 위치 등을 조절할 수 있습니다.
11. 초간단 물결 라인 만들기 – 일러스트레이터 강좌
#18 Displace를 활용해서 배경에 맞춰 자연스럽게 합성하는 방법 – 포토샵 강좌 실전
#12 웹디자인 실습 모바일 메인 페이지 – 웹디자인 입문 강좌
클릭 한 번으로 웹사이트 화면 캡쳐뜨는 방법(크롬 확장 프로그램)
저작권 완전 무료 이미지 사이트 모음
쉽게 사람 일러스트레이션 믹스 매치 하기 ‘humaaans’
10. 자유롭게 화면 조절하는 방법 OrbitControls – Three.js 강좌
27. 귀여운 꿀벌 일러스트 쉽게 만드는 방법 – 일러스트레이터 기초 강좌
09. 3d 물체에 그림자 적용하는 방법 – Three.js 강좌
26. 프리폼 그라디언트로 5초 만에 부드러운 그라데이션 배경 만드는 방법 – 일러스트레이터 기초 강좌
Youtube Instagram Pinterest Naver Blog
포토샵 일러스트레이터 피그마 스케치 XD 프로토파이
웹디자인 웹코딩 인비전 프린서플 Lottie Three.js
소개 매거진 디자인 사전 북마크 무료 소스 문의하기 멤버십
© 2022 Designbase. All rights reserved.