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 ko ko ko de 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
#04 3D 도형 추가하는 방법 (+반응형 적용) – Three.js 강좌 | 디자인베이스
홈 Three.js #04 3D 도형 추가하는 방법 (+반응형 적용) – Three.js 강좌
저번 시간에는 장면, 그리고 카메라와 렌더러를 세팅했으니 이제 진짜 도형을 그려봐야겠죠. 3D 물체를 구현해야 하기 때문에 좌표의 점을 이은 선과 면으로 이루어진 도형인 Geometry와 색상이나 질감을 표현한 재질인 Material을 합쳐서 표현합니다. 이번 시간에는 Geometry에 대해서 알아볼게요. Material에 대해서는 다음 강좌에서 좀 더 상세하게 다뤄볼게요. 추가로 브라우저의 화면을 줄였을 때 반응형 처리하는 코드까지 배워보도록 할게요.
*디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
Three.js에서 다양한 지오메트리를 제공합니다. 웹사이트 문서 중 Constructor 설명을 보면 순서대로 속성값을 입힐 수 있습니다. 여기에 기본값이 어떤 것인지 나와있습니다.
BoxGeometry – 정육면체를 만들 수 있습니다.
CylinderGeometry – 원기둥을 만들 수 있습니다.
PlaneGeometry – 평평한 면을 만들 수 있습니다. 주로 바닥을 만들때 사용합니다.
SphereGeometry – 구를 만들 수 있습니다.
TorusGeometry – 도넛 모양을 만들 수 있습니다.
#01 스케치 강좌 소개 – 스케치 강좌(멤버십 전용)
03. Figma에 LottieFiles 사용하는 방법 – LottieFiles 강좌
#11 선택 툴 알아보기 (Marquee Tool, Lasso Tool, Quick Selection Tool 등) – 포토샵 기초 강좌
웹 주소 URL 짧게 만들어 주는 웹사이트
그라데이션 컬러 추천해주는 사이트
인공지능이 채색을 대신 해준다?!
아이패드 프로 아이폰 목업
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.