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 ko ko ko ko ko ko ko en ko ko ko en ko ko ko nb 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
09. 3d 물체에 그림자 적용하는 방법 – Three.js 강좌 | 디자인베이스
홈 Three.js 09. 3d 물체에 그림자 적용하는 방법 – Three.js 강좌
안녕하세요. 저번 영상에서는 빛에 대해 다뤄봤는데, 이번 영상에서는 그림자를 다뤄볼게요. Three.js에서 3D 도형에 그림자를 적용하기 위해서는 크게 3단계가 필요합니다. 렌더러에 그림자 사용 설정하고, 빛을 받아 그림자를 표현할 물체와 그 그림자를 받을 물체를 특정 코드로 설정해야 합니다. 마지막으로 빛 자체에도 그림자 설정을 코드로 추가해 주면 됩니다. 기본적으로 도형과 빛이 있어야 그림자가 있겠죠?! 그런데, 저번 영상에서 설명 드린것럼 특정 빛에는 그림자 설정이 안됩니다. 이건 직접 코딩하면서 알아볼게요.
*디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
three.js 그림자를 적용하기 위한 3단계
01. Renderer에 그림자 사용 설정
렌더러 하단에 ShadowMap.enabled의 불리언 값을 true로 설정해야 합니다.
// 렌더러 추가 const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); renderer.shadowMap.enabled = true;
02. 빛을 받아 그림자를 표현할 물체와 그 그림자를 받을 물체에 특정 코드로 설정
그림자를 만들(표현 할) 도형에 castShadow를 적용하고, 그림자를 받을 도형에 receiveShadow를 적용해야 합니다.
three.js 빛과 그림자 원리
//3D const geometry = new THREE.IcosahedronGeometry(0.5,0); const material = new THREE.MeshStandardMaterial({ color: 0x004fff }); const cube = new THREE.Mesh(geometry, material); cube.rotation.y = 0.5; cube.position.y = 0.5; scene.add(cube); cube.castShadow = true; // 그림자를 표현 할 도형 //바닥 const planeGeometry = new THREE.PlaneGeometry(20, 20, 1, 1); const planeMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff }); const plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.rotation.x = -0.5 * Math.PI; plane.position.y = -0.2; scene.add(plane); plane.receiveShadow = true; // 그림자를 받을 도형
03. 빛에 그림자 표현
마지막으로 빛에도 castShadow를 설정해야 합니다. 그림자의 해상도와 블러 정도를 조절 할 수 있습니다. 단, three.js에서 제공하는 빛 중에 AmbientLight, RectAreaLight 등의 빛에는 그림자를 표현할 수 없습니다.
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); directionalLight.position.set(-1.5, 2, 1); const dlHelper = new THREE.DirectionalLightHelper(directionalLight, 0.2, 0x0000ff); scene.add(dlHelper); scene.add(directionalLight); directionalLight.castShadow = true; // 그림자 O directionalLight.shadow.mapSize.width = 2048; // 그림자의 해상도 directionalLight.shadow.mapSize.height = 2048; // 그림자의 해상도 directionalLight.shadow.radius = 8; // 그림자의 블러
#3 XD 포토샵에서 편집하기 – 어도비 XD 강좌
#12 작업물 공유하기 – 어도비 XD 강좌 (멤버십 전용)
#7 반응형을 위한 반응형 크기 조정 기능 – 어도비 XD 강좌
각종 디바이스 무료 목업 (약 90종) by facebook
인공지능이 채색을 대신 해준다?!
그라데이션 컬러 추천해주는 사이트
사각 비닐 패키지 목업
투명 비닐 포장 목업
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.