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 en de ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko ko ko en ko ko ko en ko ko ko ko en es ko ko ko ko ko ko en
08. 6가지 종류의 빛 만들기 – Three.js 강좌 | 디자인베이스
홈 Three.js 08. 6가지 종류의 빛 만들기 – Three.js 강좌
안녕하세요. 이제 three.js에서 제공하는 빛에 대해서 배워볼게요. 저번 시간에 배웠던 카메라만큼 중요한 개념 중에 하나입니다. three.js를 통해 표현할 수 있는 빛의 종류들과 실제 코드로 어떻게 구현하는지, 그리고 빛의 위치나 방향을 알려주는 Helper 활용법 등을 알아볼게요.
*디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
AmbientLight : 모든 오브젝트를 대상으로 전역에 빛을 비춥니다.
DirectionalLight : 특정 방향으로 빛을 비춥니다.. 해 같은 느낌이죠.
HemisphereLight : 하늘색, 지상 색으로 설정하여 위아래로 빛을 비춥니다.
PointLight : 한 방향으로 빛을 비춥니다. 전구를 생각하면 편합니다.
RectAreaLight : 직사각형 평면에 균일하게 빛을 비춥니다.
SpotLight : 원뿔 모양으로 빛으로 특정 영역을 비춥니다.
// 전역으로 빛 비춰줌 const ambientLight = new THREE.AmbientLight(0xffffff, 0.1); scene.add(ambientLight); // 특정 방향으로 빛 방출 const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); directionalLight.position.set(1, 1, 1); scene.add(directionalLight); // 하늘과 땅 컬러 지정 const hemisphereLight = new THREE.HemisphereLight(0x004fff, 0xff0000, 1); scene.add(hemisphereLight); // 한 방향으로 빛 방출 (예. 전구) const pointLight = new THREE.PointLight(0xffffff, 1); pointLight.position.set(1, 1, 1); scene.add(pointLight); // 직사각형 빛 방출 const rectLight = new THREE.RectAreaLight(0xffffff, 2, 1, 1); rectLight.position.set(0.5, 0.5, 1); rectLight.lookAt(0, 0, 0); scene.add(rectLight); // 직사각형 빛 방출 const spotLight = new THREE.SpotLight(0xffffff, .5); spotLight.position.set(0.5, 0.5, 1); scene.add(spotLight);
빛의 위치를 알 수 있게 도와주는 Helper 사용법
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); directionalLight.position.set(1, 1, 1); scene.add(directionalLight); // 빛 헬퍼 추가 const dlhelper = new THREE.DirectionalLightHelper(directionalLight, 0.5); scene.add(dlhelper);
#10 스타일 초기화를 위한 Reset.css & Normalize.css – 웹 코딩 강좌
#6 HTML + CSS로 버튼 만들기(Feat. 마우스 오버) – 웹 코딩 강좌
#10 웹디자인 실습 PC 카테고리 페이지 – 웹디자인 입문 강좌
쉽게 사람 일러스트레이션 믹스 매치 하기 ‘humaaans’
디자이너가 무조건 피해야 할 회사 유형
오너의 마음으로 프로젝트의 A부터 Z까지
시네마 4D로 제작된 아기자기한 그래픽
Mac Studio & Studio Display 목업
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.